<template>
  <div style="width:auto;display:inline-block !important; display:inline;">
    <a-select mode="tags" v-model="selected" style="width: 400px" @change="onChange" showArrow allowClear>
      <a-select-opt-group v-for="item in selectArray" :key="item.key">
        <span slot="label">
          <a-icon type="bars" />{{ item.title }}
        </span>
        <a-select-option v-for="arr in item.children" :key="arr.key" :value="arr.key">
          {{ arr.title }}
        </a-select-option>
      </a-select-opt-group>
    </a-select>
  </div>
</template>
<script>
// 用法 <spec-select  v-model="formData.projClass" />
export default {
  name: "SpecSelect",
  data () {
    return {
      selectArray: [],
      selected: [],
      loadState: false,
    };
  },
  props: {
    value: null,
    width: {
      type: Number,
      default () {
        return 180
      }
    }
  },
  created () {
    this.load(this.value)
  },
  methods: {
    load (value) {
      if (this.selectArray.length > 0) {
        this.selected = value
      } else {
        this.$api.parameter.getArrayListByType({ typeId: 41 }).then(({ data = {} }) => {
          if (data) {
            this.selectArray = data
            this.selected = value
          }
        }).catch(() => { })
      }
    },
    onChange () {
      if (this.selected.length > 3) {
        this.$message.error('最多只能选三个专业')
        this.selected = this.selected.splice(0, 3)
      }
      this.$emit("input", this.selected);
      this.$emit("change");
    },
  },
  watch: {
    value: {
      handler (value) {
        if (!this.loadState) {
          this.load(value)
          this.loadState = true
        }
      }
    },
  },
};
</script>