<template>
    <span :class="label?'sel-span':''" class="ex-cascader">
        <span v-if="label">{{$dict.tranByPubMap(label)}} :</span>
        <el-cascader  v-model="selOpts" v-bind="$attrs"  :style="$attrs.elstyle" clearable :props="props" :options="filterList" @change="valchange">
            <!-- v-on="$listeners" -->
            <!-- <template slot-scope="{ node, data }" v-if="$attrs.showValue">
                <span>{{ data.name }}</span>
                <span v-if="node.isLeaf"> ({{ data.value }}) </span>
            </template> -->
        </el-cascader>
    </span>
    
</template>


<script>


export default {
    props:["label","dictCode","dictList","options","bool","number","value","isLastLv","props","isStrValue"],
    data() {
        if(this.dictList && this.dictList.map){
            this.dictList.map(item=>{
                item.name = this.$dict.tranByPubMap(item.name)
            })
        }
        if(this.options && this.options.map){
            this.options.map(item=>{
                item.name = this.$dict.tranByPubMap(item.name)
            })
        }
        var value = [];
        if(this.value){
            if(this.isStrValue){
                value = [this.value]
            }else{
                value = this.value;
            }
        }else{
            if(this.isStrValue){
                value = ""
            }else{
                value = [];
            }
        }
        return {
            selOpts: value, //需要处理转换
            showVal: [],
            optList : this.dictList || this.options || []
        }
    },
    watch:{
        dictList(newList,oldList){
            if(newList && newList.map) newList.map(item=>{
                item.name = this.$dict.tranByPubMap(item.name)
            })
            if(newList){
                this.optList = newList
            }
        },
        options(newList,oldList){
            if(newList && newList.map) newList.map(item=>{
                item.name = this.$dict.tranByPubMap(item.name)
            })
            if(newList){
                this.optList = newList
            }
        },
        dictCode(newCode){
            this.optList = this.$dict.getList(newCode,this.bool,this.number)
        },
        value(newval,oldval){
            if(this.isStrValue){
                this.selOpts = [newval];
            }else{
                this.selOpts = newval;
            }
            if(this.isLastLv){
                this.dealLastLv();
            }
        }
    },

    mounted() {
        if(this.dictCode){
            this.optList = this.$dict.getList(this.dictCode,this.bool,this.number)
        }
        this.dealLastLv();
        this.valchange(true);
    },
    computed: {
        filterList(){
            var envCfg = this.$store.state.envCfg || {};
            var list = this.optList;
            list = this.$dict.filterByEnv(list,envCfg);
            this.setShowValue(list);
            return list;
        }
    },
    methods:{
        setShowValue(list){
            if(!this.$attrs.showValue) return;
            
            list.map((item)=>{
                item.name = `${item.name}(${item.value})`
                if(item.children){
                    this.setShowValue(item.children);
                }
            })
        },
        dealLastLv(){
            if(this.isLastLv && this.selOpts && this.selOpts.length>0){
                var list = this.selOpts;
                this.selOpts = [];
                this.initList(this.optList,list,null);
            }
        },
        valchange(isInit){
            if(this.props && this.props.checkStrictly){
                this.showVal = this.selOpts;
            }else{
                this.showVal =[]
                if(this.props && this.props.multiple){
                    if(this.isLastLv){
                        this.eachLv(this.selOpts);
                    }else{
                        this.showVal = this.selOpts;
                    }
                }else if(this.selOpts.length && this.selOpts.length>0){
                    if(this.isLastLv){
                        this.showVal = [this.selOpts[this.selOpts.length-1]];
                    }else{
                        this.showVal = this.selOpts;
                    }
                }
            }
            if(this.isStrValue){
                if(this.showVal.length>0){
                    this.showVal = this.showVal[0]
                }else{
                    this.showVal = "";
                }
            }
            this.$emit('input',this.showVal);
            if(isInit===true) return;
            this.$emit('change',this.showVal);
        },
        eachLv(selOpts){
            if(!selOpts || !selOpts.map) return;
            selOpts.map(item=>{
                if(typeof(item)==="string"){
                    this.showVal.push(item);
                }else{
                    this.showVal.push(item[item.length-1]);
                }
            })
        },
        initList(optlist,list,prelist){
            optlist.map(item=>{
                var tmplist = Object.assign([],prelist)
                tmplist.push(item.value)
                if(item.children && item.children.length>0){
                    this.initList(item.children,list,tmplist);
                }else{
                    var isExists = list.find(val=>{return val == item.value});
                    if(isExists!==undefined){
                        if(this.props && this.props.multiple){
                            this.selOpts.push(tmplist);
                        }else{
                            this.selOpts=tmplist;
                            return;
                        }
                    }
                }
            })
        }
    }
}
</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>