<style>
    .labelPopup .el-input__inner {
        border: 1px solid #DCDFE6 !important;
    }

    .labelPopup .unchecked {
        margin-right: 10px;
        margin-top: 5px;
        cursor: pointer;
        padding: 0 10px;
        font-size: 14px;
        font-weight: 400;
        height: 28px;
        line-height: 28px;
        border-radius: 4px;
        background: #f6f6f6;
    }

    .labelPopup .select {
        color: #3c66ee;
        background-color: #edf2fd;
    }
    .labelPopup .el-tag{
        color: #3470ff;
        background: #edf2fd;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 400;
        color: #3470ff;
        height: 26px;
        line-height: 26px;
    }
</style>

<template>
    <div style="background: transparent;" class="labelPopup">
        <el-dialog title="客户标签" :visible.sync="isscreen" width="560" :close-on-click-modal='false'
            :before-close="goclose">

            <div style="max-height: 378px;overflow-y: auto;border-bottom: 1px solid #d7d7d7;">
                <div v-for="(x,y) in LableList" :key="y" style="padding-bottom: 15px;">
                    <div style="color: #606266;font-size: 14px;font-weight: 700;">{{x.Name}}</div>
                    <div style="display: flex;flex-wrap: wrap;">
                        <div v-for="(item,index) in x.ChildList" :key="index" class="unchecked"
                            :class="{'select':item.chek==true}" @click="changechek(y,index)">{{item.Name}}</div>
                    </div>
                </div>
            </div>
            <div style="display: flex;flex-wrap: wrap;max-height: 110px;overflow-y: auto;margin: 10px 0;">
                <el-tag
                    v-for="(tag,tagindex) in selectList"
                    style="margin-right: 10px;margin-bottom: 10px;"
                    :key="tagindex"
                    closable
                    @close= "getclose(tag,tagindex)"
                    >
                    {{tag.Name}}
                </el-tag>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="goclose">取 消</el-button>
                <el-button type="primary" @click="determine">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    import {
        getWeChatLableList
    } from '../../../../api/system/wechat';
    export default {
        props: {
            list:{
                type: Array
            }
        },
        components: {

        },
        name: "customFilter",
        data() {
            return {
                isscreen: true,
                LableList: [],
                selectList: [],
            }
        },
        created() {
            this.getLableList()
            this.selectList = JSON.parse(JSON.stringify(this.list))
        },
        methods: {
            goclose() {
                this.$emit('close')
            },
            getLableList() {
                getWeChatLableList({}).then(res => {
                    if (res.Code == 1) {
                        this.LableList = res.Data;
                        this.LableList.forEach(x => {
                            if (x.ChildList.length > 0) {
                                x.ChildList.forEach(j => {
                                    j.chek = false;
                                    for (let index = 0; index < this.list.length; index++) {
                                        const element = this.list[index];
                                        if(element.Id== j.Id){
                                            j.chek = true;
                                            break
                                        }
                                    }
                                })
                            }

                        })
                    }
                }).catch(() => {

                })

            },
            changechek(y, index) {//改变标签的状态
                this.LableList[y].ChildList[index].chek = !this.LableList[y].ChildList[index].chek;
                this.$forceUpdate();
                this.getselectList()
            },
            getselectList() {
                this.selectList = [];
                this.LableList.forEach(x => {
                    if (x.ChildList.length > 0) {
                        x.ChildList.forEach(j => {
                            if(j.chek == true){
                                this.selectList.push(j)
                            }
                        })
                    }

                })
            },
            getclose(tag,index){
                let Id = tag.Id
                for(let i=0;i<this.LableList.length;i++){
                    let ChildList = this.LableList[i].ChildList
                    if(ChildList.length>0){
                        for(let j=0;j<ChildList.length;j++){
                           if(Id == ChildList[j].Id){
                               this.LableList[i].ChildList[j].chek = false
                               this.selectList.splice(index,1)
                               this.$forceUpdate();
                               return
                           }
                        }
                    }
                }
            },
            determine(){//确定提交
                this.$emit('submit',this.selectList)
            }





        }
    }

</script>