<template>
  <div style="width: auto; display: inline;">
    <a-select :style="{width: width? width+ 'px':'80%'}" v-model="selected[key]" v-for="(arry, key) in selectArray" @focus="position = key" @change="selectChange($event, key)" :key="key" :disabled="disable && disabled[key]">
      <a-select-option v-for="item in arry" :key="item.key" :value="item.key" select>{{ item.title }}</a-select-option>
    </a-select>
  </div>
</template>
<script>
// 用法 <unit-tree-select v-model="formData.treeCode" />
export default {
  name: "UnitTreeSelect",
  data () {
    return {
      unitList: [],
      selectArray: [],
      selected: [],
      disabled: [],
      defaultValue: {
        title: "--请选择--",
        key: "",
        description: "",
        selected: true,
        disabled: true,
      },
      loadState: false,
    };
  },
  props: {
    value: {
      type: String,
      default: () => {
        return ''
      }
    },
    unitType: {
      type: Number,
      default: () => {
        return null
      }
    },
    defaultLength: {
      type: Number,
      default: () => {
        return 5
      }
    },
    title: {
      type: String,
      default () {
        return ''
      }
    },
    disable: {
      type: Boolean,
      default () {
        return true
      },
    },
    width: {
      type: Number,
      default () {
        return 180
      }
    },
  },
  created () {
    this.loadSelectValue(this.value, 1)
  },
  methods: {
    loadSelectValue (value, type) {
      if (!!!value)
        value = ''
      else
        this.loadState = true
      if (this.unitList.length == 0) {
        this.$api.unit.getTreeCodeListByType({ unitType: this.unitType }).then(({ data = {} }) => {
          if (data) {
            this.unitList = data
            this.selectArray = []
            this.selected = []
            this.disabled = []
            this.loadDropDownList(value, type)
          }
        }).catch(() => { this.loading = false });
      } else {
        this.selectArray = []
        this.selected = []
        this.disabled = []
        this.loadDropDownList(value, type)
      }
    },
    loadDropDownList (code, type) {
      let data = this.unitList.filter((item) => item.key.substring(0, item.key.length - this.defaultLength) === code)
      if (data.length > 0) {
        data.unshift(this.defaultValue)
        this.selectArray.unshift(data)
        if (code.length >= this.defaultLength) {
          this.selected.unshift(code)
          if (code.length == this.value.length) {
            this.disabled.unshift(false)
          } else {
            this.disabled.unshift(true)
          }
        }
        if ((!!this.value && this.value.length == code.length) || !!!this.value) {
          this.selected.push('')
          this.disabled.unshift(true)
        }
      } else {
        this.selected.push(code)
        this.disabled.unshift(true)
      }
      if (code.length >= this.defaultLength) {
        this.loadDropDownList(code.substring(0, code.length - this.defaultLength), type);
      }
    },
    treeDropDownSelect (code, index) {
      let allArrCount = this.selectArray.length;
      for (let i = index + 1; i < allArrCount; i++) {
        this.selectArray.pop();
        this.selected.pop();
        this.disabled.pop();
      }
      if (code) {
        let unitArr1 = this.unitList.filter((item) => item.key.substring(0, item.key.length - this.defaultLength) === code);
        if (unitArr1.length > 0) {
          unitArr1.unshift(this.defaultValue);
          this.selectArray.push(unitArr1);
          this.selected.push("");
          this.disabled.push(false);
        }
      }
    },
    selectChange (value, key) {
      this.treeDropDownSelect(value, key);
      let allCount = this.selected.length;
      let treeCode = "";
      for (let i = allCount - 1; i >= 0; i--) {
        if (this.selected[i] != "") {
          treeCode = this.selected[i];
          break;
        }
      }
      this.$emit("input", treeCode);
      this.$emit("change");
    },
  },
  watch: {
    value: {
      handler (value) {
        if (!!value && !this.loadState) {
          this.loadSelectValue(value, 2)
          this.loadState = true
        }
      },
    },
  }
}
</script>