<template>
  <!-- 选择框 -->
  <!-- <PTreeSelect v-model="singleId" :data="treeList" @change="change" /> -->
  <el-cascader
    v-model="value"
    :options="mapList(selectData)"
    :props="{
      checkStrictly: true,
      value: 'id',
      label: 'name',
      emitPath: false,
      multiple: formItemObj.isMultiple,
    }"
    @change="change"
    clearable
  ></el-cascader>
</template>

<script>
// import PTreeSelect from "@/components/meri/PTreeSelect";
export default {
  components: {
    // PTreeSelect,
  },
  props: {
    selectData: [],
    initValue: {
      type: [String, Number, Array, Object],
      default: () => {
        return "";
      },
    },
    formItemObj: {
      type: Object,
      default: () => {
        return { isMultiple: false };
      },
    },
  },
  data() {
    return {
      value: this.initValue,
      treeList: [{ id: "1", name: "11" }],
    };
  },
  mounted() {
    console.log(this.formItemObj);
  },
  methods: {
    openNode() {
      console.log(111);
    },
    change(item) {
      this.$emit("change", item);
      // this.$emit("change", result);
    },
    mapList(list) {
      let _list = list.map((i) => {
        return {
          id: i.code,
          name: i.name,
          parentCode: i.parentCode,
        };
      });
      let tree = this.listToTree(_list);
      return tree;
    },
    listToTree(list) {
      let map = {};
      let result = [];
      // 存映射，方便取值
      list.forEach((el) => {
        map[el.id] = el;
      });
      list.forEach((item) => {
        const father = map[item.parentCode];
        if (father) {
          (father.children || (father.children = [])).push(item);
        } else {
          result.push(item);
        }
      });

      return result;
    },
  },
  watch: {
    value: {
      handler(val) {
        console.log(val);
      },
      deep: true,
    },
  },
};
</script>
