<template>
  <div>
    <el-select
      class="main-select-tree"
      ref="selectTree"
      v-model="selectValue"
      name="option 1"
      style="width: 100%"
    >
      <!-- otion 1 -->
      <el-option
        v-for="item in optionData(menuOptions)"
        :label="item.label"
        :value="item.value"
        style="display: none"
      />

      <el-tree
        class="main-select-el-tree"
        ref="selectelTree"
        :data="menuOptions"
        :props="treeProps"
        highlight-current
        @node-click="handleNodeClick"
        :expand-on-click-node="expandOnClickNode"
        default-expand-all
      />

      <!-- option 2 -->
      <!-- <el-option style="height: 100%; padding: 0;" value="">
            <el-tree
                    class="main-select-el-tree"
                    ref="selectelTree" 
                    :data="cityData"
                    :props='treeProps'
                    @node-click="handleNodeClick"
                    :expand-on-click-node="expandOnClickNode"
                    highlight-current
                    default-expand-all
                    style="font-weight: normal;"/>
          </el-option> -->
    </el-select>
  </div>
</template>
    
  <script>
export default {
  props: {
    menuOptions: {
      type: Array,
      required: true,
    },
    editData: {
      type: Object,
      required: true,
    },
  },
  watch: {
    editData: {
      handler(newVal, oldVal) {
        console.log(newVal,11111111);
        this.selectValue = newVal.parentId;
      },
      immediate: true,
    },
  },
  data() {
    return {
      selectValue: "",
      expandOnClickNode: true,
      options: [],
      treeProps: {
        children: "children",
        label: "areaName",
      },
      cityData: [
        {
          id: 1,
          label: "重庆",
          children: [
            {
              id: 2,
              label: "渝北区",
            },
          ],
        },
        {
          id: 3,
          label: "北京",
          children: [
            { id: 4, label: "海淀区" },
            { id: 5, label: "朝阳区" },
          ],
        },
        {
          id: 6,
          label: "四川",
          children: [
            {
              id: 7,
              label: "成都",
              children: [{ id: "8", label: "成华区" }],
            },
          ],
        },
      ],
    };
  },

  methods: {
    /**
     * 树形转平面的迭代方法
     * option 1的el-option需要此方法绑定数据
     */
    optionData(array, result = []) {
      array.forEach((item) => {
        result.push({ label: item.areaName, value: item.areaId });
        if (item.children && item.children.length !== 0) {
          this.optionData(item.children, result);
        }
      });
      return JSON.parse(JSON.stringify(result));
    },

    // 点击节点的响应
    handleNodeClick(node) {
      this.selectValue = node.areaName;
      this.$refs.selectTree.blur();
      console.log(node.areaName, node);
      this.$emit("selectValue", node.areaId);
    },
  },
};
</script>
   
  <style>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}

.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
</style>