<template>
  <div style=" width:auto; display:inline-block !important; display:inline;">
    <a-select :style="{width: width + 'px'}" v-model="selected" @change="selectChange" :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>

export default {
  name: 'parentSelect',
  data () {
    return {
      selectArray: [],
      selected: '',
      defaultValue: {
        title: "--请选择--",
        key: "",
        description: "",
        selected: true,
        disabled: true,
      }
    }
  },
  props: {
    value: {
      type: String,
      default () {
        return null
      }
    },
    isAll: {
      type: Boolean,
      default () {
        return false
      },
    },
    width: {
      type: Number,
      default () {
        return 180
      }
    },
  },
  created () {
    this.getParentList()
  },
  methods: {
    getParentList () {
      this.$api.parameter.getParentList().then(({ data = {} }) => {
        if (data) {
          this.selectArray = data
          this.selectArray.unshift(this.defaultValue)
          if (!!this.value) {
            this.selected = this.value + ''
          } else {
            this.selected = ''
          }
          this.$emit("input", this.selected)
        }
      }).catch(() => { })
    },
    selectChange (value) {
      this.$emit("input", value);
      this.$emit("change");
    },
  },
  watch: {
    value: {
      handler (value) {
        this.selected = value + ''
        this.$emit("input", this.selected)
      },
    },
  }
}
</script>