<template>
  <!-- <a-cascader v-model="selected" :style="{width:'80%'}" :options="options" v-if="changeOnSelect" :changeOnSelect="changeOnSelect" :show-search="{ filter }" slot-scope="{labels, selectedOptions}" expand-trigger="hover" placeholder="请选择学科代码" @change="onChange" /> -->
  <a-cascader v-model="selected" :style="{width:'80%'}" :options="options" :changeOnSelect="changeOnSelect" :show-search="{ filter }" :display-render="displayRender" expand-trigger="hover" placeholder="请选择学科代码" @change="onChange" />
</template>
<script>
//import { specList, getSpecArray } from "@/views/components/common/config"
export default {
  name: "cascaderSelect",
  data () {
    return {
      options: [],
      selected: null,
      specArray: [],
    };
  },
  props: {
    value: {
      type: String,
      default () {
        return null
      }
    },
    changeOnSelect: {
      type: Boolean,
      default () {
        return false
      }
    },
  },
  created () {
    this.loadSpecList()
    //this.selected = getSpecArray(this.value)
    // this.$emit("change");
    // this.$emit("input", this.selected)
  },
  methods: {
    loadSpecList () {
      this.$api.parameter.getKnowledgeInfoList2().then(({ data = {} }) => {
        if (data) {
          this.options = data
          this.loadSpecArray()
          this.loading = true
        }
      })
    },
    loadSpecArray () {
      this.$api.parameter.getSpecArray().then(({ data = {} }) => {
        if (data) {
          this.specArray = data
          if (!!this.value)
            this.selected = this.getSpecInfo(this.value)
        }
      })
    },
    getSpecInfo (key) {
      console.log(this.specArray, this.value,1)
      let newArray = this.specArray.filter(
        function (el) {
          return el.key == key
        }
      );
      console.log(this.specArray, newArray, this.value,2)
      if (!!newArray && newArray.length > 0)
        return [newArray[0].ppkey, newArray[0].pkey, newArray[0].key]
      else
        return null
    },
    onChange (value, selectedOptions) {
      this.selected = value
      if (!!this.selected && this.selected.length > 0) {
        var len = this.selected.length - 1
        this.$emit("input", this.selected[len])
      } else
        this.$emit("input", '')
      this.$emit("change");
    },
    displayRender ({ labels }) {
      return labels[labels.length - 1];
    },
    filter (inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    },
  },
  watch: {
    value: {
      handler (value) {
        if (!!value) {
          // this.selected = getSpecArray(this.value)
          // if (!!this.selected && this.selected.length == 3) {
          //   this.$emit("input", this.selected[2])
          //   this.$emit("change");
          // }
        }
      },
    },
  }
};
</script>