<template>
  <div style=" width:auto; display:inline-block !important; display:inline;">
    <a-select :style="{width: width? width+ 'px':'80%'}" v-model="selected" @change="paraChange($event)" :key="0">
      <a-select-option v-for="item in selectArray" :key="item.key" :value="item.key" select>{{ item.title }}</a-select-option>
    </a-select>
  </div>
</template>
<script>
// 用法 <para-select  v-model="formData.projClass"  :typeId="52" />
export default {
  name: "paraSelect",
  data () {
    return {
      selectArray: [],
      selected: "",
      defaultValue: {
        title: "--请选择" + this.title + "--",
        key: "",
        description: "",
        selected: true,
        disabled: true,
      },
    };
  },
  props: {
    value: {
      type: String,
      default () {
        return null
      }
    },
    typeId: {
      type: Number,
      default () {
        return null
      }
    },
    title: {
      type: String,
      default () {
        return ''
      }
    },
    width: {
      type: Number,
      default () {
        return null
      }
    },
  },
  created () {
    this.loadSelected()
  },
  methods: {
    loadSelected () {
      let pars = { typeId: this.typeId }
      this.$api.parameter.getParameterList(pars).then(({ data = { data } }) => {
        if (data) {
          this.selectArray = data.data
          this.selectArray.unshift(this.defaultValue)
          if (!!this.value) {
            this.loadState = true
            this.selected = this.value
          }
          else
            this.selected = ""
        }
      }).catch(() => { })
    },
    paraChange (value) {
      this.$emit("input", value);
      var newArr = this.selectArray.filter(x => x.key == value);
      if (!!newArr && newArr.length > 0) {
        var text = !!value ? newArr[0].title : ''
        this.$emit('changeTitle', text)
      }
      this.$emit("change");
    }
  },
  watch: {
    value: {
      handler (value) {
        if (!!value)
          this.selected = value
      },
    }
  }
};
</script>