@extends('layouts.base')
@section('title', "添加云仓商品")
@section('content')
    <style>
        .ml-10 {
            margin-left: 10px;
        }

        .goods_xing ul li {
            float: left;
            margin-left: 10px;
        }

        .el-cascader-menu {
            height: 200px;
        }
    </style>
    <style>
        .el-table .cell{
            white-space:pre-line;
        }
    </style>
    <div class="leadgoods">
        <div id="app">
            <template>
                <div class="lead_goods">
                    <!-- 标题 -->
                    <div class="title" style="margin:20px;fontSize:16px;border-bottom:1px solid #ccc;padding-bottom:15px;">添加云仓商品</div>
                    <div class="form-list">
                        <el-form :inline="true" :model="post_form" ref="post_form" style="margin-left:10px;">
                            <el-row>
                                <el-form-item label="" prop="">
                                    <el-select v-model="post_form.middleground_configuration_id" placeholder="请选择供应链" clearable remote filterable >
                                        <el-option v-for="item in middleground_configuration" :key="item.id" :label="item.title" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="" prop="">
                                    <el-select v-model="post_form.goods_status" placeholder="请选择商品状态" clearable>
                                        <el-option v-for="item in goods_status_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="" prop="">
                                    <el-select v-model="post_form.sell_stock" placeholder="请选择售中库存" clearable>
                                        <el-option v-for="item in sell_stock_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="" prop="">
                                    <el-select v-model="post_form.status" placeholder="请选择操作状态" clearable>
                                        <el-option v-for="item in status_list" :key="item.id" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="post_form.id_v1" placeholder="请选择一级分类" clearable @change="changeCateV1()" filterable>
                                        <el-option v-for="item in category" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="post_form.id_v2" placeholder="请选择二级分类" clearable @change="changeCateV2()" filterable>
                                        <el-option v-for="item in category_v2" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="post_form.id_v3" placeholder="请选择三级分类" clearable v-if="cate_level==3" filterable>
                                        <el-option v-for="item in category_v3" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="" prop="">
                                    <el-select v-model="post_form.brand_id" placeholder="请选择品牌" clearable>
                                        <el-option v-for="item in brands_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="" prop="keyword">
                                    <el-input v-model="post_form.keyword" placeholder="请输入商品ID或关键字"></el-input>
                                </el-form-item>
                                <el-form-item label="价格区间" prop="">
                                    <el-input v-model="post_form.min_price" placeholder="最低价" style="width:150px;"></el-input>
                                    至
                                    <el-input v-model="post_form.max_price" placeholder="最高价" style="width:150px;"></el-input>
                                </el-form-item>
                                <el-form-item label="添加时间">
                                    <el-date-picker
                                            v-model="post_form.times"
                                            type="datetimerange"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            style="margin-left:5px;"
                                            align="right">
                                    </el-date-picker>
                                </el-form-item>

                                <a href="#">
                                    <el-button type="primary" icon="el-icon-search" @click="getData(1)">搜索</el-button>
                                </a>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <div class="table"  style="margin-top:10px;margin-left:20px;" >
                        <el-table ref="multipleTable" max-height="600"   :data="tableData" border style="width: 100%" @select="selectchange" @select-all="selectchangeAll" @selection-change="change">
                            <el-table-column prop="status" type="selection">
                            </el-table-column>
                            <el-table-column prop="id" label="id" width="80">
                            </el-table-column>
                            <el-table-column prop="thumb" label="商品">
                                <template slot-scope="scope">
                                    <img :src="scope.row.thumb" alt="" style="display:block;width:80px;height:80px;">
                                </template>
                            </el-table-column>
                            <el-table-column prop="title" label="商品名称">
                                <template slot-scope="scope">

                                    <a :href="'{{ yzWebFullUrl('plugin.yz-supply.admin.shop-goods.edit', array('id' => '')) }}'+[[scope.row.id]]">
                                        [[scope.row.title]]
                                    </a>
                                </template>
                            </el-table-column>
                            <el-table-column prop="stock"  v-bind:label="'原价\n售价\n成本价'">
                                <template slot-scope="scope">
                                    ￥[[scope.row.market_price]]<br>
                                    ￥[[scope.row.price]]<br>
                                    ￥[[scope.row.cost_price]]<br>
                                </template>
                            </el-table-column>
                            <el-table-column prop="stock"  v-bind:label="'预计中台商品零售价格\n预计中台商品指导价格\n预计中台商品成本价格'">
                                <template slot-scope="scope">
                                    ￥[[scope.row.scPrice]]<br>
                                    ￥[[scope.row.yprice]]<br>
                                    ￥[[scope.row.jsPrice]]<br>
                                </template>
                            </el-table-column>
                            <el-table-column prop="stock" label="库存">
                                <template slot-scope="scope">
                                    <span  v-html="scope.row.stock"></span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="real_sales" label="销量">
                            </el-table-column>
                            <el-table-column prop="add_status" label="状态">
                            </el-table-column>
                        </el-table>
                    </div>
                    <!-- 分页 -->
                    <div class="feiye">
                        <!-- 分页 -->
                        <el-row>
                            <el-col :span="24" align="right" style="padding:15px 5% 15px 0">
                                <el-pagination
                                        @current-change="handleCurrentChange"
                                        :current-page="currentPage4"
                                        :page-size="page_size"
                                        layout="total, prev, pager, next, jumper"
                                        :total="total">
                                </el-pagination>
                                <!-- <el-pagination layout="prev, pager, next " @current-change="handleCurrentChange" :current-page.sync="currentPage4" :total="total" background></el-pagination> -->
                            </el-col>
                        </el-row>
                    </div>
                    <!-- 线 -->
                    <div class="xian_goods" style="border-bottom:1px solid #ccc;width:100%;height:1px;margin-top:20px;"></div>


                    <div class="push_goods_les" style="padding-top: 50px;">
                        <el-form :inline="true" :model="search_form" ref="search_form" style="margin-left:10px;">

                            <el-form-item>
                                <el-select v-model="search_form.category1_id" placeholder="请选择一级分类" clearable
                                           @change="changeV1()" filterable>
                                    <el-option v-for="item in category_list" :key="item.id" :label="item.name"
                                               :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="search_form.category2_id" placeholder="请选择二级分类" clearable
                                           @change="changeV2()" filterable>
                                    <el-option v-for="item in category_list_v2" :key="item.id"
                                               :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="search_form.category3_id" placeholder="请选择三级分类" clearable filterable>
                                    <el-option v-for="item in category_list_v3" :key="item.id"
                                               :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
{{--                            <el-form-item>--}}
{{--                                <el-select v-model="search_form.after_sale_time" placeholder="售后时长" clearable>--}}
{{--                                    <el-option v-for="item in after_sale_time" :key="item.id"--}}
{{--                                               :label="item.label" :value="item.value"></el-option>--}}
{{--                                </el-select>--}}
{{--                            </el-form-item>--}}
                            <el-form-item>
                                <el-select v-model="search_form.freight_template_id" placeholder="运费模板" clearable filterable>
                                    <el-option v-for="item in dispatch_list" :key="item.id"
                                               :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-input class="ml-10" clearable v-model="search_form.freight"  placeholder="运费" style="width:126px;"></el-input>
                                <span>元</span>
                            </el-form-item>
{{--                            <el-form-item>--}}
{{--                                <el-input class="ml-10" clearable v-model="search_form.pywlPrice"  placeholder="偏远物流费" style="width:126px;"></el-input>--}}
{{--                                <span>元</span>--}}
{{--                            </el-form-item>--}}
                        </el-form>
                    </div>
                    <el-dialog :visible.sync="import_show" width="750px"  title="推送全部筛选商品">
                        <el-col v-if="all_import.import_status == 0" style="color: red">共计推送[[total]]个商品</el-col>
                        <el-col v-if="all_import.import_status == 1" style="color: red">导入商品总数：[[all_import.import_total]]</el-col>
                        <el-col v-if="all_import.import_status == 1" style="color: red">已推送商品数：[[all_import.import_exits]]</el-col>
                        <el-col v-if="all_import.import_status == 1" style="color: red">总进度约：[[all_import.import_process]]%</el-col>
                        <el-col  style="color: red">如果没有选择分类，会检索云仓-分类匹配是否匹配，如果没有将不会推送</el-col>
                        <el-col  style="color: red">如果没有选择运费模板与运费，推送过去的商品运费是0</el-col>
                        <el-col  style="color: red">如果包含已推送商品将会更新这个商品，更新不会更新分类，运费等数据</el-col>
                        <span slot="footer" class="dialog-footer">


                        <el-button @click="import_show = false">取 消</el-button>
                        <el-button type="primary" :disabled="all_import_disabled" @click="allPushGoods">确认推送</el-button>
                    </span>
                    </el-dialog>

                    <!-- 导入商品 -->
                    <div class="push_goods_les">
                        <el-button @click="toggleSelection(tableData)">全选</el-button>
                        <el-button type="success" ref="but1" style="margin:20px;" @click="pushGoods">推送商品</el-button>
                        <el-button type="danger" ref="but1" style="" @click="show_all_import()">推送全部筛选商品</el-button>
                    </div>
                </div>
            </template>
        </div>
    </div>
    <script>
        // let goodsData = JSON.parse('{!! $list !!}');

        // console.log(goodsData);
        var vm = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            data() {
                // let goodsData = JSON.parse('{!! $list !!}');
                let all_import = {!! $import?:'{}' !!};

                return {
                    input: '', //关键词
                    input1: '', //价格数据-到
                    input2: '', //价格数据
                    checked: false,
                    total: 0, //总条数
                    currentPage4: 1, //当前页数
                    page_size:0,
                    middleground_configuration:[],
                    search_form: {

                        category1_id: '',
                        category2_id: '',
                        category3_id: ''
                    },
                    post_form: {
                        middleground_configuration_id:0,
                        id_v1: '',
                        id_v2: '',
                        id_v3: '',
                        times:[],
                    },
                    goods_status_list:[
                        {id:'',name:'全部状态'},
                        {id:'0',name:'下架'},
                        {id:'1',name:'上架'},
                    ],
                    sell_stock_list:[
                        {id:'',name:'全部'},
                        {id:'0',name:'售罄'},
                        {id:'1',name:'出售中'},
                    ],
                    brands_list:[],//品牌名称
                    category_list_all:[],
                    category_list: [],
                    category_list_v2: [],
                    category_list_v3: [],
                    import_show:false,
                    all_import_disabled:false,
                    all_import: all_import,
                    category_all:[],
                    category: [],
                    category_v2: [],
                    category_v3: [],
                    after_sale_time: [{
                        value: 7,
                        label: '7天'
                    }, {
                        value: 15,
                        label: '15天'
                    }, {
                        value: 30,
                        label: '30天'
                    }],
                    dispatch_list: [],
                    status_list: [{
                        value: '',
                        label: '状态不限'
                    }, {
                        value: '0',
                        label: '未添加'
                    }, {
                        value: '1',
                        label: '已添加'
                    }, {
                        value: '2',
                        label: '待更新'
                    }, {
                        value: '3',
                        label: '待删除'
                    }, {
                        value: '4',
                        label: '不可操作'
                    }],
                    cate_level:2,
                    selectedOptions: [],
                    // 表格
                    tableData: [],
                    goods_ids:[],//商品id的集合
                    parentid:'',//一级分类的id
                    childid:"",//二级分类的ID
                }
            },
            created () {
                this.getMiddlegroundConfiguration();
            },
            methods: {
                getMiddlegroundConfiguration(){
                    this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.get-middleground-configurations') !!}').then(function (response) {
                        if (response.data.result) {
                            this.middleground_configuration = response.data.data;
                            this.post_form.middleground_configuration_id = this.middleground_configuration[0].id;
                            this.getData(1);
                            this.getCategory();
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    }, function (response) {
                        this.$message({message: response.data.msg, type: 'error'});
                    })
                },
                //本地分类、品牌
                getCategory() {
                    this.$http.post('{!!yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-manage.get-third-category')!!}',{
                        'middleground_configuration_id':this.post_form.middleground_configuration_id
                    }).then(res => {
                        if (res.data.result == '1') {
                            this.category_all = res.data.data.category.cate;
                            this.category = res.data.data.category.cate;
                            this.cate_level =  res.data.data.category.cate_level;
                            this.brands_list =  res.data.data.brands;
                            this.dispatch_list =  res.data.data.dispatch;

                        } else {
                            this.$message({
                                type: 'error',
                                message: res.data.msg
                            })
                        }
                    })
                },
                // 获取第三方分类、
                getThirdCategory(parent_id,level){
                    this.$http.post('{!!yzWebFullUrl('plugin.yz-supply.admin.goods-import.getChildrenCategory')!!}', {
                        'parent_id': parent_id,
                        'middleground_configuration_id':this.post_form.middleground_configuration_id
                    }).then(res => {
                        if (res.data.result == '1') {
                            switch (level) {
                                case 1:
                                    this.category_list = res.data.data;
                                    break;
                                case 2:
                                    this.category_list_v2 = res.data.data;
                                    break;
                                case 3:
                                    this.category_list_v3 = res.data.data;
                                    break;
                            }

                        } else {
                            this.$message({
                                type: 'error',
                                message: res.data.msg
                            })
                        }
                    })
                },
                changeModel() {

                },

                // 一级分类改变
                changeV1() {
                    this.search_form.category2_id = "";
                    this.search_form.category3_id = "";
                    this.getThirdCategory(this.search_form.category1_id,2)
                },
                // 二级分类改变
                changeV2() {
                    this.search_form.category3_id = "";
                    this.getThirdCategory(this.search_form.category2_id,3)
                },

                // 一级分类改变
                changeCateV1() {
                    this.post_form.id_v2 = "";
                    this.post_form.id_v3 = "";
                    this.category_v2 = [];
                    this.category_v3 = [];
                    this.category.find(item => {
                        if (item.id == this.post_form.id_v1) {
                            this.category_v2 = item.childrens;
                        }
                    });
                },
                // 二级分类改变
                changeCateV2() {
                    this.post_form.id_v3 = "";
                    this.category_v3 = [];
                    this.category_v2.find(item => {
                        if (item.id == this.post_form.id_v2) {
                            this.category_v3 = item.childrens;
                        }
                    })
                },
                show_all_import()
                {
                    if(this.search_form.category1_id != ""){
                        if(this.search_form.category2_id == ""){
                            this.$message.error('请选择二级分类');
                            return false
                        }
                        if(this.search_form.category1_id == ""){
                            this.$message.error('请选择三级分类');
                            return false
                        }
                    }

                    if (this.all_import.import_status == 1) {
                        this.all_import_disabled = true
                    }
                    this.import_show = true;
                },
                // 获取数据
                getData(page){
                    this.getThirdCategory(0,1)  //搜索时可能切换供应链。分类重新获取
                    var that = this;
                    console.log(page);
                    let json = {
                        page:page,
                        search:{
                            keyword:that.post_form.keyword,
                            status:that.post_form.status,
                            goods_status:that.post_form.goods_status,
                            sell_stock:that.post_form.sell_stock,
                            brand_id:that.post_form.brand_id,
                            min_price:that.post_form.min_price,
                            max_price:that.post_form.max_price,
                            parentid:that.post_form.id_v1,
                            childid:that.post_form.id_v2,
                            thirdid:that.post_form.id_v3,
                            start_time:that.post_form.times[0],
                            end_time:that.post_form.times[1],
                        },
                        middleground_configuration_id:this.post_form.middleground_configuration_id
                    };
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!!yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-manage.get-list')!!}',json).then(res=>{
                        if (res.data.result=='1') {
                            this.currentPage4=res.data.data.list.current_page
                            this.total=res.data.data.list.total;
                            this.page_size = res.data.data.list.per_page;
                            this.tableData=res.data.data.list.data;
                            loading.close();

                        }else{
                            this.$message({
                                type:'error',
                                message:res.data.msg
                            })
                            loading.close();
                        }
                    })
                },
                // 一级分类触发
                handleChange(value) {
                    this.parentid=value[0]
                    this.childid=value[1]
                    console.log(value);
                },
                // 搜索
                searchAll() {
                    this.currentPage4=1;
                    let searchobj = {
                        search: {
                            keyword: this.input, //搜索的关键词
                            status: this.selectedOptions[0], //选择状态
                            min_price: this.input1, //价格区间
                            max_price: this.input2
                        },
                        page:this.currentPage4
                    }
                    var reg = /^[0-9]*$/;
                    // 判断是否数字类型的值
                    if (!reg.test(this.input1) || !reg.test(this.input2)) {
                        this.$message.error('请输入正整数类型的值')
                    } else {
                        this.getData(searchobj)
                    }

                },
                // 改变
                checkXuan(row) {
                    console.log(row);
                },
                // 添加商品
                pushGoods() {
                    var that = this;
                    if(this.search_form.category1_id == ""){
                        this.$message.error('请选择一级分类');
                        return
                    }
                    if(this.search_form.category2_id == ""){
                        this.$message.error('请选择二级分类');
                        return
                    }
                    if(this.search_form.category1_id == ""){
                        this.$message.error('请选择三级分类');
                        return
                    }
                    let goods={
                        goods_ids:this.goods_ids,
                        search_form:this.search_form,
                        middleground_configuration_id:this.post_form.middleground_configuration_id
                    };

                    this.$refs.but1.disabled = 'disabled';
                    this.$http.post('{!!yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-manage.push-goods')!!}',goods).then(res=>{
                        if (res.data.result == '1') {
                            this.$message.success(res.data.msg)
                            this.getData()
                        }else{
                            this.$message.error(res.data.msg)
                        }
                        this.$refs.but1.disabled = '';
                    })
                    console.log('导入商品');
                },
                // 添加商品
                allPushGoods() {
                    //如果选择了 一级分类则必须选择 其他二级分类
                    if(this.search_form.category1_id != ""){
                        if(this.search_form.category2_id == ""){
                            this.$message.error('请选择二级分类');
                            return
                        }
                        if(this.search_form.category1_id == ""){
                            this.$message.error('请选择三级分类');
                            return
                        }
                    }


                    var that = this;
                    that.all_import_disabled = true

                    let goods={
                        search_form:this.search_form,
                        search:{
                            keyword:that.post_form.keyword,
                            status:that.post_form.status,
                            goods_status:that.post_form.goods_status,
                            sell_stock:that.post_form.sell_stock,
                            brand_id:that.post_form.brand_id,
                            min_price:that.post_form.min_price,
                            max_price:that.post_form.max_price,
                            parentid:that.post_form.id_v1,
                            childid:that.post_form.id_v2,
                            thirdid:that.post_form.id_v3,
                            start_time:that.post_form.times[0],
                            end_time:that.post_form.times[1],
                        },
                        middleground_configuration_id:this.post_form.middleground_configuration_id
                    };
                    this.$http.post('{!!yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-manage.all-push-goods')!!}',goods).then(res=>{
                        if (res.data.result == '1') {
                            this.$message.success(res.data.msg)
                            location.reload()
                        }else{
                            this.$message.error(res.data.msg)
                        }
                        this.$refs.but1.disabled = '';
                    })
                    console.log('导入商品');
                },
                updategoods() {
                    let goods={
                        goods_ids:this.goods_ids,
                    };

                    this.$http.post('{!!yzWebFullUrl('plugin.tripartite-provider.admin.tripartiteProviderGoods.update.ajax')!!}',goods).then(res=>{
                        if (res.data.result=='1') {
                            this.$message.success(res.data.msg)
                            this.getData()
                        }else{
                            this.$message.error(res.data.msg)
                        }
                    })
                    console.log('导入商品');
                },
                deletegoods() {
                    let goods={
                        goods_ids:this.goods_ids,
                    };

                    this.$http.post('{!!yzWebFullUrl('plugin.tripartite-provider.admin.tripartiteProviderGoods.delete.ajax')!!}',goods).then(res=>{
                        if (res.data.result=='1') {
                            this.$message.success(res.data.msg)
                            this.getData()
                        }else{
                            this.$message.error(res.data.msg)
                        }
                    })
                    console.log('导入商品');
                },
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    let changeObj = {
                        search: {
                            keyword: this.input, //搜索的关键词
                            status: this.selectedOptions[0], //选择状态
                            min_price: this.input1, //价格区间
                            max_price: this.input2,
                        },
                        page:val
                    };

                    this.getData(val)
                    console.log(`当前页: ${val}`);
                },

                // 勾选数据行的 Checkbox 时触发的事件
                selectchange(selection, row) {
                    console.log(selection, row,'勾选');
                    var ids=[]
                    // 循环遍历得到所有勾选上的id的值
                    selection.map(item=>{
                        ids.push(item.id)
                    })
                    this.goods_ids=ids;
                    console.log(this.goods_ids,'勾选时商品id的集合');

                },
                // 全选 Checkbox 时触发的事件
                selectchangeAll(selection) {
                    var ids=[]
                    selection.map(item=>{
                        ids.push(item.id)
                    })
                    this.goods_ids=ids;
                    console.log(this.goods_ids,'全选时商品id的集合');
                    console.log(selection,'全选');
                },
                // 当选择项发生变化时会触发该事件
                change(selection) {
                    console.log(selection);
                },

                toggleSelection(rows) {
                    if (rows) {
                        rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row,true);
                        });
                    }
                    var ids=[]
                    rows.map(item=>{
                        ids.push(item.id)
                    })
                    this.goods_ids=ids;
                },

            },
        })
    </script>
@endsection