<template>
    <el-select v-model="dictVal"
        :placeholder="placeholder"
        @change="selectChange"
        :size="size"
        :clearable="clearable"
        filterable
        :collapse-tags="iscollapse"
        :multiple="ismult"
        :disabled="disabled"
        :popper-append-to-body="true"
        transfer="true"
        >
        <el-option
            v-for="(item, index) in dictList"
            :key="index"
            :label="item[dictkey]"
            :value="item[dictvalue]" >
        </el-option>
    </el-select>
</template>

<script>
import commonSelectList from '@/common/commonSelectList.js'
export default {
  name: 'common-select',
  mounted(){
    // this.getDictData();
  },
  methods: {
    // 获取下拉框数据
    async getDictData(){
      this.dictList = await commonSelectList.dictDataGet(this, this.dictType);
    },
    // 下拉框改变事件
    selectChange(val){
      if(this.ismult){ //多选
        let arr = [];
        //当前字段存储的是字典的 key, 那么当前字段 对应 的字段 id，存储的就是 字典 的 vaule
        this.dictVal.forEach(item=>{
          for(let i=0; i< this.dictList.length; i++){
            if(item == this.dictList[i][this.dictvalue]){
              arr.push(this.dictList[i]);
              // arr.push(this.dictList[i].vaule);
              break;
            }
          }
        })
        this.$emit( 'selectChange', arr, this.index, this.dictVal);
      }else{
        let item = {};
        for(let i=0; i<this.dictList.length; i++){
          if(this.dictList[i][this.dictvalue] == val){
            item = this.dictList[i];
            break;
          }
        }
        this.$emit( 'selectChange', item, this.index);
      }
    }
  },
  props: {
      value: {
          // type: String
      }, //接受外部v-model传入的值
      dictType: {//字典标识
        type: String,
        default: '',
        required: true,
      },
      dictkey: { //字典展示的字段
        type: String,
        default: 'key',
        required: false,
      },
      dictvalue: { //字典存储的字段
        type: String,
        default: 'vaule',
        required: false,
      },
      index: { //使用数组动态生成组件时，当前组件所处索引位置
        type: Number,
        default: null,
        required: false,
      },
      paramval: {
        //依赖查询参数值
      },
      size: {
        type: String,
        default: 'mini'
      },
      placeholder:{
        type: String,
        default: '请选择'
      },
      ismult: {
        type: Boolean,
        default: false
      },
      iscollapse: {//多选时是否将选中值按文字的形式展示
        type: Boolean,
        default: false
      },
      disabled:{
        type: Boolean,
        default: false
      },
      clearable: {
        type: Boolean,
        default: true
      },
      selectlist: {//下拉框数据源
        type: Array,
        default: () => []
      },
  },
  watch:{
      value(newVal, oldVal){
        this.dictVal = newVal;
      },
      dictVal(newVal, oldVal){
        if(newVal!= oldVal) {
          this.$emit("input", newVal);//向外部发送事件通知
        }
      },
      paramval: {
       async handler(newVal){
          if(newVal){
            if(this.dictList.length){
              this.dictVal = '';
            }
            this.dictList = await commonSelectList.initDataValuePost(this, this.dictType, newVal);
            if(this.dictList.length == 1){
              this.dictVal = this.dictList[0][this.dictvalue];
              this.$emit( 'selectChange', this.dictList[0], this.index);
            }
          }else{
            this.dictList = await commonSelectList.dictDataGet(this, this.dictType);
          }
        },
        immediate: true,
      },
      selectlist(newVal){
        if(newVal.length){
           this.dictList = newVal;
        }
      },
  },
  data() {
    return {
      dictList: [],
      dictVal: this.value, //使用 value prop 属性的值，作为初始值
    }
  },

}
</script>
