@extends('layouts.base')

@section('content')
@section('title', trans('分类匹配列表'))
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
<link rel="stylesheet" href="{{resource_get('plugins/yz-supply/assent/css/album1.css?time='.time())}}">


<div class="all">
    <div id="app" v-cloak>
        <div class="vue-head">
            <div class="top-title">
                <span :class="item.class" v-for="(item,index) in albumTopTitle"  @click="skipUrl(item)" :key="index">[[item.name]]</span>
            </div>
        </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-form :inline="true" :model="post_form" ref="post_form" style="margin-left:10px;">
                                <el-row>
                                    <el-form-item label="" prop="">
                                        <el-select v-model="post_form.middleground_configuration_id" placeholder="请选择供应链" clearable remote filterable >
                                            <el-option v-for="item in middleground_configuration" :key="item.id" :label="item.title" :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-select v-model="post_form.id_v1" placeholder="请选择一级分类" clearable @change="changeCateV1()" filterable>
                                            <el-option v-for="item in category" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-select v-model="post_form.id_v2" placeholder="请选择二级分类" clearable @change="changeCateV2()" filterable>
                                            <el-option v-for="item in category_v2" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-select v-model="post_form.id_v3" placeholder="请选择三级分类" clearable v-if="category_level==3" filterable>
                                            <el-option v-for="item in category_v3" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <a href="#">
                                        <el-button type="primary" icon="el-icon-search" @click="search(1)">搜索</el-button>
                                    </a>
                                    </el-col>
                                </el-row>
                            </el-form>

                            <a @click="autoCategory()">
                                自动匹配分类
                            </a>
                            <div style="color: red;">*用于推送全部商品的时候与第三方分类进行匹配,商品分类未匹配第三方分类的将会直接跳过</div>
                            <el-table :data="list" style="width: 100%" max-height="2400" v-loading="all_loading" tooltip-effect="dark">
                                <el-table-column prop="local_first_name" label="一级分类" width="120" align="center"></el-table-column>
                                <el-table-column prop="local_second_name" label="二级分类" width="120" align="center"></el-table-column>
                                <el-table-column v-if="category_level==3" prop="local_third_name" label="三级分类" width="120" align="center"></el-table-column>
                                <el-table-column prop="" label="" width="120" align="center"></el-table-column>
                                <el-table-column p label="云仓一级分类" width="200" align="center">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.cloud_first" placeholder="请选择一级分类" clearable @change="changeV1(scope.row,scope.$index)">
                                            <el-option v-for="item in category_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </template>

                                </el-table-column>
                                <el-table-column  label="云仓二级分类" width="200" align="center">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.cloud_second" placeholder="请选择二级分类" clearable @change="changeV2(scope.row,scope.$index)">
                                            <el-option v-for="item in scope.row.second_category" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </template>

                                </el-table-column>
                                <el-table-column  label="云仓三级分类" width="200" align="center">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.cloud_third" placeholder="请选择三级分类" clearable >
                                            <el-option v-for="item in scope.row.third_category" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="300" align="center">
                                    <template slot-scope="scope">
                                        <el-button  @click.native="saveCategory(scope.row)">保存</el-button>
                                    </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>

            </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 !!};
            let category = {!! $category !!};
            return{
                albumTopTitle: [
                    {
                        id: 1,
                        name: "基础设置",
                        class:"album-name-against",
                        url:"{!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-set.index') !!}"
                    },
                    {
                        id: 2,
                        name: "分类匹配",
                        class:"album-name",
                        url:"{!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-category.index') !!}"
                    },
                    {
                        id: 3,
                        name: "运费模板",
                        class:"album-name-against",
                        url:"{!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-dispatch.index') !!}"
                    },
                ],
                loading:false,
                all_loading:false,
                page_number: 1, //每页显示条数
                import_show:false,
                list: [],
                middleground_configuration:[],
                category_page: {
                    pageIndex: 1,
                    pageSize: 20,
                },
                search_form: {
                    cate_v1:'',
                    cate_v2:'',
                    cate_v3:'',
                },
                category_form:{
                    id_v1:"",
                    id_v2:"",
                    id_v3:"",
                    fid_v1:"",
                    fid_v2:"",
                },
                post_form: {
                    middleground_configuration_id:0,
                    id_v1: '',
                    id_v2: '',
                    id_v3: ''
                },
                category: category,
                category_v2: [],
                category_v3: [],
                is_import_disabled : false,
                category_level:category_level,//分类等级
                create_category:create_category,//分类等级
                category_list:[],
                category_list_v2:[],
                category_list_v3:[],
                selectionGoodsIds: [],
                cloud_category: [],

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



            }

        },
        created() {
            this.getMiddlegroundConfiguration();
        },
        methods: {
            skipUrl(item){
                window.location.href = item.url
            },
            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.post_form.middleground_configuration_id = this.middleground_configuration[0].id;
                        let json = {
                            middleground_configuration_id:this.post_form.middleground_configuration_id
                        }
                        this.getGoodsList(json);
                    } else {
                        this.$message({message: response.data.msg, type: 'error'});
                    }
                }, function (response) {
                    this.$message({message: response.data.msg, type: 'error'});
                })
            },
            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.yz-supply.admin.cloud.cloud-category.get-auto-category-list') !!}',json).then(response => {
                    if(response.data.result==1){
                        console.log(response.data.data);
                        that.list = response.data.data.local_category.data;
                        that.category_list = response.data.data.cloud_category;
                        that.current_page = response.data.data.local_category.current_page;
                        that.per_size = 30;
                        that.total = response.data.data.local_category.total;
                        that.all_loading = false;
                    } else{
                        that.$message.error(response.data.msg);
                        that.all_loading = false;
                    }
                }),function(res){
                    that.all_loading = false;
                };
            },

            // 一级分类改变
            changeV1(row,index) {
                console.log(index)
                this.list[index]['cloud_second'] = "";
                this.list[index]['cloud_third'] = "";
                this.category_list_v2 = [];
                this.category_list_v3 = [];
                this.category_list.find(item => {
                    if (item.id == row.cloud_first) {
                        console.log(123)
                        this.list[index]['second_category'] = item.children;
                    }
                });
            },
            // 二级分类改变
            changeV2(row,index) {
                this.list[index]['cloud_third'] = "";
                this.category_list_v3 = [];
                this.list[index]['second_category'].find(item => {
                    if (item.id == row.cloud_second) {
                        this.list[index]['third_category'] = item.children;                    }
                })
            },
            saveCategory(row) {
                var that = this;
                that.all_loading = true;
                var json = {
                    'id':row.id,
                    'cloud_first':row.cloud_first,
                    'cloud_second':row.cloud_second,
                    'cloud_third':row.cloud_third,
                };
                that.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-category.save-category') !!}',json).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        that.$message.success(response.data.msg);
                        that.all_loading = false;
                    } else{
                        that.$message.error(response.data.msg);
                        that.all_loading = false;
                    }
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },
            autoCategory() {
                var that = this;
                that.all_loading = true;
                that.$confirm('确定匹配吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                    that.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-category.auto-category') !!}',{middleground_configuration_id:this.post_form.middleground_configuration_id}).then(response => {
                        console.log(response);
                        if (response.data.result == 1) {
                            that.$message.success(response.data.msg);
                            that.all_loading = false;
                            location.reload()
                        } else {
                            that.$message.error(response.data.msg);
                            that.all_loading = false;
                        }
                    }), function (res) {
                        console.log(res);
                        that.all_loading = false;
                    };
                });
            },
            // 一级分类改变
            changeCateV1() {
                this.post_form.id_v2 = "";
                this.post_form.id_v3 = "";
                this.category_v2 = [];
                this.category_v3 = [];
                this.category.find(item => {
                    if (item.id == this.post_form.id_v1) {
                        this.category_v2 = item.childrens;
                    }
                });
            },
            // 二级分类改变
            changeCateV2() {
                this.post_form.id_v3 = "";
                this.category_v3 = [];
                this.category_v2.find(item => {
                    if (item.id == this.post_form.id_v2) {
                        this.category_v3 = item.childrens;
                    }
                })
            },

            search(page) {
                var that = this;
                let json = {
                    page: page,
                    search: {
                        parentid: that.post_form.id_v1,
                        childid: that.post_form.id_v2,
                        thirdid: that.post_form.id_v3,
                    },
                    middleground_configuration_id:this.post_form.middleground_configuration_id
                }
                this.getGoodsList(json);
            },


        },
    })

</script>
@endsection('content')