<template>
  <Cascader :data="categoryList" :value="handleValue" change-on-select @on-change="selectChange"></Cascader>
</template>

<script>
import ApiService from "service/api";

export default {
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    let self = this;
    return {
      handleValue: self.value.map(i => i.value),
      categoryList: []
    };
  },
  created() {
    this.api = new ApiService();
    this.getSortList();
  },
  methods: {
    getSortList() {
      this.api.getSortList().then(result => {
        this.categoryList = result.list.map(i => {
          let sortItem = {
            value: i.id,
            label: i.sortName
          };

          if (i.subList) {
            sortItem.children = i.subList.map(s => {
              return {
                value: s.id,
                label: s.sortName
              };
            });
          }

          return sortItem;
        });
      });
    },
    selectChange(val) {
      const len = val.length;

      const max = val[0] || "";
      const mid = val[1] || "";

      let maxItem = this.categoryList.find(i => i.value == max) || {};
      let midItem =
        (maxItem &&
          maxItem.children &&
          maxItem.children.find(i => i.value == mid)) ||
        {};

      this.$emit("input", [
        { value: max, label: maxItem.label || "" },
        { value: mid, label: midItem.label || "" }
      ]);
    }
  },
  watch: {
    value(newValue) {
      this.handleValue = newValue.map(v => v.value);
    }
  }
};
</script>

<style>

</style>