<template>
    <span :class="label?'sel-span':''">
        <span v-if="label">{{$dict.tranByPubMap(label)}} :</span>
        <el-checkbox-group  v-bind="$attrs" v-on="$listeners" :style="$attrs.elstyle" clearable>
            <slot></slot>
            <template v-if="type!='checkbox'">
                <el-checkbox-button v-for="(item,idx) in filterList" :key="idx" :label="item.value">{{getLabelName(item)}}</el-checkbox-button>
            </template>
            <template v-else>
                <el-checkbox v-for="(item,idx) in filterList" :key="idx" :label="item.value">{{getLabelName(item)}}</el-checkbox>
            </template>
        </el-checkbox-group>
    </span>
    
</template>


<script>


export default {
    props:["dictCode","label","type","bool","number","dictList"],
    data() {
        if(this.dictList && this.dictList.map){
            this.dictList.map(item=>{
                item.name = this.$dict.tranByPubMap(item.name)
            })
        }
        return {
            optList: this.dictList || []
        }
    },
    watch:{
        dictList(newList,oldList){
            if(newList && newList.map) newList.map(item=>{
                item.name = this.$dict.tranByPubMap(item.name)
            })
            this.optList = newList || []
        },
        dictCode(newCode){
            this.optList = this.$dict.getList(newCode,this.bool,this.number)
        }
    },

    mounted() {
        if(this.dictCode){
            this.optList = this.$dict.getList(this.dictCode,this.bool,this.number)
        }
    },
    computed: {
        filterList(){
            var envCfg = this.$store.state.envCfg || {};
            var list = this.optList;
            return this.$dict.filterByEnv(list,envCfg);
        }
    },

    methods: {
        getLabelName(item){
            if(this.$store && this.$store.state.lang){
                return  item["name"+this.$store.state.lang] || item.name;
            }else{
                return item.name;
            }
        },
    }
}
</script>

<style lang="less" scoped>
    .sel-span{
        display: inline-block;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 5px;
        >span{
            display: inline-block;
            white-space: nowrap;
            color:gray;
            font-size: 15px;
        }
    }
</style>