<template>
  <el-select v-model="s_model" :value="s_model" :placeholder="placeholder" :clearable="clearable" :disabled="disabled" :readonly='readonly'
             @change="selectChange" filterable>
    <el-option
            v-if="isAll"
            :value="null"
            label="全部">
    </el-option>
    <el-option
            v-for="item in dictionaryList"
            :key="item.paramCode"
            :label="item.paramData"
            :value="item.paramCode">
    </el-option>
  </el-select>
</template>

<script>
  import { DictionaryQuery } from '../../api/sys/dic'
  export default {
    name: "custom-select",
    data() {
      return {
        dictionaryList: [],
        s_model: ""
      };
    },
    methods: {
      init(value) {
        this.s_model = value;
      },
      selectChange(val) {
        this.$emit('change', val)
      },
      getData(typeName) {
       DictionaryQuery({
         typeName
       }).then(res => {
          this.dictionaryList = res.paramDataList
        })
      },
      initDictionaryList() {
          this.getData(this.typeName)
      }
    },
    watch: {
      value: function(val, oldVal) {
        if (val !== oldVal) {
          this.init(val);
        }
      },
      //判断下拉框的值是否有改变
      s_model(val, oldVal) {
        if (val !== oldVal) {
          this.$emit("input", this.s_model);
        }
      },
    },
    props: {
      isAll:{type: Boolean, default: false},
      placeholder: { type: String },
      typeName: { type: String },
      value:{type:String},
      clearable: { type: Boolean, default: true },
      disabled: { type: Boolean, default: false },
      readonly: { type: Boolean, default: false },
    },
    mounted() {
      //远程请求回来的数据
      this.initDictionaryList()
      this.s_model = this.value;
    }
  };
</script>


