@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.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()">
                                        <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()">
                                        <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">
                                        <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.jd-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.cate_v1" placeholder="请选择一级分类" clearable
                                           @change="changeV1()">
                                    <el-option v-for="item in category_list" :key="item.id" :label="item.label"
                                               :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="search_form.cate_v2" placeholder="请选择二级分类" clearable
                                           @change="changeV2()">
                                    <el-option v-for="item in category_list_v2" :key="item.id"
                                               :label="item.label" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="search_form.cate_v3" placeholder="请选择三级分类" clearable>
                                    <el-option v-for="item in category_list_v3" :key="item.id"
                                               :label="item.label" :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.dispatch" placeholder="运费模板" clearable>
                                    <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-select v-model="search_form.stags" placeholder="请选择服务标签" clearable>
                                    <el-option v-for="item in stags" :key="item.id"
                                               :label="item.tags" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-select v-model="search_form.delay_compensate" placeholder="发货延期" clearable>
                                    <el-option v-for="item in delay_compensate" :key="item.id"
                                               :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="" prop="goods_des">
                                <el-input v-model="search_form.goods_des" placeholder="请输入关键词,英文逗号连接 最多5个"></el-input>
                            </el-form-item>
                            <el-form-item label="" prop="producing_area">
                                <el-input v-model="search_form.producing_area" placeholder="请输入产地"></el-input>
                            </el-form-item>
                            <el-form-item label="" prop="deliver_area">
                                <el-input v-model="search_form.deliver_area" placeholder="请输入发货地"></el-input>
                            </el-form-item>
                            {{--<el-form-item>--}}
                                {{--<el-input class="ml-10" clearable v-model="search_form.wlPrice"  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>                        <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,
                    search_form: {
                        cate_v1: '',
                        cate_v2: '',
                        cate_v3: '',
                        stags:'',
                        delay_compensate:'',
                        goods_des:'',
                        deliver_area:'',
                    },
                    post_form: {
                        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天'
                    }],
                    delay_compensate:[{
                        value: 24,
                        label: '24小时'
                    }, {
                        value: 48,
                        label: '48小时'
                    }, {
                        value: 72,
                        label: '72小时'
                    },{
                        value: 0,
                        label: '0小时'
                    },],
                    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
                    stags:[],//服务标签列表
                }
            },
            created () {
                this.getData(1);
                this.getCategory();
                this.getStags();
            },
            methods: {
                // 获取第三方分类、本地分类、品牌
                getCategory() {
                    this.$http.post('{!!yzWebFullUrl('plugin.jd-supply.admin.cloud-manage.get-third-category')!!}').then(res => {
                        if (res.data.result == '1') {
                            this.category_list_all = res.data.data.third_category;
                            this.category_list = res.data.data.third_category;
                            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
                            })
                        }
                    })
                },
                //获取服务标签列表
                getStags() {
                    this.$http.post('{!!yzWebFullUrl('plugin.jd-supply.admin.cloud-manage.get-stags-list')!!}').then(res => {
                        if (res.data.result == '1') {
                            this.stags = res.data.data;
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.data.msg
                            })
                        }
                    })
                },
                changeModel() {

                },

                // 一级分类改变
                changeV1() {
                    this.search_form.cate_v2 = "";
                    this.search_form.cate_v3 = "";
                    this.category_list_v2 = [];
                    this.category_list_v3 = [];
                    this.category_list.find(item => {
                        if (item.id == this.search_form.cate_v1) {
                            this.category_list_v2 = item.children;
                        }
                    });
                },
                // 二级分类改变
                changeV2() {
                    this.search_form.cate_v3 = "";
                    this.category_list_v3 = [];
                    this.category_list_v2.find(item => {
                        if (item.id == this.search_form.cate_v2) {
                            this.category_list_v3 = item.children;
                        }
                    })
                },

                // 一级分类改变
                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.all_import.import_status == 1) {
                        this.all_import_disabled = true
                    }
                    this.import_show = true;
                },
                // 获取数据
                getData(page){
                    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],
                        },

                    };
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!!yzWebFullUrl('plugin.jd-supply.admin.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;
                    let goods={
                        goods_ids:this.goods_ids,
                        search_form:this.search_form,
                    };
                    this.$refs.but1.disabled = 'disabled';
                    this.$http.post('{!!yzWebFullUrl('plugin.jd-supply.admin.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() {
                    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],
                        }
                    };
                    //this.$refs.but1.disabled = 'disabled';
                    this.$http.post('{!!yzWebFullUrl('plugin.jd-supply.admin.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