@extends('layouts.base')

@section('content')
@section('title', trans('公众号导入商品'))
<style>
    body{background-color: #F2F2F2;}
    .transition{transition: all .5s;}
    .modular{padding: 10px;border-radius: 10px;background-color: #fff;margin: 10px 0;}
    .tips{margin-top: 10px;line-height: 30px;height: 230px;min-width: 920px;overflow-y: hidden;}
    .close-tips{height: 48px;}
    .isShow{height: 30px;overflow-y: hidden;cursor:pointer}
    .put-away{transform: translateY(-30px);}
    .open{transform: translateY(0);}
    .major-tips{color: #F25353;}
    .tips-title{display: flex;align-items: center;width: 100%;}
    .tips-title .el-icon-arrow-down{transform: rotate(-180deg);margin: 0 2px;cursor:pointer}
    .tips .arrow-down{transform: rotate(0deg);}
    .el-collapse{padding: 10px;border-radius: 10px;}
    .search-box{display: flex;flex-wrap: wrap;}
    .search-box>div{max-width: 240px;margin: 10px 10px 0 0;}
    .list-title{display: flex;}
    .list-title .icon-box{display: flex;flex-wrap: wrap;width: 14px;}
    .list-title .icon-box i{font-size: 14px;}
    .list-title .el-icon-caret-bottom{margin-top: -12px;}
    .list{display: flex;grid-gap: 10px;text-align: justify;justify-items: center;flex-wrap: wrap;}
    .list-item{width: 220px;height: 330px;border: 1px solid #ccc;}
    .list-item:hover{border-color: #F25353;}
    .img-box,.list-item img{width: 100%;height: 230px;position: relative;}
    .checkbox{position: absolute;left: 4px;top: -8px;opacity: 0;}
    .isImport{position: absolute;width: 100%;height: 30px;line-height: 30px;color: #fff;background-color: #F25353;text-align: center;opacity: 0;bottom: 0;}
    .list-item:hover .isImport,.list-item:hover .checkbox{opacity: 1;}
    .product-title{text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;margin: 6px;line-height: 20px;height: 40px;text-indent: 2rem;word-wrap:keep-all;}
    .price-box{width: 100%;height: calc(100% - 52px - 230px);display: flex;justify-content: space-around;align-items: center;text-align: center;line-height: 20px;}
    .foort{position: fixed;width: calc(100vw - 295px);height: 80px;background-color: #fff;bottom: 0;border-radius: 10px 10px 0 0;box-shadow: 0px -1px 10px rgb(0 0 0 / 10%);padding: 10px;}
    .foort-top,.foort-buttom{display: flex;align-items: center;}
    .--mb--rich-text{flex: 1;color: #F25353;}
    .foort-buttom>div{margin-right: 10px;}
</style>
<div class="all">
    <div id="app">
        <div class="tips modular transition" :class="{'close-tips':!isShow}">
            <div class="tips-title">
                <span style="flex: 1;">功能介绍</span>
                <span class="major-tips isShow" @click="setIsShow">
                    <!-- [[isShow?"收起":"展开"]] -->
                    <div class="put-away transition" :class="{'open':!isShow}">
                        <div>展开</div>
                        <div>收起</div>
                    </div>
                </span>
                <span class="el-icon-arrow-down major-tips transition" :class="{'arrow-down':!isShow}" @click="setIsShow"></span>
            </div>
            <div>1. 选择公众号快速导入商品</div>
            <div>2. <span class="major-tips">导入公众号后点击导入后请不要关闭页面，或者重新刷新页面，这样会导致程序崩溃，造成不可预计的错误</span></div>
            <div>3. 导入会把导入公众号的商品信息:商品基本信息，分类，品牌，视频，属性，规格等导入当前公众号。<span class="major-tips">（先导入分类/品牌可增加导入的成功率)</span> </div>
            <div>
                <span>4. 如果数据你的商品描述中添加了大量的文字样式等,导入时需要更改mysql配置,步骤如下:</span>
                <div style="text-indent: 2rem;">1. 找到服务器my.conf文件,针对宝塔用户</div>
                <div style="text-indent: 2rem;">2. 查找max_allowed_packet,把max_allowed_packet值改为500M,值根据情况来定</div>
            </div>
        </div>
        <div class="modular">
            选择公众号：
            <el-select v-model="search.uniacid" placeholder="请选择" size="small" @change="changeuniacid">
                <el-option v-for="(item,i) in PublicNumber" :key="i" :label="item.name" :value="item.uniacid"></el-option>
            </el-select>
            <div class="search-box">
                <el-select v-model="search.category.parentid" placeholder="请选择一级分类" size="small" @change="changeCategory(search.category.parentid,'category','category1')" clearable>
                    <el-option v-for="(item,i) in category" :key="i" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select v-model="search.category.childid" placeholder="请选择二级分类" size="small" @change="changeCategory(search.category.childid,'category1','category2')" clearable>
                    <el-option v-for="(item,i) in category1" :key="i" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select v-model="search.category.thirdid" placeholder="请选择三级分类" size="small" v-if="cat_level == 3">
                    <el-option v-for="(item,i) in category2" :key="i" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <div style="display: flex;align-items: center;max-width:400px;">
                    <div style="margin-right:4px;">价格区间</div>
                    <el-input v-model="search.min_price" placeholder="商品最低价" size="small" clearable style="flex: 1;"></el-input>
                    <div style="margin:0 2px;">至</div>
                    <el-input v-model="search.max_price" placeholder="商品最高价" size="small" clearable style="flex: 1;"></el-input>
                </div>
                <el-select v-model="search.is_presence" placeholder="是否已导入" size="small" clearable>
                    <el-option label="已导入" value="1"></el-option>
                    <el-option label="未导入" value="0"></el-option>
                </el-select>
                <el-select v-model="search.brand_id" placeholder="请选择品牌名称" size="small" clearable>
                    <el-option v-for="(item,i) in brandList" :key="i" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <!-- <el-input v-model="form.keyword" placeholder="请输入商品ID或关键字" size="small"></el-input>
                <el-input v-model="form.brank" placeholder="请输入品牌名称" size="small"></el-input> -->
                <div style="display: flex;max-width: 370px;min-width: 370px;align-items: center;">
                    <div style="margin-right:8px;">商品类型</div>
                    <el-checkbox-group v-model="search.product_attr" style="margin-top:6px;">
                        <el-checkbox label="is_new">新品</el-checkbox>
                        <el-checkbox label="is_hot">热卖</el-checkbox>
                        <el-checkbox label="is_recommand">推荐</el-checkbox>
                        <el-checkbox label="is_discount">促销</el-checkbox>
                    </el-checkbox-group>
                </div>
                <div>
                    <el-button size="small" style="width: 80px;" @click="initFrom">重置</el-button>
                    <el-button size="small" type="primary" style="width: 80px;" @click="searchList">搜索</el-button>
                </div>
            </div>
        </div>
        <div class="modular">
            <div class="list-title">
                <el-checkbox v-model="change" @change="changeAll"></el-checkbox>
                <span class="" style="margin: 0 10px 0 4px;" @click="changeAll(!change)">全选</span>
                <span  @click="setreal_sales">销量</span>
                <div class="icon-box" @click="setreal_sales">
                    <i class="el-icon-caret-top transition" :class="{'major-tips':search.real_sales == '0'}"></i>
                    <i class="el-icon-caret-bottom transition" :class="{'major-tips':search.real_sales == '1'}"></i>
                </div>
            </div>
            <div class="list">
                <div class="list-item transition" v-for="(item,i) in listData">
                    <div class="img-box">
                        <img :src="item.thumb" alt="">
                        <div class="isImport transition" v-if="item.is_presence == 1">已导入</div>
                        <el-checkbox class="checkbox transition" v-model="item.change" v-else></el-checkbox>
                    </div>
                    <div class="product-title">[[item.title]]</div>
                    <div class="price-box">
                        <div>
                            <div>现价</div>
                            <div class="major-tips">￥[[item.price]]</div>
                        </div>
                        <div>
                            <div>成本</div>
                            <div class="major-tips">￥[[item.cost_price]]</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 100px;"></div>
        <div class="foort" style="height: 120px">
            <div class="foort-top" style="margin-bottom: 20px">
                <div class="--mb--rich-text">如不选择导入分类则自动匹配或创建分类！</div>
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="per_page" v-if="total > 0" layout="total, prev, pager, next, jumper" :total="total" background>
                </el-pagination>
            </div>
            <div class="foort-buttom">
                选择导入的分类：
                <el-select v-model="importForm.parentid" placeholder="请选择一级分类" size="small" @change="changeCategory(importForm.parentid,'importcategory','importcategory1')" clearable>
                    <el-option v-for="(item,i) in importcategory" :key="i" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select v-model="importForm.childid" placeholder="请选择二级分类" size="small" @change="changeCategory(importForm.childid,'importcategory1','importcategory2')"      clearable>
                    <el-option v-for="(item,i) in importcategory1" :key="i" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select v-model="importForm.thirdid" placeholder="请选择三级分类" size="small" clearable v-if="import_cat_level == 3">
                    <el-option v-for="(item,i) in importcategory2" :key="i" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <div style="flex: 1;">
                    <el-button size="small" type="primary" @click="importGoods">导入商品</el-button>
                    <el-button size="small" type="primary" @click="importAllGoods">导入全部筛选商品</el-button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let vm = new Vue({
        el:"#app",
        delimiters: ['[[', ']]'],
        data(){
            return{
                search:{
                    uniacid:"",
                    category:{
                        parentid:"",
                        childid:"",
                        thirdid:"",
                    },
                    real_sales:"0",
                    brand_id:"",
                    is_presence:"",
                    max_price:"",
                    min_price:"",
                    product_attr:[]
                },
                category:[],
                category1:[],
                category2:[],
                importcategory:[],
                importcategory1:[],
                importcategory2:[],
                importForm:{
                    parentid:"",
                    childid:"",
                    thirdid:""
                },
                isShow:true,
                form:{},
                currentPage:1,
                total:0,
                listData:[],
                PublicNumber:[],//公众号列表
                value: '',
                isChange:false,
                change:false,
                brandList:[],
                per_page:20,
                cat_level:"2",
                import_cat_level:"2",
            }
        },
        created(){
            this.initFrom();
            this.getPublicNumber();
        },
        methods:{
            changeuniacid(){
                this.getBrand();
                this.getCategory();
                this.getImportCategory();
                setTimeout(this.getList,0);
            },
            changeAll(change){
                this.change = change;
                this.listData.forEach(item=>{
                    item.change = change;
                })
            },
            changeCategory(value,key,ckildKey){
                for (let i = 0; i < this[key].length; i++) {
                    let item = this[key][i];
                    if (item.id == value) {
                        this[ckildKey] = item.childrens;
                        return false;
                    }
                }
            },
            setIsShow(){
                this.isShow = !this.isShow;
            },
            initFrom(){
                this.search = {
                    category:{
                        parentid:"",
                        childid:"",
                        thirdid:""
                    },
                    brand_id:"",
                    is_presence:"",
                    max_price:"",
                    min_price:"",
                    product_attr:[],
                    real_sales:"0"
                }
            },
            loading(text){
                return this.$loading({
                    lock: true,
                    text,
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            },
            getBrand(){
                this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.getBrand') !!}",{uniacids:this.search.uniacid}).then(({data:{result,msg,data}})=>{
                    if (result == 1) this.brandList = data || [];
                })
            },
            getPublicNumber(){
                let loading = this.loading("加载公众号中...");
                this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.getPublicNumber') !!}").then(({data:{result,data,msg}})=>{
                    loading.close();
                    if(result == 1){
                        if(!data || data.length<=0){
                            this.$message.error("公众号列表为空");
                            this.PublicNumber = [];
                            return false;
                        }
                        this.PublicNumber = data;
                        this.search.uniacid = data[0].uniacid;
                        this.getBrand();
                        this.getCategory();
                        this.getImportCategory();
                        setTimeout(this.getList,0);
                    }else this.$message.error(msg);
                })
            },
            getjson(){
                //后端需要为空或者不选择的不需要传key过去
                let {search} = this;
                let json = {};
                for (let key in search) {
                   let item = search[key];
                   if(key == "category"){
                    for (const key1 in item) {
                        let items = item[key1];
                       if(items !=""){
                        if(!json.category) json.category = {};
                        json.category[key1] = items;
                       }
                    }
                   }else if(key == "product_attr"){
                       if(item.length>0) json.product_attr = item;
                   }else{
                       if(item != "") json[key] = item;
                   }
                }
                return json;
            },
            getList(){
                let loading = this.loading("加载数据中...");
                let json = this.getjson();
                this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.getGoodsData') !!}",{search:json,page:this.currentPage},"加载数据中...").then(({data:{result,data,msg}})=>{
                    loading.close();
                    if(result == 1){
                        this.listData = data.data;
                        this.total = data.total;
                        this.per_page = data.per_page;
                    }else this.$message.error(msg);

                })
            },
            getCategory(){
                this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.getCategory') !!}",{uniacids:this.search.uniacid}).then(({data:{result,data,msg}})=>{
                    if(result == 1){
                        this.import_cat_level = data.cat_level;
                        this.importcategory = data.category;
                    }
                    // this.category = data.category || [];
                })
            },
            getImportCategory(){
                this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.getImportCategory') !!}",{uniacids:this.search.uniacid}).then(({data:{result,data,msg}})=>{
                    if(result == 1){
                        this.cat_level = data.cat_level;
                        this.category = data.category || [];
                    }
                    //this.category = data.category || [];
                    console.log(data);
                })
            },
            importGoods(){
                let goods_ids = this.listData.map(item=>{
                    if(item.change) return item.id;
                })
                if(!goods_ids || goods_ids.length<=0) return this.$message.error("请选择导入商品");
                let loading = this.loading("正在导入中...");
                this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.isImport') !!}",{uniacids:this.search.uniacid,goods_ids,import_category:this.importForm}).then(({data:{result,msg}})=>{
                    loading.close();
                    this.$message[result==1?"success":"error"](msg);
                    if(result==1) {
                        this.change = false;
                        setTimeout(this.getList,500);
                    }
                })
            },
            importAllGoods(){
                let loading = this.loading("正在导入中...");
                let json = this.getjson();
                json.page = this.currentPage;
                let import_category = false;
                for (let key in this.importForm) {
                    if(this.importForm[key]!==""){
                        if(!import_category)import_category = {};
                        import_category[key] = this.importForm[key];
                    }
                }
                this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.screenImport') !!}",{search:json,import_category}).then(({data:{result,msg}})=>{
                    loading.close();
                    this.$message[result==1?"success":"error"](msg);
                    if(result==1) {
                        this.change = false;
                        setTimeout(this.getList,500);
                    }
                })
            },
            searchList(){
                this.currentPage = 1;
                this.getList();
            },
            handleCurrentChange(){
                this.getList();
            },
            setreal_sales(){
                this.search.real_sales = this.search.real_sales == 1?"0":"1";
                this.getList();
            }
        },
        watch:{
            "search.category.parentid"(value){
                if(value === "") this.$set(this.search.category,"childid","");
            },
            "search.category.childid"(value){
                if(value === "") this.$set(this.search.category,"thirdid","");
            },
            "importForm.parentid"(value){
                if(value === "") this.$set(this.importForm,"childid","");
            },
            "importForm.childid"(value){
                if(value === "") this.$set(this.importForm,"thirdid","");
            }
        }
    })
</script>
@endsection('content')