<template>
  <div style=" width:auto; display:inline-block !important; display:inline;z-index:100">
    <a-select :style="{width: width + 'px'}" v-model="parValue" @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="childValue" @change="childChange($event)" :key="1">
      <a-select-option v-for="item in childArray" :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 {
      loadState: false,
      parArray: [],
      parValue: '',
      defaultParent: {
        title: "--请选择" + this.title + "--",
        key: "",
        description: "",
        selected: true,
        disabled: true,
      },
      childArray: [],
      childValue: '',
      defaultChild: {
        title: "--请选择上级-",
        key: "",
        description: "",
        selected: true,
        disabled: true,
      },
    };
  },
  props: {
    value: {
      type: String,
      default () {
        return null
      }
    },
    typeId: null,
    width: {
      type: Number,
      default () {
        return 180
      }
    },
    title: {
      type: String,
      default () {
        return ''
      }
    },
  },
  created () {
    this.initiData(this.value)
  },
  methods: {
    initiData (value) {
      if (this.parArray.length == 0) {
        this.loadParentArray()
      }
      if (!!value) {
        this.loadState = true
        this.loadChildArray(value)
      }
    },
    loadParentArray () {
      let pars1 = { typeId: this.typeId }
      this.$api.parameter.getParentListByType(pars1)
        .then(({ data = {} }) => {
          this.parArray = data
          this.parArray.unshift(this.defaultParent)
          if (this.childArray.length == 0) {
            this.childArray.unshift(this.defaultChild)
          }
        })
        .catch(() => { });
    },
    loadChildArray (value) {
      let pars2 = { typeId: this.typeId, id: value };
      this.$api.parameter.getParameterList(pars2).then(({ data = {} }) => {
        if (data) {
          this.childArray = data.data
          this.childArray.unshift(this.defaultChild)
          this.parValue = data.parent
          this.childValue = value
        }
        else {
          this.childArray.unshift(this.defaultChild)
        }
      }).catch(() => { });
    },
    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('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");
    }
  },
  watch: {
    value: {
      handler (value) {
        if (this.loadState) {
          return
        }
        else if (value) {
          this.initiData(value)
          this.loadState = true
        }
      },
    },
  }
}
</script>