<template>
  <div style=" width:auto; display:inline-block !important; display:inline;z-index:100">
    <a-select :style="{width: width + 'px'}" v-model="parSelected" @change="parentChange($event)" :key="0">
      <a-select-option v-for="item in parArray" :key="item.key" :value="item.key" select>{{ item.title }}</a-select-option>
    </a-select>
    <a-select :style="{width: width + 'px'}" v-model="selected" @change="childChange($event)" :key="1">
      <a-select-option v-for="item in chArray" :key="item.key" :value="item.key" select>{{ item.title }}</a-select-option>
    </a-select>
  </div>
</template>
<script>
export default {
  //用法  <para-multi-select v-model="formData.projClass"  :typeId="52" />
  name: "paraMultiSelect",
  data () {
    return {
      parArray: [],
      chArray: [],
      parSelected: '',
      selected: '',
      defaultAll: {
        title: "--请选择" + this.title + "--",
        key: "",
        children: [{
          title: "--请先选择上级-",
          key: "",
        }]
      },
      loading: false
    };
  },
  props: {
    value: {
      type: String,
      default () {
        return null
      }
    },
    typeId: {
      type: Number,
      default () {
        return 0
      }
    },
    width: {
      type: Number,
      default () {
        return 180
      }
    },
    title: {
      type: String,
      default () {
        return ''
      }
    },
  },
  created () {
    this.load(this.value)
  },
  methods: {
    async load (value) {
      if (!!!this.parArray || this.parArray.length == 0) {
        this.parArray = await this.$store.dispatch('cache/getDictByType', 6)
        this.parArray.unshift(this.defaultAll)
        this.chArray = this.parArray[0].children
        this.parSelected = ''
        this.selected = ''
      }
      if (!!value) {
        var show = this.getParIndex(this.parArray, value)
        this.chArray = this.parArray[show].children
        this.parSelected = this.parArray[show].key
        this.selected = value
      }
    },
    parentChange (value) {
      this.childArray = [];
      this.childArray.unshift(this.defaultChild)
      this.childValue = ''
      if (value != '') {
        let pars2 = { typeId: this.typeId, parentId: value };
        this.$api.parameter.getParameterList(pars2).then(({ data = {} }) => {
          if (data) {
            this.childArray = data.data
            this.childArray.unshift(this.defaultChild)
          }
        }).catch(() => { });
      }
      else {
        this.childArray = [this.defaultChild]
        this.childValue = ''
        this.$emit("input", null);
        this.$emit("change");
      }
      this.$emit('parentChange', value)
      this.$emit("change");
    },
    childChange (value) {
      this.$emit("input", value);
      var newArr = this.childArray.filter(x => x.key == value);
      if (!!newArr && newArr.length > 0) {
        var text = !!value ? newArr[0].title : ''
        this.$emit('changeTitle', text)
      }
      this.$emit("change");
    },
    getParIndex (list, value) {
      var show = 0
      if (!!list && list.length > 0) {
        for (var i = 0; i < list.length; i++) {
          for (var j = 0; j < list[i].children.length; j++) {
            if (list[i].children[j].key == value) {
              show = i
              break
            }
          }
        }
      }
      return show
    }
  },
  watch: {
    value: {
      handler (value) {
        if (!!value && !this.loading) {
          this.loading = true
          this.load(value)
        }
      },
    },
  }
}
</script>