/**
 * 选择商品分类（不选到底）
 */
Vue.component('select-goods-category', {
    template: `<div style="display: inline-block;vertical-align: top" >
                    <el-select :size="size" clearable :disabled="isDisabled" filterable
                               @change="changeGoodsClass1($event)"
                               value-key="id"
                               v-model="id1" :placeholder="placeholder1">
                        <el-option-group v-for="group in goodsClass1"
                                        :key="group.id"
                                        :label="group.name">
                            <el-option v-for="item in group.list"
                                        :key="item.id"
                                        :disabled="item.industry_id>0 && limitIndustryId>0 && limitIndustryId!=item.industry_id"
                                        :label="item.class_name"
                                        :value="item">
                            </el-option>
                        </el-option-group>
                    </el-select>
                    <el-select :size="size" clearable :disabled="isDisabled" filterable v-if="goodsClass2.length"
                               @change="changeGoodsClass2($event)"
                               v-model="id2" :placeholder="placeholder2">
                        <el-option
                                v-for="item in goodsClass2"
                                :key="item.id"
                                :label="item.class_name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select :size="size" clearable :disabled="isDisabled" filterable v-if="goodsClass3.length"
                               @change="changeGoodsClass3($event)"
                               v-model="id3" :placeholder="placeholder3">
                        <el-option
                                v-for="item in goodsClass3"
                                :key="item.id"
                                :label="item.class_name"
                                :value="item.id">
                        </el-option>
                    </el-select>
              </div>`,
    props: {
        'categoryId': {
            type: String,
            default: '',
        },//已选中的最后一级分类ID
        'categoryId1': {
            type: String,
            default: '',
        },//已选中的一级分类
        'categoryId2': {
            type: String,
            default: '',
        },//已选中的二级分类
        'categoryId3': {
            type: String,
            default: '',
        },//已选中的三级分类
        'userType': {
            type: Number,
            default: 1,
        },//获取分类的用户类型 1商户  2门店
        'storeId': {
            type: String,
            default: '',
        },//门店ID在userType等于2时，并且是商户选择门店商品时可能会传
        'getChild': {
            type: Boolean,
            default: true,
        },//是否需要选择二三级分类
        'placeholder1': {
            type: String,
            default: '选择一级分类',
        },
        'placeholder2': {
            type: String,
            default: '选择二级分类',
        },
        'placeholder3': {
            type: String,
            default: '选择三级分类',
        },
        'isDisabled': {
            type: Boolean,
            default: false,
        },//是否禁止修改
        'size': {
            type: String,
            default: 'small'
        },
        'unitData': {
            type: Array,
            default() {
                return []
            }
        },//初始选中的分类ID列表
        'selIndustryId': {
            type: String,
            default: '',
        },//已选中分类的行业ID
        'limitIndustryId': {
            type: String,
            default: '',
        },//限制的行业ID
    },
    data() {
        return {
            goodsClass1: [],
            goodsClass2: [],
            goodsClass3: [],
            id1: '',
            id2: '',
            id3: '',
            category_id: '',
        }
    },
    methods: {
        getGoodsClass(pid, type, fn) {
            if (type == 1 && this.goodsClass1.length) {
                this.setClassData(type, this.goodsClass1);
                typeof fn == "function" && this.$nextTick(() => {
                    fn();
                });
            } else {
                this.sendRequest('Retail/MerCate/getChooseClassList', {
                    data: {
                        pid: pid,
                        type: type,
                        user_type: this.userType,
                        store_id: this.storeId,
                    },
                    success: (res) => {
                        if (res.status == 1) {
                            this.setClassData(type, res.data);
                            typeof fn == "function" && this.$nextTick(() => {
                                fn();
                            })
                        } else {
                            this.$message.error(res.message);
                        }
                    }
                })
            }
        },
        setClassData(type, data) {
            switch (type) {
                case 1:
                    this.goodsClass1 = [];
                    this.goodsClass1 = data;
                    this.id1 = '';
                    this.goodsClass2 = [];
                    this.id2 = '';
                    this.goodsClass3 = [];
                    this.id3 = '';
                    this.category_id = '';
                    break;
                case 2:
                    this.goodsClass2 = [];
                    this.goodsClass2 = data;
                    this.id2 = '';
                    this.goodsClass3 = [];
                    this.id3 = '';
                    this.category_id = '';
                    break;
                case 3:
                    this.goodsClass3 = [];
                    this.goodsClass3 = data;
                    this.id3 = '';
                    this.category_id = '';
                    break;
            }
        },
        changeGoodsClass1(val, fn) {
            if (!val) {
                this.goodsClass2 = [];
                this.id2 = '';
                this.goodsClass3 = [];
                this.id3 = '';
                this.category_id = '';
                if (typeof fn != "function") {
                    this.$nextTick(() => {
                        this.callback();
                    })
                }
            } else {
                if (this.getChild) {
                    this.getGoodsClass(val.id, 2, () => {
                        if (!this.goodsClass2.length) {
                            this.category_id = this.id1.id;
                        }
                        this.$nextTick(() => {
                            if (typeof fn == "function") {
                                fn();
                            } else {
                                this.callback();
                            }
                        })
                    });
                } else {
                    this.category_id = this.id1.id;
                    this.$nextTick(() => {
                        if (typeof fn == "function") {
                            fn();
                        } else {
                            this.callback();
                        }
                    })
                }

            }
        },
        changeGoodsClass2(val, fn) {
            if (!val) {
                this.goodsClass3 = [];
                this.id3 = '';
                this.category_id = '';
                if (typeof fn != "function") {
                    this.$nextTick(() => {
                        this.callback();
                    })
                }
            } else {
                this.getGoodsClass(val, 3, () => {
                    if (!this.goodsClass3.length) {
                        this.category_id = this.id2;
                    }
                    this.$nextTick(() => {
                        if (typeof fn == "function") {
                            fn();
                        } else {
                            this.callback();
                        }
                    })
                });
            }
        },
        changeGoodsClass3(val, fn) {
            if (!val) {
                this.id3 = '';
                this.category_id = '';
            } else {
                this.category_id = this.id3;
            }
            this.$nextTick(() => {
                if (typeof fn == "function") {
                    fn();
                } else {
                    this.callback();
                }
            })
        },
        callback() {
            this.$emit('update:categoryId1', this.id1 ? this.id1.id : '');
            this.$emit('update:categoryId2', this.id2);
            this.$emit('update:categoryId3', this.id3);
            this.$emit('update:categoryId', this.category_id);
            this.$emit('update:selIndustryId', this.id1 ? this.id1.industry_id : '');
            this.$emit('change', {
                category_id: this.category_id,
                industry_id: this.id1 ? this.id1.industry_id : '',
                category: [this.id1 ? this.id1.id : '', this.id2, this.id3],
            });
        },
        unitClass(data) {
            //已选中一级分类
            this.getGoodsClass(0, 1, () => {
                if (data[0]) {
                    for (let i = 0; i < this.goodsClass1.length; i++) {
                        for (let j = 0; j < this.goodsClass1[i].list.length; j++) {
                            if (data[0] == this.goodsClass1[i].list[j].id) {
                                this.id1 = {...this.goodsClass1[i].list[j]};//一级分类赋值
                                break;
                            }
                        }
                    }
                    this.category_id = this.id1.id;
                    if (data[1] && this.getChild) {
                        //已选中二级分类
                        //获取二级分类列表
                        this.changeGoodsClass1(this.id1, () => {
                            this.id2 = data[1];//二级分类赋值
                            this.category_id = this.id2;
                            if (data[2]) {
                                //已选中三级分类
                                //获取三级分类列表
                                this.changeGoodsClass2(this.id2, () => {
                                    this.id3 = data[2];//三级分类赋值
                                    this.category_id = this.id3;
                                    this.callback();
                                });
                            } else {
                                this.callback();
                                this.setClassData(3, []);
                            }
                        });
                    } else {
                        this.callback();
                        this.setClassData(2, []);
                    }
                } else {
                    this.callback();
                    this.setClassData(1, this.goodsClass1);
                }
            })
        },
        clearCategory() {
            this.unitClass(['', '', '']);
        }
    },
    mounted() {

    },
    created() {
        this.unitClass(this.unitData);
    },
    watch: {
        unitData: {
            deep: true,
            handler(n, o) {
                this.unitClass(n);
            }
        },
    }
});

/**
 * 选择商品分类（选到底）
 */
Vue.component('select-goods-category-deep', {
    template: `<el-cascader :size="size"
                        v-model="category"
                        placeholder="请选择商品分类"
                        clearable
                        ref="category"
                        :disabled="isDisabled"
                        :props="goodsClassList"
                        :class="customerClass"
                        filterable></el-cascader>`,
    props: {
        'unitCategory': {
            type: Array,
            default() {
                return []
            }
        },//初始选中的分类ID列表['1','2','3']
        'placeholder': {
            type: String,
            default: '请选择商品分类',
        },
        'customerClass': {
            type: String,
            default: '',
        },
        'userType': {
            type: Number,
            default: 1,
        },//获取分类的用户类型 1商户  2门店
        'storeId': {
            type: String,
            default: '',
        },//门店ID在userType等于2时，或者是商户选择门店商品时可能会传
        'isDisabled': {
            type: Boolean,
            default: false,
        },//是否禁止修改
        'size': {
            type: String,
            default: 'small'
        },
        'categoryId': {
            type: String,
            default: '',
        }
    },
    data() {
        let _this = this;
        return {
            category: [],//被选中的商品分类信息
            goodsClassList: {
                lazy: true,
                emitPath: true,
                lazyLoad(node, resolve) {
                    _this.handleGoodsClassList(node, resolve);
                },
            },//供选择的分类列表
            temp_category_id: [],//初始选中的分类ID列表['1','2','3']
        }
    },
    methods: {
        //处理商品分类
        handleGoodsClassList(node, resolve) {
            const {value} = node;
            let list = this.getGoodsClassList(value ? value.id : 0);
            resolve(list);
        },
        //获取商品分类
        getGoodsClassList(pid) {
            let data = [];
            $.ajax({
                url: '/index.php/Retail/MerCate/getGoodsClassify',
                type: 'post',
                data: {
                    pid: pid,
                    user_type: this.userType,
                    store_id: this.storeId,
                },
                async: false,
                success: (res) => {
                    if (res.status == 1) {
                        data = res.data.map((item) => {
                            let obj = {
                                value: item,
                                label: item.class_name,
                                leaf: item.leaf,
                            };
                            if (this.temp_category_id.length && this.temp_category_id[0].id == item.id) {
                                this.temp_category_id.splice(0, 1);
                                this.category.push(item);
                                obj.children = this.getGoodsClassList(item.id);
                            }
                            return obj;
                        });
                    }
                }
            });
            return data;
        },
    },
    created() {
        this.temp_category_id = this.unitCategory;
    },
    watch: {
        //监听分类切换
        category: {
            deep: true,
            handler(n) {
                let id = '';
                if (n && n.length) id = n[n.length - 1].id;
                this.$emit('update:categoryId', id);
                this.$emit('change', id);
            }
        },
        //监听分类切换
        categoryId(n, o) {
            if (n == '') {
                this.category = [];
                this.$refs.category.$refs.panel.clearCheckedNodes();
            }
        },
    },
});