@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.exampleExcel2')}}">
                【中台商品分类模板】</a></span>
        <span style="padding-left: 60px;">2. 填入中台商品id,商品分类及标签信息</span>
        <span style="padding-left: 60px;">3. 上传并确认导入,导入完成后商品将导入到商城,商品状态处于下架锁定状态</span>
    </div>
    <form id="importform" class="form-horizontal form" action="{{ yzWebUrl('plugin.goods-handle.backend.zt.goodsIndex') }}"
          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_category" 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">
                            导入中台商品分类
                        </button>
                        <a style="margin-left: 10px;"  class="btn btn-primary"  @click="pushZtGoods">商品同步到商城</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
    @section('search')
        <template>
            <!-- 表格start -->
            <el-table :data="cate_data" style="width: 100%"  >
                <el-table-column prop="zt_id" label="中台商品ID" width="70" align="center"></el-table-column>
                </el-table-column>
                <el-table-column  label="中台商品名称" min-width="80" align="center" class="edit-cell">
                    <template slot-scope="scope">
                        [[scope.row.goods_name]]
                    </template>
                </el-table-column>
                <el-table-column  label="商品一级分类" min-width="80" align="center" class="edit-cell">
                    <template slot-scope="scope">
                        [[scope.row.cate1]]
                    </template>
                </el-table-column>
                <el-table-column  label="商品二级分类" min-width="80" align="center" class="edit-cell">
                    <template slot-scope="scope">
                        [[scope.row.cate2]]
                    </template>
                </el-table-column>
                <el-table-column  label="商品三级分类" min-width="80" align="center" class="edit-cell">
                    <template slot-scope="scope">
                        [[scope.row.cate3]]
                    </template>
                </el-table-column>
                <el-table-column  label="商品标签组名称" max-width="80" align="center">
                    <template slot-scope="scope">
                        [[scope.row.tage_group]]
                    </template>
                </el-table-column>
                <el-table-column   label="商品标签值" width="120" align="center">
                    <template slot-scope="scope">
                        [[scope.row.tage]]
                    </template>

                </el-table-column>
            </el-table>
            <!-- 表格end -->
        </template>
    @show
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            data(){
              let cate_data = {!! $cate_data !!};
              return{
                goods_list: [],
                  sort_price:"",
                  sort_stock:"",
                  sort_sales:"",
                  needMergeArr: ['p_id','image_url', 'products_title'], // 有合并项的列（首列ID 和 第二列姓名）
                  rowMergeArrs: {}, // 包含需要一个或多个合并项信息的对象
                  multipleSelection:[],
                  cate_data:cate_data,
                  total:0,
                  per_size:15,
                  current_page:0,
                  loading:false,
              }
            },
            created() {

            },
            methods: {
                pushZtGoods(){
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! yzWebFullUrl('plugin.goods-handle.backend.zt.pushZtGoods') !!}', {cate_data: this.cate_data}).then(response => {
                        if (response.data.result) {
                            this.$message({type: 'success',message: '同步成功!'});
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                        loading.close();
                    }, response => {
                        loading.close();
                        this.$message({message: response.data.msg, type: 'error'});
                    })
                }
            }

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