@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;}
.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" style="flex-wrap: nowrap;">
                            <el-select v-model="search_form.commission_agent" clearable  placeholder="请选择商品库" @change="changeWarehouse" clearable>
                                <el-option v-for="(item,i) in goods_agent" :key="i" :label="item.label" :value="item.value"></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 @change="searchCateV2">
                                <el-option v-for="item in search_cate_v1" :key="item.id" :label="item.title" :value="item.id"></el-option>
                            </el-select>
                            <el-select v-model="search_form.cate_v2" placeholder="请选择二级分类" clearable @change="searchCateV3">
                                <el-option v-for="item in search_cate_v2" :key="item.id" :label="item.title" :value="item.id"></el-option>
                            </el-select>
                            <el-select v-model="search_form.cate_v3" placeholder="请选择三级分类" clearable>
                                <el-option v-for="item in search_cate_v3" :key="item.id" :label="item.title" :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="gross_profit_rate" @change="changeItem" ref="item0"></item>
                                <item text="利润率：" :list="promote_rate" unit="%" keys="promote_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>
                                <item text="折扣：" :list="discount" unit="折" keys="discount" @change="changeItem"  ref="item5"></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>
                    </div>
                    <div v-if="search_form.commission_agent != 0" 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.word" placeholder="商品名称、品牌id" style="width: 200px;"></el-input>
                            <el-input v-model="search_form.shop_words" 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_time'?'#29BA9C':'#333'}" @click="changeOrderBy('created_time')">
                                    <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=='promotion_rate')?'#29BA9C':'#333'}" @click="changeOrderBy('promotion_rate')">
                                    <span style="color:#333;font-weight:500">常规利润率</span>
                                    <span class="caret-wrapper">
                                        <i class="caret-top" :style="{borderBottomColor:search_form.promotion_rate_sort=='asc'?'#29BA9C':'#333'}"></i>
                                        <i class="caret-bottom" :style="{borderTopColor:search_form.promotion_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.cover" :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.promotion_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.min_profits||'--']]</div>
                                                </div>
                                                <div  style="flex: 1;">
                                                    <div>折扣</div>
                                                    <div class="text-vertical" style="color:#FF0000">[[item.discount||'--']]折</div>
                                                </div>
                                                <div style="flex:1;">
                                                    <div>毛利率</div>
                                                    <div class="text-vertical" style="color:#FF0000">[[item.gross_profit_rate||'--']]%</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 style="text-align: right;flex:1;">
                                    <el-pagination layout="sizes,prev, pager, next,jumper" @current-change="search" v-if="total/per_size >=50" :total="per_size*50"
                                        :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" >
                                    <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>=2500?2500:total]]）</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 style="color: red">共计商品数为[[total]]个，因条件限制该操作只能导入前2500款商品</el-col>
                    <el-span v-if="import_status">正在导入,请勿刷新当前页面</el-span>
                    <el-progress v-if="import_status" :percentage="process" ></el-progress>
                    <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 goods_source = [
                {value: "",label: '全部',},
                {value: 2,label: '京东',url:"jd",},
                {value: 6,label: '阿里',url:"alibaba"},
                {value: 7,label: '天猫',url:"tmall"},
                {value: 1,label: '云仓',url:"yuncang"},
                {value: 8,label: '苏宁'},
                {value: 11,label: '华南一仓'},
                {value: 14,label: '华东一仓'},
                {value: 15,label: '淘宝'},
                {value: 12,label: '特卖一仓'},
                {value: 16,label: '跨境一仓'},
            ];
    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]?parseFloat(val[1]):99999;
                this.$emit("change",{search:{from:parseFloat(val[0]),to:val[1]},key:this.keys});
            },
            blur(){
                let search = {};
                search.from = this.search.from ? parseFloat(this.search.from):0,
                search.to = this.search.to ? parseFloat(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 = '{}';
            console.log("search_cate_v1",search_cate_v1);
            let group_list = {!! $group_list?:'{}' !!};
            let app_group_list = {!! $app_group_list?:'{}' !!};
            let all_import = {!! $import?:'{}' !!};
            let topic_id = {!! $topic_id !!};
            return{
                changeTotal:0,
                is_all_choose:0,
                loading:false,
                all_loading:false,
                page_number: 20, //每页显示条数
                all_import_show:false,
                import_status:false,
                process:0,
                list: [],
                all_import: all_import,
                search_form: {
                    goods_source:"",
                    cate_v1:'',
                    cate_v2:'',
                    cate_v3:'',
                    range_type:'',
                    range_from:'',
                    range_to:'',
                    source:'',
                    commission_agent:'1',
                    goods_import:"",
                    topic_id : topic_id,
                },
                category_page: {
                    pageIndex: 1,
                    pageSize: 20,
                },
                category_form:{
                    id_v1:"",
                    id_v2:"",
                    id_v3:"",
                    fid_v1:"",
                    fid_v2:"",
                },
                goods_source,
                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: '0',
                    label: '不包邮'
                }, {
                    value: '1',
                    label: '包邮'
                }],
                goods_page_size:[20,50],
                goods_import:[{
                    value: '',
                    label: '全部'
                }, {
                    value: '1',
                    label: '未导入'
                }, {
                    value: '2',
                    label: '已导入'
                }],
                goods_agent:[{
                    value: '0',
                    label: '选品库商品',

                }, {
                    value: '1',
                    label: '精选商品'
                }, {
                    value: '2',
                    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: 0,
                per_size: 0,
                current_page: 0,

            }

        },
        created() {

            this.getGoodsList({search:{topic_id:this.search_form.topic_id}});
            this.changeSource();
        },
        methods: {
            //营销活动切换
            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 = {
                    commission_agent:'1',
                    source:"",
                    cate_v1:'',
                    cate_v2:'',
                    cate_v3:'',
                    goods_group:"",
                    word:"",
                    shop_words:"",
                    goods_page_size:"",

                    goods_source:"",
                    range_type:'',
                    range_from:'',
                    range_to:'',
                    goods_import:"",
                };
                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/jd-supply/assent/image/${url}.png')}}`
                return url
            },
            //查看详情
            watchDetail(item){
                window.open("{!! yzWebUrl('plugin.jd-supply.admin.goods-import.detail') !!}" + "&id=" + item.id);
            },
            // 获得商品列表
            getGoodsList(json={}) {
                json.search.goods_page_size = this.page_number;
                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.jd-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.current_page = response.data.data.current_page;
                        this.per_size = response.data.data.per_page;
                        this.total = response.data.data.total;
                        this.changeTotal = 0;
                        this.all_loading = false;
                    } else{
                        this.$message.error(response.data.msg);
                        this.all_loading = false;
                    }
                    loading.close();
                }),(res)=>{
                    loading.close();
                    this.all_loading = false;
                };
            },

            show_all_import()
            {
                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.jd-supply.admin.goods-import.getChildrenCategory') !!}',{'source':source,'parent_id':parent_id}).then(response => {
                    console.log(response.data);
                    if(response.data.result==1){
                        this.search_cate_v2 = response.data.data;
                    }
                }),function(res){
                    console.log(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.jd-supply.admin.goods-import.getChildrenCategory') !!}",{'source':source,'parent_id':parent_id}).then(response => {
                    if(response.data.result==1){
                        this.search_cate_v3 = response.data.data;
                    }
                }),function(res){
                    console.log(res);
                };
            },
            changeSource() {
                let 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 = [];
                let source = that.search_form.source;
                that.$http.post("{!! yzWebFullUrl('plugin.jd-supply.admin.goods-import.getChildrenCategory') !!}",{source}).then(response => {
                    if(response.data.result==1)that.search_cate_v1 = response.data.data;
                }),function(res){
                    console.log(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;
            },
            changeNav(){
                this.getGoodsList({search:this.search_form});
                this.changeSource();
            },
            loadmore() {
                this.category_page.pageIndex++;
                var source = this.search_form.source;
                // 这里是接口请求数据, 带分页条件
                this.$http.post('{!! yzWebFullUrl('plugin.jd-supply.admin.goods-import.getThirdPartyCategory') !!}',{'source':source,'page':this.category_page.pageIndex}).then(response => {
                    console.log(response.data);
                    if(response.data.result==1){
                        this.thirdPartyCategory = [...this.thirdPartyCategory, ...response.data.data];
                    }
                }),function(res){
                    console.log(res);
                };
            },

            // 一级标签改变
            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};
                console.log(json)
                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.jd-supply.admin.goods-import.select') !!}",json).then(response => {
                    console.log(response);
                    // 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;
                    }
                }
                this.import_status = true
                process = 0;
                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};
                // that.is_import_disabled = true;
                that.all_loading = true;
                this.all_import_disabled = true
                that.$http.post("{!! yzWebFullUrl('plugin.jd-supply.admin.goods-import.all-select') !!}",json).then(response => {
                    console.log(response);
                    that.is_import_disabled = true;
                    that.all_loading = false;
                    if(response.data.result==1) {
                        this.process = parseInt(response.data.data.process)
                        if (response.data.data.status == true) {
                            this.process = 0;
                            this.import_status = false;
                            this.all_import_show = false;
                            this.all_import_disabled = false;
                            this.is_import_disabled = false;
                            this.$message({type: 'success',message: '导入成功!'});
                        } else {
                            this.loop(json, response.data.data.page ,response.data.data.page_cent);
                        }
                    } else{
                        that.$message.error(response.data.msg);
                    }
                }),function(res){
                    console.log(res);
                    that.is_import_disabled = true;
                    that.all_loading = false;
                };
            },
            loop (json,page,page_cent) {
                json['page'] = page;
                json['page_cent'] = page_cent;
                this.$http.post("{!! yzWebFullUrl('plugin.jd-supply.admin.goods-import.all-select') !!}",json)
                    .then(response => {
                        if (response.data.result) {
                            if (response.data.data) {
                                this.process = parseInt(response.data.data.process);
                            }
                            if (response.data.data.status == true) {
                                this.process = 0;
                                this.import_status = false;
                                this.all_import_show = false;
                                this.all_import_disabled = false;
                                this.is_import_disabled = false;
                                this.$message({type: 'success',message: '导入成功!'});
                            } else {
                                this.loop(json,response.data.data.page,response.data.data.page_cent);
                            }
                        } else {
                            this.$message({type: 'error',message: response.data.msg});
                            this.showProgress = false;
                        }
                    },response => {
                        this.$message({type: 'error',message: response.data.msg});
                        this.showProgress = false;
                    });
            },
            oneChange(item) {
                let that = this;
                this.$forceUpdate();
                let is_all = 0;
                console.log(item);
                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;
                    item.is_choose = status;
                })
                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')