@extends('layouts.base')

@section('content')
@section('title', trans('商品导入'))
<style>
    [v-cloak]{
        display:none;
    }
    .vue-page {
        border-radius: 5px;
        width: calc(100% - 266px);
        float: right;
        margin-right: 10px;
        position: fixed;
        bottom: 0;
        right: 0;
        padding: 6px 5% 6px 20px;
        background: #fff;
        /* height: 60px; */
        z-index: 999;
        margin-top: 0;
        box-shadow: 0 2px 9px rgba(51, 51, 51, 0.1);
    }
    .content{background-color: #eff3f6;}

    .caret-wrapper {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        height: 25px;
        width: 11px;
        vertical-align: middle;
        cursor: pointer;
        overflow: initial;
        position: relative;
    }
    .caret-top{
        border: 5px solid transparent;
        border-bottom-color: #333;
        margin:1px 0;
    }
    .caret-bottom{
        border: 5px solid transparent;
        border-top-color: #333;
        margin:1px 0;
    }


</style>
<style>
    /* .flex{display:flex;width:100%;flex-wrap: wrap;justify-content: space-between; text-align: justify;} */
    .flex{display: grid;grid-template-columns: repeat(auto-fit,240px);grid-column-gap: 20px;min-height: 100vh;margin-bottom: 60px;}
    /* .flex{display:flex;margin:10px;} */
    .box-lis{min-width: 240px;width:240px}
    .box-li{width:240px;border:1px solid #ccc;transition: all .3s;position: relative;overflow:hidden;margin-bottom:20px;height: 354px;}
    .box-li:hover{border-color: #df0f0f;margin-bottom: 0px;height: 374px;}
    .box-li:hover .box-li-detail,.box-li:hover .isshow-item{display:flex;}
    .box-li-img{width:240px;height:240px;position: relative;}
    .box-li-img img{width:238px;height:100%;border:0px solid #333;}
    .box-li-detail{ display: none;width: 100%;font-size: 12px;position: absolute;bottom: 0;line-height:30px;z-index:2;background: #e1564c;color: #fff;font-weight: 600;text-align: center;}
    .box-li-detail .is_selected{flex: 1;}
    .box-li-detail .watch-detail{width: 66.6%;text-align: center;border-right:2px solid #ccc;cursor: pointer;}
    .isshow-item{display: none;text-align: center;font-size:12px;width:100%;}
    .text-vertical{display: -webkit-box;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
    .box-li-title{height:40px;color:#333;font-weight: 500;font-size: 14px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;line-height:20px;-webkit-box-orient: vertical;}
    .box-li-title>span{cursor: pointer;}
    .box-li-price{display:flex;flex-wrap: wrap;color:#333;font-weight: 500;margin:0 8px;}
    .box-li-price-one{width:50%;text-align: center;font-size: 12px;}
    .box-li-sel{position: absolute;top:0;right: 7px;}
    .el-checkbox__inner {border-color:#29ba9b}
    .table-responsive{padding: 6px 15px;}
</style>
<style>
    @font-face {
        font-family: ‘iconfont’; /* Project id 432132 */
        src: url(‘//at.alicdn.com/t/font_432132_078f875xdhok.woff2?t=1636442453208’) format(‘woff2’),
        url(‘//at.alicdn.com/t/font_432132_078f875xdhok.woff?t=1636442453208’) format(‘woff’),
        url(‘//at.alicdn.com/t/font_432132_078f875xdhok.ttf?t=1636442453208’) format(‘truetype’);

    }
    .panel-info{line-height: 40px;margin-bottom:6px;border-radius:8px;padding: 6px;}
    .panel-info-lable{width: 100px;font-size:12px;color: #2d2d2d;white-space:nowrap;}
    .panel-info-content{flex:1;display: flex;flex-wrap: wrap;min-width: 1000px;}
    .panel-info-content>div:nth-child(n+1){margin-right: 20px;height: 40px;}
    .Marketing-item-box{overflow-x: auto;flex-wrap: nowrap;}
    .el-radio-button__inner{height: 40px;width: 120px;}
    .import-class{display: flex;flex-wrap: nowrap;line-height: 32px;}
    .import-class>div{padding:10px;white-space:nowrap;}
    .import-class .el-input{width:160px;}
    .panel-item{display: flex;margin: 6px 0;line-height: 40px;}
    .panel-item .iconfont{margin-right: 6px;font-size: 16px;}
    .tips{color: red;width: 560px;line-height:30px;padding-left:20px;white-space:nowrap;}
</style>
<div class="w1200 ">
    <link rel="stylesheet" type="text/css" href="{{static_url('css/font-awesome.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/goods.css')}}"/>
    <div id="goods-index" class=" rightlist ">
        <div class="right-titpos">
            <ul class="add-snav">
                <li class="active"><a href="#">商品列表</a></li>
{{--                <li class="active"><a href="{{yzWebFullUrl('plugin.jd-supply.admin.label-import.index')}}">标签导入</a></li>--}}
            </ul>
        </div>
        <div class="right-addbox">
            <div id="app" v-cloak>
                <div class="panel panel-info">
                    <div class="panel-item" >
                        <div class="panel-info-lable">
                            <i class="iconfont icon-ht_basis_goodgroup"></i>
                            <span>商品来源</span>
                        </div>
                        <div class="panel-info-content" >
                            <el-select v-model="middleground_configuration_id" clearable placeholder="中台配置项"  @change="changeMiddlegroundConfiguration">
                                <el-option v-for="(item,index) in middleground_configuration"
                                           :key="index"
                                           :label="item.title"
                                           :value="item.id"></el-option>
                            </el-select>
                            <el-radio-group v-model="search_form.source" @change="changeNav">
                                <el-radio-button  v-for="(item,i) in goods_source" :label="item.value" :key="item.value">
                                    <img v-if="item.url" :src='goods_source_url(item.url)'>
                                    <div v-else>[[item.label]]</div>
                                </el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>

                    <div class="panel-item">
                        <div class="panel-info-lable">
                            <i class="iconfont icon-fontclass-fenlei"></i>
                            <span>类目</span>
                        </div>
                        <div class="panel-info-content" style="flex: 1;display:flex;">
                            <el-select v-model="search_form.cate_v1" placeholder="请选择一级分类" clearable remote filterable @change="searchCateV2">
                                <el-option v-for="item in search_cate_v1" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                            <el-select v-model="search_form.cate_v2" placeholder="请选择二级分类" clearable remote filterable @change="searchCateV3">
                                <el-option v-for="item in search_cate_v2" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                            <el-select v-model="search_form.cate_v3" placeholder="请选择三级分类" clearable remote filterable>
                                <el-option v-for="item in search_cate_v3" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </div>
                    </div>

                    <div class="panel-item" style="margin-bottom: 0;">
                        <div class="panel-info-lable">
                            <i class="iconfont icon-ht_left_diymodeladmin"></i>
                            <span>商品属性</span>
                        </div>
                        <div class="panel-info-content">
                            <template>
                                <item text="营销利润率：" :list="gross_profit_rate" unit="%" keys="activity_rate" @change="changeItem" ref="item0"></item>
                                <item text="利润率：" :list="promote_rate" unit="%" keys="origin_rate" @change="changeItem" ref="item1"></item>
                                <item text="协议价：" :list="agreement_price" unit="元" keys="agreement_price" @change="changeItem" ref="item2"></item>
                                <item text="指导价：" :list="guide_price"  unit="元" keys="guide_price" @change="changeItem" ref="item3"></item>
                                <item text="营销价：" :list="guide_price" unit="元" keys="activity_price" @change="changeItem" ref="item4"></item>
                            </template>
                            <div style="margin-bottom: 6px;" >
                                <span>是否包邮：</span>
                                <el-select v-model="search_form.shipping" clearable  placeholder="是否包邮" clearable >
                                    <el-option  v-for="(item,index) in goods_shipping"
                                                :key="index" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div style="margin-bottom: 6px;">
                                <span>是否已导入：</span>
                                <el-select v-model="search_form.goods_import" clearable  placeholder="是否已导入" clearable >
                                    <el-option  v-for="(item,index) in goods_import"
                                                :key="index" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div style="margin-bottom: 6px;">
                                <span>上下架：</span>
                                <el-select v-model="search_form.is_display" clearable  placeholder="上下架" clearable >
                                    <el-option  v-for="(item,index) in is_display"
                                                :key="index" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div style="margin-bottom: 6px;">
                                <span>营销属性：</span>
                                <el-select v-model="search_form.marketing_attributes" clearable  placeholder="营销属性" clearable >
                                    <el-option  v-for="(item,index) in marketing_attributes_array"
                                                :key="index" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
{{--                    <div class="panel-item" style="margin-top: 0;">--}}
{{--                        <div class="panel-info-lable">--}}
{{--                            <i class="iconfont icon-ht_marketing_article"></i>--}}
{{--                            <span>营销活动</span>--}}
{{--                        </div>--}}
{{--                        <div class="panel-info-content Marketing-item-box">--}}
{{--                            <template v-for="(item,i) in goods_group">--}}
{{--                                <el-button :type="item.id==search_form.goods_group?'primary':''"--}}
{{--                                           @click="changeMarketing(item.id)">--}}
{{--                                    [[item.name]]--}}
{{--                                </el-button>--}}
{{--                            </template>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                    <div class="panel-item">
                        <div class="panel-info-lable">
                            <i class="iconfont icon-ht_basis_searchframe"></i>
                            <span>关键词</span>
                        </div>
                        <div class="panel-info-content">
                            <el-input v-model="search_form.title" placeholder="商品名称" style="width: 200px;"></el-input>
                            <el-input v-model="search_form.supplier_name" placeholder="店铺名称" style="width: 200px;"></el-input>
                            <el-input v-model="search_form.supplier_id" placeholder="店铺ID" style="width: 200px;"></el-input>
                            <div>
                                <el-button style="width: 100px;" @click="Reset">重置</el-button>
                                <el-button icon="el-icon-search" type="primary" style="width: 100px;" @click="search()">搜索</el-button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default" style="border-radius:8px">
                    <div class=" table-responsive">
                        <div v-loading="loading">
                            <div>
                                <el-checkbox v-model.number="is_all_choose" :true-label="1" :false-label="0" @change="allChoose">[[is_all_choose==1?'全不选':'全选']]</el-checkbox>
                                <div style="display:inline-block;margin:0 10px;cursor: pointer;" :style="{color:search_form.goods_type=='created_at'?'#29BA9C':'#333'}" @click="changeOrderBy('created_at')">
                                    <span style="font-weight:500">最新上架</span>
                                    <span class="caret-wrapper">
                                        <i class="el-icon-bottom" style="line-height: 25px;font-weight:700"></i>
                                    </span>
                                </div>
{{--                                <div style="display:inline-block;margin:0 10px;cursor: pointer;" :style="{color:search_form.goods_type=='real_month_sale'?'#29BA9C':'#333'}" @click="changeOrderBy('real_month_sale')">--}}
{{--                                    <span style="font-weight:500">本月销量</span>--}}
{{--                                    <span class="caret-wrapper">--}}
{{--                                        <i class="el-icon-bottom" style="line-height: 25px;font-weight:700"></i>--}}
{{--                                    </span>--}}
{{--                                </div>--}}
                                <div style="display:inline-block;margin:0 10px;cursor: pointer;" :style="{color:(search_form.goods_type=='agreement_price')?'#29BA9C':'#333'}" @click="changeOrderBy('agreement_price')">
                                    <span style="font-weight:500">协议价</span>
                                    <span class="caret-wrapper">
                                        <i class="caret-top" :style="{borderBottomColor:search_form.agreement_price_sort=='asc'?'#29BA9C':'#333'}"></i>
                                        <i class="caret-bottom" :style="{borderTopColor:search_form.agreement_price_sort=='desc'?'#29BA9C':'#333'}"></i>
                                    </span>
                                </div>
                                <div style="display:inline-block;margin:0 10px;cursor: pointer;" :style="{color:(search_form.goods_type=='guide_price')?'#29BA9C':'#333'}" @click="changeOrderBy('guide_price')">
                                    <span style="font-weight:500">指导价</span>
                                    <span class="caret-wrapper">
                                          <i class="caret-top" :style="{borderBottomColor:search_form.guide_price_sort=='asc'?'#29BA9C':'#333'}"></i>
                                        <i class="caret-bottom" :style="{borderTopColor:search_form.guide_price_sort=='desc'?'#29BA9C':'#333'}"></i>

                                    </span>
                                </div>
                                <div style="display:inline-block;margin:0 10px;cursor: pointer;" :style="{color:(search_form.goods_type=='activity_price')?'#29BA9C':'#333'}" @click="changeOrderBy('activity_price')">
                                    <span style="color:#333;font-weight:500">营销价</span>
                                    <span class="caret-wrapper">
                                        <i class="caret-top" :style="{borderBottomColor:search_form.activity_price_sort=='asc'?'#29BA9C':'#333'}"></i>
                                        <i class="caret-bottom" :style="{borderTopColor:search_form.activity_price_sort=='desc'?'#29BA9C':'#333'}"></i>

                                    </span>
                                </div>
                                <div style="display:inline-block;margin:0 10px;cursor: pointer;" :style="{color:(search_form.goods_type=='origin_rate')?'#29BA9C':'#333'}" @click="changeOrderBy('origin_rate')">
                                    <span style="color:#333;font-weight:500">常规利润率</span>
                                    <span class="caret-wrapper">
                                        <i class="caret-top" :style="{borderBottomColor:search_form.origin_rate_sort=='asc'?'#29BA9C':'#333'}"></i>
                                        <i class="caret-bottom" :style="{borderTopColor:search_form.origin_rate_sort=='desc'?'#29BA9C':'#333'}"></i>

                                    </span>
                                </div>
                                <div style="display:inline-block;margin:0 10px;cursor: pointer;" :style="{color:(search_form.goods_type=='activity_rate')?'#29BA9C':'#333'}" @click="changeOrderBy('activity_rate')">
                                    <span style="color:#333;font-weight:500">营销利润率</span>
                                    <span class="caret-wrapper">
                                        <i class="caret-top" :style="{borderBottomColor:search_form.activity_rate_sort=='asc'?'#29BA9C':'#333'}"></i>
                                        <i class="caret-bottom" :style="{borderTopColor:search_form.activity_rate_sort=='desc'?'#29BA9C':'#333'}"></i>

                                    </span>
                                </div>

                            </div>
                            <div class="flex">
                                <div class="box-lis" v-for="(item,index) in list" :key="index">
                                    <div class="box-li" >
                                        <div class="box-li-img">
                                            <img :src="item.image_url" :alt="item.title" :title="item.title">
                                            <div class="box-li-detail">
                                                <div @click="watchDetail(item)" class="watch-detail">查看详情</div>
                                                <div class="is_selected">
                                                    <template v-if="item.is_presence">已导入</template>
                                                    <el-checkbox v-else v-model.number="item.is_choose" :true-label="1" :false-label="0" @change="oneChange(item)"></el-checkbox>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="box-li-title" style="margin:5px;">
                                            <span @click="watchDetail(item)">[[item.title]]</span>
                                        </div>
                                        <div class="box-li-price">
                                            <div class="box-li-price-one">
                                                <div>协议价</div>
                                                <div style="color:#FF0000">￥[[item.agreement_price || '--']]</div>
                                            </div>
                                            <div class="box-li-price-one">
                                                <div>利润率</div>
                                                <div style="color:#FF0000">[[item.origin_rate || '--']]%</div>
                                            </div>
                                            <div class="isshow-item">
                                                <div  style="min-width: 25%;">
                                                    <div>指导价</div>
                                                    <div class="text-vertical" style="color:#FF0000">[[item.guide_price ||'--']]</div>
                                                </div>
                                                <div  style="min-width: 25%;">
                                                    <div>销售价</div>
                                                    <div class="text-vertical" style="color:#FF0000">[[item.sale_price ||'--']]</div>
                                                </div>
                                                <div style="min-width: 25%;">
                                                    <div>营销利润率</div>
                                                    <div class="text-vertical" style="color:#FF0000">[[item.activity_rate ||'--']]%</div>
                                                </div>
                                                <div style="flex:1;">
                                                    <div>营销价</div>
                                                    <div class="text-vertical" style="color:#FF0000">[[item.activity_price ||'--']]</div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                            <div class="vue-page">
                                <div style="display:flex;">
                                    <div v-if="create_category == 1" class="tips">
                                        已开启自动匹配分类，如不选择导入分类则自动匹配或创建分类！（阿里商品不支持）
                                    </div>
                                    <div class="tips" v-if="show_tech_fee == 1">
                                        中台技术服务费比例：[[sever_ratio/100]]%
                                    </div>
                                    <div style="text-align: right;flex:1;">
                                        <el-pagination layout="sizes,prev, pager, next,jumper" @current-change="search"  :total="total_page"
                                                       :page-size="per_size" :current-page="current_page" background :page-sizes="goods_page_size"
                                                       @size-change="handleSizeChange"  v-loading="loading">
                                        </el-pagination>
{{--                                        <el-pagination layout="sizes,prev, pager, next,jumper" @current-change="search" v-if="total/per_size <50" :total="total"--}}
{{--                                                       :page-size="per_size" :current-page="current_page" background :page-sizes="goods_page_size"--}}
{{--                                                       @size-change="handleSizeChange" v-loading="loading">--}}
{{--                                        </el-pagination>--}}
                                    </div>
                                </div>
                                <div class="import-class" style="flex-wrap: wrap;!important;" >
                                    <div>选择导入分类</div>
                                    <el-select size="small" v-model="category_form.id_v1" placeholder="请选择一级分类" clearable @change="changeV1()">
                                        <el-option v-for="item in category_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                    <el-select size="small" v-model="category_form.id_v2" placeholder="请选择二级分类" clearable @change="changeV2()">
                                        <el-option v-for="item in category_list_v2" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                    <el-select size="small" v-model="category_form.id_v3" placeholder="请选择三级分类" clearable v-if="category_level == 3">
                                        <el-option v-for="item in category_list_v3" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                    <div>选择导入商品标签</div>
                                    <el-select size="small" v-model="category_form.fid_v1" placeholder="请选择标签组" clearable @change="filteringV1()">
                                        <el-option v-for="item in filtering_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                    <el-select size="small" v-model="category_form.fid_v2" placeholder="请选择标签值" clearable >
                                        <el-option v-for="item in filtering_list_v2" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>

                                    <div>
                                        <el-button size="small" type="primary" @click="confirm" :disabled="is_import_disabled">导入商品[[changeTotal==0?"":"（"+changeTotal+"）"]]</el-button>
                                        <el-button size="small" type="primary" @click="show_all_import" :disabled="is_import_disabled">导入全部筛选商品（[[total>=2000?total_str:total]]）</el-button>
{{--                                        <el-button size="small" type="primary" @click="bulk_order">批量下单(商)</el-button>--}}
                                        <el-button size="small" type="primary" @click="bulk_order_yz">批量下单(中)</el-button>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class='panel-footer'>

                    </div>
                </div>
                <el-dialog :visible.sync="all_import_show" width="750px"  title="导入全部商品">

                    <el-col v-if="all_import.import_status == 0" style="color: red">共计商品数为[[total_str]]个，因条件限制该操作只能导入前2000款商品</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="all_import_show = false">取 消</el-button>
                <el-button type="primary" :disabled="all_import_disabled" @click="all_confirm">确认导入</el-button>
            </span>
                </el-dialog>

            </div>
        </div>
    </div>
</div>
</div>

<script>
    let item = {
        props:["text","list","unit","keys"],
        delimiters: ['[[', ']]'],
        template:`<div style="margin-bottom: 6px;display:flex;">
                    <span>[[text]]</span>
                    <template v-if="value!='自定义区间'">
                        <el-select v-model="value" placeholder="请选择" @change="change">
                            <el-option v-for="(item,i) in list" :label="item" :value="item" :key="i"> </el-option>
                        </el-select>
                    </template>
                    <template v-else>
                    <el-input  type="number" placeholder="区间开始" v-model="search.from" style="width: 170px;" @blur="blur">
                    </el-input>
                    <div class="line" style="border:0;font-size:25px;">-</div>
                    <el-input type="number" placeholder="区间结束" v-model="search.to" style="width: 190px;" @blur="blur">
                        <el-button slot="append">[[unit]]</el-button>
                    </el-input>
                    </template>
                </div>`,
        data(){
            return {
                value:"",
                search:{from:null,to:null}
            }
        },
        methods:{

            change(){
                if (this.value=="全部") return this.$emit("change",{key:this.keys,isdel:true});
                if (this.value=="自定义区间") return;
                let val = this.value.split("-");
                val[1] = val[1]?parseInt(val[1]):99999;
                this.$emit("change",{search:{from:parseInt(val[0]),to:val[1]},key:this.keys});
            },
            blur(){
                let search = {};
                search.from = this.search.from ? parseInt(this.search.from):0,
                    search.to = this.search.to ? parseInt(this.search.to):99999,
                    this.$emit("change",{search,key:this.keys});
            },
            Reset(){
                this.value = "",
                    this.search={from:"",to:""};
            }
        }
    }
    var app = new Vue({
        el:"#app",
        delimiters: ['[[', ']]'],
        components:{item},
        directives: {
            'el-select-loadmore': {
                bind(el, binding) {
                    // 获取element-ui定义好的scroll盒子
                    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
                    SELECTWRAP_DOM.addEventListener('scroll', function () {
                        /**
                         * scrollHeight 获取元素内容高度(只读)
                         * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                         * clientHeight 读取元素的可见高度(只读)
                         * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                         * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                         */
                        const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
                        if (condition) {
                            binding.value();
                        }
                    });
                }
            }
        },
        data() {
            let category_level = {!! $category_level !!};
            let create_category = {!! $create_category !!};
            let filtering_list = {!! $filtering_list?:'{}' !!};
            let category_list = {!! $category_list?:'{}' !!};
            let search_cate_v1 = '{}';
            let all_import = {!! $import?:'{}' !!};
            let topic_id = {!! $topic_id !!};
            return{
                show_tech_fee:0,//是否显示技术服务费
                middleground_configuration:{},//中台配置数组
                middleground_configuration_id:0,
                changeTotal:0,
                is_all_choose:0,
                loading:false,
                all_loading:false,
                page_number: 20, //每页显示条数
                all_import_show:false,
                list: [],
                all_import: all_import,
                sever_ratio:0,//中台技术服务费
                search_form: {
                    is_display:1,
                    goods_source:"",
                    cate_v1:'',
                    cate_v2:'',
                    cate_v3:'',
                    source:'all',
                    commission_agent:'all',
                    goods_import:"",
                    topic_id : topic_id,
                },
                is_display:[
                    {
                        value: 1,
                        label: '上架',
                    },
                    {
                        value: 2,
                        label: '下架',
                    }
                ],
                marketing_attributes_array:[
                    {
                        value: '',
                        label: '默认',
                    },
                    {
                        value: 'is_new',
                        label: '新品',
                    },
                    // {
                    //     value: 'is_recommend',
                    //     label: '推荐',
                    // },
                    {
                        value: 'is_hot',
                        label: '热卖',
                    },
                    {
                        value: 'is_promotion',
                        label: '促销',
                    },
                ],
                category_page: {
                    pageIndex: 1,
                    pageSize: 20,
                },
                category_form:{
                    id_v1:"",
                    id_v2:"",
                    id_v3:"",
                    fid_v1:"",
                    fid_v2:"",
                },
                //默认的来源
                default_goods_source: [
                    {value: "all",label: '全部',},
                    {value: "zt",label: '中台自营'}
                ],
                //显示使用的来源
                goods_source: [
                    {value: "all",label: '全部',},
                    {value: "zt",label: '中台自营'}
                ],
                gross_profit_rate:["全部","0-35%","35%-50%","50%-75%","75%及以上"],//毛利率
                promote_rate:["全部","0-50%","50%-150%","150%-300%","300%及以上","自定义区间"],//利润率
                discount:["全部","0-3折","3-5折","5-8折","8折及以上","自定义区间"],//折扣
                agreement_price:["全部","0-200元","200-500元","500-1000元","1000元以上","自定义区间"],//协议价
                guide_price:["全部","0-200元","200-500元","500-1000元","1000元以上"],//指导价、营销价
                goods_shipping:[{
                    value: '',
                    label: '全部',
                }, {
                    value: '2',
                    label: '不包邮'
                }, {
                    value: '1',
                    label: '包邮'
                }],
                goods_page_size:[20,50],
                goods_import:[{
                    value: '',
                    label: '全部'
                }, {
                    value: '1',
                    label: '未导入'
                }, {
                    value: '2',
                    label: '已导入'
                }],
                goods_agent:[
                    {
                        value: 'all',
                        label: '全部',
                    },
                    {
                        value: 'zt', //中台传0
                        label: '中台',
                    }
                ],
                is_import_disabled : false,
                all_import_disabled:false,
                filtering_list:filtering_list, //商品标签
                filtering_list_v2:[], //商品标签
                category_level:category_level,//分类等级
                create_category:create_category,//分类等级
                category_list:category_list,
                category_list_v2:[],
                category_list_v3:[],
                selectionGoodsIds: [],
                // goods_group: group_list,
                // app_goods_group: app_group_list,
                search_cate_v1: search_cate_v1,
                search_cate_v2: [],
                search_cate_v3: [],

                //分页
                total_str:0,//显示的商品总数 会出现总数后面多个+号的情况
                total: 0, //全部商品数量
                total_page:0,//分页限制最多100页
                per_size: 0,
                current_page: 0,

            }

        },
        created() {
            this.getMiddlegroundConfiguration();
            // this.getGoodsList({search:{topic_id:this.search_form.topic_id}});
            this.changeSource();
        },
        methods: {
            //批量下单
            bulk_order(){
                window.open("{!! yzWebUrl('plugin.yz-supply.admin.bulk-order.index') !!}" + "&middleground_configuration_id="+this.middleground_configuration_id);
            },
            bulk_order_yz(){
                window.open("{!! yzWebUrl('plugin.yz-supply.admin.bulk-order.yz-index') !!}" + "&middleground_configuration_id="+this.middleground_configuration_id);
            },
            changeMiddlegroundConfiguration(){
                let loading = this.$loading({
                    lock: true,
                    text:"数据加载中",
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.selectionGoodsIds = [];
                //配置改变时默认使用全部
                this.search_form.source = this.default_goods_source[0].value;
                this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.goods-import.get-supply-source') !!}',{middleground_configuration_id:this.middleground_configuration_id}).then(function (response) {
                    if (response.data.result) {
                        console.log(response.data.data);
                        this.goods_source = response.data.data;
                        // this.middleground_configuration = response.data.data;
                        // this.middleground_configuration_id = this.middleground_configuration[0].id;
                        this.search();
                        this.changeSource();
                    } else {
                        this.list = [];
                        this.current_page = 1;
                        this.total = 0;
                        this.all_loading = false;
                        loading.close();
                        this.$message({message: response.data.msg, type: 'error'});
                    }
                }, function (response) {
                    this.list = [];
                    this.current_page = 1;
                    this.total = 0;
                    this.all_loading = false;
                    loading.close();
                    this.$message({message: response.data.msg, type: 'error'});
                })

            },
            //营销活动切换
            changeMarketing(id){
                this.$set(this.search_form,'goods_group',id);
                this.getGoodsList({search:this.search_form});
            },
            //每页多少条数据
            handleSizeChange(page_number){
                this.is_all_choose = 0;
                this.changeTotal = 0;
                this.page_number = page_number;
                this.search();
            },
            Reset(){
                //重置
                this.search_form = {
                    is_display:1,
                    commission_agent:'all',
                    source:"all",
                };
                for (let i = 0; i < 5; i++) {
                    this.$refs["item"+i].Reset();
                };
            },
            changeItem(obj){
                // if (obj.isdel) delete this.search_form[obj.key];
                this.search_form[obj.key] = obj.search;
            },
            //图片地址
            goods_source_url(url){
                url = `{{resource_get('plugins/yz-supply/assent/image/${url}.png')}}`
                return url
            },
            //查看详情
            watchDetail(item){
                window.open("{!! yzWebUrl('plugin.yz-supply.admin.goods-import.detail') !!}" + "&middleground_configuration_id="+this.middleground_configuration_id+"&id=" + item.id);
            },
            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.middleground_configuration_id = this.middleground_configuration[0].id;
                        this.changeMiddlegroundConfiguration();
                        // this.getGoodsList({search: {topic_id: this.search_form.topic_id}});
                        // this.changeSource();
                    } else {
                        this.$message({message: response.data.msg, type: 'error'});
                    }
                }, function (response) {
                    this.$message({message: response.data.msg, type: 'error'});
                })
            },
            // 获得商品列表
            getGoodsList(json={}) {
                json.search.goods_page_size = this.page_number;
                json['middleground_configuration_id'] = this.middleground_configuration_id;
                let loading = this.$loading({
                    lock: true,
                    text:"数据加载中",
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.all_loading = true;
                this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.goods-import.goods-pagination') !!}",json).then(response => {

                    if(response.data.result==1){
                        this.list = response.data.data.data;
                        this.list.forEach((item,index) => {
                            item.is_choose = 0;
                            // this.list[index].is_choose = 0;
                        })
                        this.synIsAllchoose();
                        this.current_page = response.data.data.current_page;
                        this.per_size = response.data.data.per_page;
                        this.total = response.data.data.total;
                        this.total_page = response.data.data.total_page;
                        this.total_str = response.data.data.total_str;

                        this.sever_ratio = response.data.data.sever_ratio;
                        this.show_tech_fee = response.data.data.show_tech_fee; //是否显示技术服务费 1是 其他否
                        this.all_loading = false;
                    } else{
                        this.list = [];
                        this.current_page = 1;
                        this.total = 0;
                        this.$message.error(response.data.msg);
                        this.all_loading = false;
                    }
                    loading.close();
                }),(res)=>{
                    loading.close();
                    this.all_loading = false;
                };
            },

            show_all_import()
            {
                if (this.all_import.import_status == 1) {
                    this.all_import_disabled = true
                }
                this.all_import_show = true;
            },

            search(page) {
                this.getGoodsList({page:page,search:this.search_form});
            },

            // 上一页
            prev() {
                let page = parseInt(this.current_page) - 1;
                if (page < 1) {
                    return false;
                }

                this.getGoodsList({page:page,search:this.search_form});
            },
            //下一页
            next() {
                let page =  parseInt(this.current_page) + 1;
                if (this.per_size < this.page_number) {
                    return false;
                }

                this.getGoodsList({page:page,search:this.search_form});
            },
            //跳页
            jumpPage() {
                if (this.current_page <= 1) {
                    this.current_page = 1;
                }

                this.getGoodsList({page:this.current_page,search:this.search_form});
            },

            //选择商品
            handleSelectionChange(val) {
                var arr = [];
                for(var j = 0,len = val.length; j < len; j++){
                    arr.push(val[j].id);
                }
                this.selectionGoodsIds = arr;
            },

            // 一级分类改变
            changeV1() {
                this.category_form.id_v2 = "";
                this.category_form.id_v3 = "";
                this.category_list_v2 = [];
                this.category_list_v3 = [];
                this.category_list.find(item => {
                    if (item.id == this.category_form.id_v1) {
                        this.category_list_v2 = item.childrens;
                    }
                });
            },
            // 二级分类改变
            changeV2() {
                this.category_form.id_v3 = "";
                this.category_list_v3 = [];
                if (this.category_level == 3) {
                    this.category_list_v2.find(item => {
                        if (item.id == this.category_form.id_v2) {
                            this.category_list_v3 = item.childrens;
                        }
                    })
                }
            },
            // 一级分类改变
            searchCateV2() {
                this.search_form.cate_v2 = "";
                this.search_form.cate_v3 = "";
                this.search_cate_v2 = [];
                this.search_cate_v3 = [];
                //搜索二级分类
                var source = this.search_form.source;
                var parent_id = this.search_form.cate_v1;
                // 这里是接口请求数据, 带分页条件
                this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.goods-import.getChildrenCategory') !!}', {
                    'source': source,
                    'parent_id': parent_id,
                    'middleground_configuration_id':this.middleground_configuration_id
                }).then(response => {
                    if (response.data.result == 1) {
                        this.search_cate_v2 = response.data.data;
                    }
                }), function (res) {

                };
            },
            // 二级分类改变
            searchCateV3() {
                this.search_form.cate_v3 = "";
                this.search_cate_v3 = [];
                //搜索三级分类
                var source = this.search_form.source;
                var parent_id = this.search_form.cate_v2;
                // 这里是接口请求数据, 带分页条件
                this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.goods-import.getChildrenCategory') !!}', {
                    'source': source,
                    'parent_id': parent_id,
                    'middleground_configuration_id':this.middleground_configuration_id
                }).then(response => {

                    if (response.data.result == 1) {
                        this.search_cate_v3 = response.data.data;
                    }
                }), function (res) {

                };
            },
            changeSource() {
                var that = this;
                that.search_form.cate_v1 = "";
                that.search_form.cate_v2 = "";
                that.search_form.cate_v3 = "";
                that.search_cate_v1 = [];
                that.search_cate_v2 = [];
                that.search_cate_v3 = [];
                // var source = that.search_form.source;
                // 'source':source
                that.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.goods-import.getChildrenCategory') !!}', {middleground_configuration_id:this.middleground_configuration_id}).then(response => {

                    if (response.data.result == 1) {

                        that.search_cate_v1 = response.data.data;
                    }
                }), function (res) {

                };
            },
            changeWarehouse() {
                if (this.search_form.commission_agent == 0) {
                    this.search_form.goods_source = "";
                    this.goods_source = [
                        {value: '',label: '全部'},
                        {value: 0,label: '未分组'}
                    ];
                    this.app_goods_group.forEach(item => {
                        this.goods_source.push({
                            value:item.id,
                            label:item.name
                        });
                    });
                } else this.goods_source = goods_source;

                console.log(this.goods_source);
            },
            changeNav(){
                this.getGoodsList({search:this.search_form});
                // this.changeSource();
            },

            // 一级标签改变
            filteringV1(){
                this.category_form.fid_v2 = "";
                this. filtering_list_v2 = [];
                this.filtering_list.find(item => {
                    if(item.id == this.category_form.fid_v1) {
                        this.filtering_list_v2 = item.value;
                    }
                });
            },

            //导入商品
            confirm(){
                var that = this;

                var arr = {
                    'parentid': [],
                    'childid':[],
                    'thirdid':[],
                };

                if(this.category_form.fid_v1){
                    if (!this.category_form.fid_v2) {
                        this.$message.error("商品标签值不能为空");
                        return false;
                    }
                }
                let loading = this.$loading({
                    lock: true,
                    text:`正在导入${this.changeTotal}个商品中`,
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                arr.parentid.push(this.category_form.id_v1);

                arr.childid.push(this.category_form.id_v2);

                if(this.category_form.id_v3){
                    arr.thirdid.push(this.category_form.id_v3);
                }

                // let json = {category:arr,goods_ids:this.selectionGoodsIds,f_value_id:this.category_form.fid_v2,commission_agent:this.search_form.commission_agent};
                let json = {
                    category:arr,
                    goods_ids:[],
                    f_value_id:this.category_form.fid_v2,
                    commission_agent:this.search_form.commission_agent,
                    middleground_configuration_id:this.middleground_configuration_id,
                    goods_ids:this.selectionGoodsIds
                };
                // console.log(json)
                // return false;
                // this.list.forEach(item => {
                //     if(item.is_choose) json.goods_ids.push(item.id);
                // })
                that.is_import_disabled = true;
                that.all_loading = true;
                that.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.goods-import.select') !!}",json).then(response => {
                    this.selectionGoodsIds = [];
                    // that.is_import_disabled = true;
                    that.all_loading = false;
                    if(response.data.result==1) {
                        that.$message.success(response.data.msg);
                        that.is_import_disabled = false;
                        this.getGoodsList({page:this.current_page,search:this.search_form});
                        this.changeTotal = 0;
                    } else{
                        that.$message.error(response.data.msg);
                        that.is_import_disabled = false;
                    }
                    loading.close();
                }),function(res){
                    console.log(res);
                    loading.close();
                    that.is_import_disabled = true;
                    that.all_loading = false;
                };
            },
            all_confirm()
            {
                var that = this;

                var arr = {
                    'parentid': [],
                    'childid':[],
                    'thirdid':[],
                };
                if(this.category_form.fid_v1){
                    if (!this.category_form.fid_v2) {
                        this.$message.error("商品标签值不能为空");
                        return false;
                    }
                }
                // let loading = this.$loading({
                //     lock: true,
                //     text:`正在导入${this.changeTotal}个商品中`,
                //     spinner: 'el-icon-loading',
                //     background: 'rgba(0, 0, 0, 0.7)'
                // });
                arr.parentid.push(this.category_form.id_v1);
                arr.childid.push(this.category_form.id_v2);
                if(this.category_form.id_v3){
                    arr.thirdid.push(this.category_form.id_v3);
                }
                let json = {
                    category:arr,
                    f_value_id:this.category_form.fid_v2,
                    search:this.search_form,
                    middleground_configuration_id:this.middleground_configuration_id
                };
                // that.is_import_disabled = true;
                that.all_loading = true;
                // this.all_import_disabled = true
                that.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.goods-import.all-select') !!}",json).then(response => {
                    this.selectionGoodsIds = [];
                    that.is_import_disabled = true;
                    that.all_loading = false;
                    if(response.data.result==1) {
                        that.$message.success(response.data.msg);
                        location.reload()
                    } else{
                        that.$message.error(response.data.msg);
                    }
                }),function(res){
                    that.is_import_disabled = true;
                    that.all_loading = false;
                };
            },
            /**
             * 是否默认全选
             * @param item item
             */
            synIsAllchoose(){
                is_all = 3;
                this.list.some((item,index) => {
                    if(this.selectionGoodsIds.indexOf(item.id) != -1){
                        this.list[index].is_choose = 1;
                        if(is_all != 0) is_all = 1;
                    }else{
                        is_all = 0;
                    }
                })
                this.is_all_choose = is_all;
                this.changeTotal = this.selectionGoodsIds.length;
            },
            /**
             * 添加/删除GOOGids中的值
             * @param item item
             */
            changeGoodsIds(){
                this.list.some((item,index) => {
                    if(item.is_choose == 1 && this.selectionGoodsIds.indexOf(item.id) == -1) {
                        this.selectionGoodsIds[this.selectionGoodsIds.length] = item.id;
                    }
                    else if(item.is_choose != 1 && this.selectionGoodsIds.indexOf(item.id) != -1){
                        this.selectionGoodsIds.splice(this.selectionGoodsIds.indexOf(item.id));
                    }
                })
                this.changeTotal = this.selectionGoodsIds.length;
            },
            oneChange(item) {
                this.changeGoodsIds(item);
                let that = this;
                this.$forceUpdate();
                let is_all = 0;
                // this.changeTotal = item.is_choose == 1?this.changeTotal+1:this.changeTotal-1;
                that.list.some((item,index) => {
                    if(item.is_choose == 1) {
                        is_all = 1;
                    }
                    else {
                        is_all = 0;
                        return true;
                    }
                })
                that.is_all_choose = is_all;
            },
            // 全选
            allChoose() {
                let total = 0;
                let status = this.is_all_choose == 1?1:0;
                this.list.forEach((item,index) => {
                    if (item.is_presence!=1){
                        total+=1;
                    }
                    this.changeGoodsIds(item);
                    item.is_choose = status;
                })
                this.changeGoodsIds(item);
                // this.changeTotal = status? total: 0;
            },
            changeOrderBy(type) {
                var sort = type + '_sort';
                var current_sort = this.search_form['goods_type'] + '_sort';
                this.search_form[current_sort] = '';
                if (type == this.search_form['goods_type']) {
                    if (this.search_form['goods_sort'] == 'asc') {
                        this.search_form[sort] = 'desc';
                    } else  {
                        this.search_form[sort] = 'asc';
                    }
                } else  {
                    this.search_form[sort] = 'desc';
                }
                this.search_form['goods_sort'] = this.search_form[sort];
                this.search_form['goods_type'] = type;
                if (type == 'created_time' || type == 'real_month_sale') {
                    this.search_form['goods_sort'] = 'desc';
                }
                this.$forceUpdate();
                this.getGoodsList({page:1,search:this.search_form});
            },
        },
    })

</script>
@endsection('content')