@extends('layouts.base')

@section('content')
@section('title', trans('商品列表'))
<style>
    [v-cloak]{
        display:none;
    }

</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="{{yzWebFullUrl('plugin.jd-supply.admin.goods-import.index')}}">商品列表</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" >
                <div class="panel panel-default">
                    <div class="panel-body table-responsive">
                        <div  v-cloak  v-loading="loading">
                            <el-table :data="list" style="width: 100%" max-height="600" v-loading="all_loading" tooltip-effect="dark">
                                <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
                                <el-table-column prop="name" label="标签名称" max-width="100" align="center"></el-table-column>
                                <el-table-column prop="options_count" label="标签个数" max-width="100" align="center"></el-table-column>
                                <el-table-column label="操作" width="300" align="center">
                                    <template slot-scope="scope">
                                        <el-button  @click.native="openImport(scope.row.id)">一键导入</el-button>
                                        <el-col v-if="scope.row.import_status == 0">未导入</el-col>
                                        <el-col v-else-if="scope.row.import_status == 1">导入中,总进度约[[scope.row.import_process]]%</el-col>
                                        <el-col v-else>已导入</el-col>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="vue-page" v-show="total>1">
                                <el-row>
                                    <el-col align="right">
                                        <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total"
                                                       :page-size="per_size" :current-page="current_page" background
                                                       v-loading="loading"></el-pagination>
                                    </el-col>
                                </el-row>
                            </div>



                            <!-- 表格end -->
                        </div>
                    </div>
                    <div class='panel-footer'>
                        <input name="submit" type="button" @click="confirm()" :disabled="is_import_disabled" class="btn btn-success" value="导入商品">
                    </div>
                </div>
                <el-dialog :visible.sync="import_show" width="750px"  title="选择导入分类">
                    <div style="height:100px;overflow:auto" id="cancel-send">
                        <el-form  label-width="15%">
                            <el-select 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 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 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>
                        </el-form>
                        <el-col v-if="create_category == 1" style="color: red">已开启自动匹配分类，如不选择导入分类则自动匹配或创建分类！（阿里商品不支持）</el-col>
                    </div>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="import_show = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确认导入</el-button>
            </span>
                </el-dialog>

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

<script>
    var app = new Vue({
        el:"#app",
        delimiters: ['[[', ']]'],
        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 !!};

            return{
                loading:false,
                all_loading:false,
                page_number: 1, //每页显示条数
                import_show:false,
                list: [],
                category_page: {
                    pageIndex: 1,
                    pageSize: 20,
                },
                category_form:{
                    id_v1:"",
                    id_v2:"",
                    id_v3:"",
                    fid_v1:"",
                    fid_v2:"",
                },
                is_import_disabled : false,
                category_level:category_level,//分类等级
                create_category:create_category,//分类等级
                category_list:[],
                category_list_v2:[],
                category_list_v3:[],
                selectionGoodsIds: [],

                //分页
                total: 0,
                per_size: 0,
                current_page: 0,

            }

        },
        created() {
            this.getGoodsList('{}');
            this.getCategoryList('{}');
        },
        methods: {
            openImport(id) {
                console.log(id);
                this.label_id = id;
                this.import_show = true;
            },

            // 获得标签列表
            getGoodsList(json) {
                var that = this;
                that.all_loading = true;
                that.$http.post('{!! yzWebFullUrl('plugin.jd-supply.admin.label-import.get-label-list') !!}',json).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        console.log(response);
                        that.list = response.data.data.data;
                        that.current_page = response.data.data.current_page;
                        that.per_size = 10;
                        that.total = response.data.data.total;
                        that.all_loading = false;
                    } else{
                        that.$message.error(response.data.msg);
                        that.all_loading = false;
                    }
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },

            getCategoryList(json) {
                var that = this;
                that.all_loading = true;
                that.$http.post('{!! yzWebFullUrl('plugin.jd-supply.admin.label-import.get-category-list') !!}',json).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        console.log(response);
                        that.category_list = response.data.data.cate;
                        that.all_loading = false;
                    } else{
                        that.$message.error(response.data.msg);
                        that.all_loading = false;
                    }
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },

            // 一级分类改变
            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;
                        }
                    })
                }
            },
            search(page) {
                this.getGoodsList({page:page});
            },

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

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

                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,id:this.label_id};

                that.is_import_disabled = true;
                that.all_loading = true;
                that.$http.post('{!! yzWebFullUrl('plugin.jd-supply.admin.label-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);
                        this.import_show = false;
                        this.search(this.current_page);
                    } else{
                        that.$message.error(response.data.msg);
                        that.is_import_disabled = false;
                    }
                }),function(res){
                    console.log(res);
                    that.is_import_disabled = true;
                    that.all_loading = false;
                };
            }

        },
    })

</script>
@endsection('content')