@extends('layouts.base')
@section('title','中台商品管理')

@section('content')
<div id="app">
    <div class="panel panel-info">
        <div class="panel-heading">
            <span>当前位置：</span>
            <a href="#">
                <span>中台商品管理</span>
            </a>
        </div>
    </div>
    <div class="alert alert-info alert-important">
        <span>使用方法:</span>
        <span style="padding-left: 60px;">1. 下载 <a style="text-decoration: none;
color: #333;" href="{{ yzWebUrl('plugin.goods-handle.backend.zt.exampleExcel') }}" >
            【中台商品ID模板】
        </a>，填入需要导入的中台商品id</span>
        <span style="padding-left: 60px;">2. 上传中台商品IDExcel并确认导入</span>
        <span style="padding-left: 60px;">3. 导出中台商品列表进行比价</span>
    </div>
    <form id="importform" class="form-horizontal form" action="{{ yzWebUrl('plugin.goods-handle.backend.zt.index') }}"
          method="post" enctype="multipart/form-data">
        <div class='form-group'>
            <div class="form-group">
                <label class="col-sm-2 control-label must">EXCEL文件</label>
                <div class="col-sm-5 goodsname" style="padding-right:0;">
                    <input type="file"  name="import_zt_goods_ids" class="form-control"/>
                </div>
            </div>
            <div class='form-group'>
                <div class="col-sm-12">
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" name="cancelsend" value="yes">
                            导入中台商品ID
                        </button>
                        <a style="margin-left: 10px;"  class="btn btn-primary"  @click="exportZtGoodsList()">导出中台商品数据</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
        @section('search')
            <template>
                <!-- 表格start -->
                <el-table :data="goods_list" style="width: 100%" :class="table_loading==true?'loading-height':''"  v-loading="table_loading" :span-method="arraySpanMethod" height="600">
                    <el-table-column prop="p_id" label="中台商品ID" width="70" align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column  label="图片" width="60" align="center">
                        <template slot-scope="scope">
                            <img :src="scope.row.image_url" style="width:50px;height:50px;">
                        </template>
                    </el-table-column>
                    <el-table-column  label="商品名称" min-width="180" align="left" class="edit-cell">
                        <template slot-scope="scope">
                            [[scope.row.products_title]]
                        </template>
                    </el-table-column>
                    <el-table-column  label="中台商品规格ID" min-width="80" align="left" class="edit-cell">
                        <template slot-scope="scope">
                            [[scope.row.skus_id]]
                        </template>
                    </el-table-column>
                    <el-table-column  label="中台商品规格标题" min-width="120" align="left" class="edit-cell">
                        <template slot-scope="scope">
                            [[scope.row.skus_title]]
                        </template>
                    </el-table-column>
                    <el-table-column  label="供货价" max-width="80" align="center">
                        <template slot="header" slot-scope="scope">
                            <div style="display: flex;align-items: center;justify-content:center">
                                <span>供货价</span>
                                <div style="display: flex;flex-direction: column;margin-left: 5px;">
                                    <i class="el-icon-caret-top" :class="sort_price == 'asc' ? 'sort_active' : '' " @click="btnPositiveSequence('price')" ></i>
                                    <i class="el-icon-caret-bottom" :class="sort_price == 'desc' ? 'sort_active' : '' " @click="btnReverseOrder('price')"></i>
                                </div>
                            </div>
                        </template>
                        <template slot-scope="scope">
                            ￥[[scope.row.price /100]]
                        </template>
                    </el-table-column>
                    <el-table-column  prop='' label="成本价" width="80" align="center">
                        <template slot-scope="scope">
                            ￥[[scope.row.cost_price /100]]
                        </template>

                    </el-table-column>
                    <el-table-column  prop='' label="零售价" width="80" align="center">
                        <template slot-scope="scope">
                            ￥[[scope.row.origin_price /100]]
                        </template>

                    </el-table-column>
                    <el-table-column  prop='' label="指导价" width="80" align="center">
                        <template slot-scope="scope">
                            ￥[[scope.row.guide_price /100]]
                        </template>

                    </el-table-column>
                    <el-table-column  prop='' label="营销价" width="80" align="center">
                        <template slot-scope="scope">
                            ￥[[scope.row.activity_price /100]]
                        </template>

                    </el-table-column>
                    <el-table-column prop="member_num" label="利润率" width="80" align="center">
                        <template slot-scope="scope" >
                            <div v-if="scope.row.price != 0">  [[((scope.row.guide_price - scope.row.price)* 100 /scope.row.guide_price).toFixed(2)]]% </div>
                            <div v-else>0%</div>

                        </template>
                    </el-table-column>
                    <el-table-column label="库存" align="center" max-width="80">
                        <template slot="header" slot-scope="scope">
                            <div style="display: flex;align-items: center;justify-content:center">
                                <span>库存</span>
                                <div style="display: flex;flex-direction: column;margin-left: 5px;">
                                    <i class="el-icon-caret-top" :class="sort_stock == 'asc' ? 'sort_active' : '' " @click="btnPositiveSequence('stock')" ></i>
                                    <i class="el-icon-caret-bottom" :class="sort_stock == 'desc' ? 'sort_active' : '' " @click="btnReverseOrder('stock')"></i>
                                </div>
                            </div>
                        </template>
                        <template slot-scope="scope">
                            [[scope.row.stock]]
                        </template>
                    </el-table-column>
                    <el-table-column prop="real_sales" label="销量" max-width="80" align="center">
                        <template slot="header" slot-scope="scope">
                            <div style="display: flex;align-items: center;justify-content:center">
                                <span>销量</span>
                                <div style="display: flex;flex-direction: column;margin-left: 5px;">
                                    <i class="el-icon-caret-top" :class="sort_sales == 'asc' ? 'sort_active' : '' " @click="btnPositiveSequence('sales')" ></i>
                                    <i class="el-icon-caret-bottom" :class="sort_sales == 'desc' ? 'sort_active' : '' " @click="btnReverseOrder('sales')"></i>
                                </div>
                            </div>
                        </template>
                        <template slot-scope="scope">
                            [[scope.row.sales]]
                        </template>
                    </el-table-column>
                    <el-table-column  prop='brand_name' label="品牌" width="80" align="center">
                        <template slot-scope="scope">
                            [[scope.row.brand_name]]
                        </template>
                    </el-table-column>
                    <el-table-column  prop='supplier_name' label="供应渠道" width="80" align="center">
                        <template slot-scope="scope">
                            [[scope.row.supplier_name]]
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 表格end -->
            </template>
        @show
        <div class="vue-page" v-show="total>1">
            <el-row>
                <el-col align="right">
                    <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="setPageSize" @current-change="search" :total="total" :page-sizes="[15,30,50, 100]" :page-size="per_size" :current-page="current_page" background v-loading="loading"></el-pagination>
                </el-col>
            </el-row>
        </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            data(){
              return{
                ztIds:<?php echo $ztIds;?>,
                goods_list: [],
                  sort_price:"",
                  sort_stock:"",
                  sort_sales:"",
                  needMergeArr: ['p_id','image_url', 'products_title'], // 有合并项的列（首列ID 和 第二列姓名）
                  rowMergeArrs: {}, // 包含需要一个或多个合并项信息的对象
                  multipleSelection:[],
                  total:0,
                  per_size:15,
                  current_page:0,
                  loading:false,
              }
            },
            created() {
                this.getData(1);
            },
            methods: {
                getData(page) {
                    var that = this;
                    that.table_loading = true;
                    let json = {
                        ztIds: this.ztIds,
                    }
                    let loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    that.$http.post("{!! yzWebFullUrl('plugin.goods-handle.backend.zt.getZtGoods') !!}", {search:json,page:page}).then(response => {
                        if (response.data.result == 1) {
                            that.goods_list = response.data.data.goods_list.data;
                            let arr = [];
                            that.goods_list.forEach((item, index) => {
                                item.title = that.escapeHTML(item.title)
                                arr.push(Object.assign({}, item, {is_choose: 0}))//是否选中
                            });
                            that.goods_list = arr;
                            that.total = response.data.data.goods_list.total;
                            that.current_page = response.data.data.goods_list.current_page;
                            that.per_size = response.data.data.goods_list.per_page;
                            that.rowMergeArrs = this.rowMergeHandle(that.needMergeArr, that.goods_list); // 处理数据
                        } else {
                            that.$message.error(response.data.msg);
                        }
                        loading.close();
                        that.table_loading = false;
                    }), function (res) {
                        console.log(res);
                        that.table_loading = false;
                    };
                },
                // 字符转义
                escapeHTML(a) {
                    a = "" + a;
                    return a.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&apos;/g, "'");
                    ;
                },
                arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                    // 没办法循环判断具体是那一列 所以就只好写了多个if
                    if (column.property === 'p_id') return this.mergeAction('p_id', rowIndex, column);
                    if (column.property === 'products_title') return this.mergeAction('products_title', rowIndex, column);
                    if (column.property === 'image_url') return this.mergeAction('image_url', rowIndex, column);
                },
                mergeAction(val, rowIndex, colData) {   // 参数 val 为 "name" 或者"id"
                    let _row = this.rowMergeArrs[val].rowArr[rowIndex];
                    let _col = _row > 0 ? 1 : 0;
                    return [_row, _col];
                },
                rowMergeHandle(arr, data) { //arr: ['name', 'id']  data为tableData
                    if (!Array.isArray(arr) && !arr.length) return false;
                    if (!Array.isArray(data) && !data.length) return false;
                    let needMerge = {};
                    arr.forEach(i => {  // i 为 "name" 或者 "id"
                        needMerge[i] = {
                            rowArr: [],
                            rowMergeNum: 0
                        };
                        data.forEach((item, index) => { // item: { id: '122', name: '王小虎', amount1: '539', amount2: '4.1', amount3: 15 }
                            /* item 为表格每一项的数据 ，index 为表格数据索引 */
                            // 表格首个数据单独处理
                            if (index === 0) {
                                needMerge[i].rowArr.push(1);
                                needMerge[i].rowMergeNum = 0;
                            } else {
                                // 如果后一项与前一项相等，只用改变 rowArr 数组，不用管 rowMergeNum 数值
                                if (item[i] === data[index - 1][i]) { // 后一项name与前一项name对比
                                    needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1; //此处是 rowMergeNum 属性存在的意义，就是为了定位要改变的数值
                                    needMerge[i].rowArr.push(0);
                                }
                                //如果后一项与前一项不相等，rowArr、rowMergeNum都改变
                                else {
                                    needMerge[i].rowArr.push(1);
                                    needMerge[i].rowMergeNum = index;
                                }
                            }
                        });
                    });
                    return needMerge;
                },
                exportZtGoodsList() {
                    //this.$refs.multipleTable.toggleRowSelection(this.goods_list[index],true);   //row 选中
                    var ztIds=this.ztIds;
                    var data={ztIds:ztIds};
                    var url = '{!! yzWebFullUrl('plugin.goods-handle.backend.zt.exportZtGoodsList') !!}';
                    const loading = this.$loading({ target: '.loading-area' })
                    axios({
                        method:'post',
                        url: url, // 请求地址
                        data: data, // 参数
                        responseType: 'blob', // 表明返回服务器返回的数据类型
                        headers: {
                         'Content-Type': 'application/json'
                    }
                     }).then(res => {
                        loading.close()
                        const blob = new Blob([res.data], {
                            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;"
                        });
                        const downloadElement = document.createElement("a");
                        const href = window.URL.createObjectURL(blob);
                        const filename = "中台商品数据"
                        downloadElement.href = href;
                        downloadElement.download = filename + '.xlsx'; //命名下载名称
                        downloadElement.click();
                        window.URL.revokeObjectURL(href); //下载完成进行释放
                    })
                },
                search(val) {
                    this.getData(val);
                },
                setPageSize(val) {
                    let refresh = val !== this.per_size;

                    this.per_size = val;

                    if (refresh) {
                        this.search(1);
                    }
                },
            }

        })
    </script>
@endsection('content')