<template>
    <span :class="label?'sel-span':''" style="position:relative"  @hook:mounted="cancalReadOnly" ref="select">
        <span v-if="label">{{$dict.tranByPubMap(label)}} :</span>
        <i v-if="isGoldFlag && $store.state.envCfg.goldBet!=1" class="fa fa-ge" 
                :title="`该字段开启金币倍率转换,显示值为: 原值*${$store.state.envCfg.goldBet}`"
                style="font-size:6px;color:#66b1ff;position:absolute;left:-13px;top:-3px;"></i>
           
        <el-select v-if="!isCasCader" v-bind="$attrs" v-on="$listeners" :style="$attrs.elstyle" clearable filterable>
            <el-option v-if="canEmpty" label="" value=""/>
            <slot></slot>
            <el-option v-for="(item,idx) in filterList" :key="idx" :label="showValue?getLabelName(item)+'('+item.value+')':getLabelName(item)" :value="item.value"></el-option>
        </el-select>
        
        <exCascader v-else v-bind="$attrs" v-on="$listeners" :style="$attrs.elstyle" clearable :filterable="true"
            :dictList="filterList"
            :show-all-levels="false" size="mini"
            :props="{ multiple: $attrs.multiple?true:false ,label:'name', expandTrigger: 'hover'}" collapse-tags   :isStrValue="$attrs.multiple?false:true"  :isLastLv="true" :showValue="this.showValue"></exCascader>

    </span>
    
</template>


<script>
 

export default {
    props:["dictCode",'canEmpty',"label","bool","number","dictList","showValue","goldFlag","handleDictCode","dataInfo"],
    data() {
        if(this.dictList && this.dictList.map){
            this.dictList.map(item=>{
                item.name = this.$dict.tranByPubMap(item.name)
                if(this.goldFlag){
                    item.goldFlag = true;
                }
            })
        }
        return {
            optList: this.dictList || [],
            isGoldFlag: this.goldFlag?true:false,
            isCasCader : false,
            curCode : this.dictCode
        }
    },
    watch:{
        dictList(newList,oldList){
            if(newList && newList.map) newList.map(item=>{
                item.name = this.$dict.tranByPubMap(item.name)
                if(this.goldFlag){
                    item.goldFlag = true;
                }
            })
            this.optList = newList || []
        },
        dictCode(newCode){
            this.curCode = newCode;
            this.optList = this.$dict.getList(newCode,this.bool,this.number)
        },
        dataInfo:{
            handler(newData){
                if(this.handleDictCode){
                    var newCode = this.handleDictCode(newData);
                    if(typeof(newCode)=== "string"){
                        if(!newCode || newCode==this.curCode) return;
                        this.optList = this.$dict.getList(newCode,this.bool,this.number);
                        
                        this.curCode = newCode;
                        this.$emit('input',"");
                        this.$emit('change',"");
                    }else if(typeof(newCode)=== "object"){
                        var newList = newCode;
                        if(!newList.map || newList==this.optList) return;
                        if(newList && newList.map) newList.map(item=>{
                            item.name = this.$dict.tranByPubMap(item.name)
                            if(this.goldFlag){
                                item.goldFlag = true;
                            }
                        })
                        this.curCode="";
                        this.$emit('input',"");
                        this.$emit('change',"");
                        this.optList = newList || []
                    }
                }else{
                    return;
                }
            },
            deep: true
        }
    },

    mounted() {
        var code = this.dictCode;
        var handleRet = null;
        if(this.handleDictCode){
            handleRet = this.handleDictCode(this.dataInfo);
        }
        if(handleRet && typeof(handleRet)==="string"){
            code = handleRet;
        }else if(handleRet && typeof(handleRet)==="object"){
            this.optList =handleRet;
            return;
        }
        if(code=="channel"){
            var list = this.$dict.getList("channelTree");
            if(list.length>0){
                this.isCasCader = true;
                this.optList = list;
                return;
            }
        }
        if(code=="dbdict.scence"){
            var list = this.$dict.getList("sceneTree");
            if(list.length>0){
                this.isCasCader = true;
                this.optList = list;
                return;
            }
        }
        this.curCode = code;
        if(code){
            this.optList = this.$dict.getList(code,this.bool,this.number)
        }
    },
    computed: {
        filterList(){
            var envCfg = this.$store.state.envCfg || {};
            var list = this.optList;
            list = this.$dict.filterByEnv(list,envCfg);
            list.map(item=>{
                if(item.goldFlag) this.isGoldFlag = true;
            })
            return list;
        }
    },

    methods: {
        getLabelName(item){
            if(this.$store && this.$store.state.lang){
                return  item["name"+this.$store.state.lang] || item.name;
            }else{
                return item.name;
            }
        },
                 //取消只读
        cancalReadOnly(onOff){
            this.$nextTick(()=>{
            if(!onOff){
                const {select} =this.$refs;
                const input =select.$el.querySelector('.el-input__inner')
                input.removeAttribute('readonly')
            }
            })
        },
    }
}
</script>

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