<template>
  <div>
//全選選擇框
    <el-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
    >
      全選
    </el-checkbox>
    <div style="margin: 15px 0" />
//可選擇層級(jí)框
    <el-tree
      ref="tree"
      default-expand-all //是否默認(rèn)展開(kāi)所有節(jié)點(diǎn) 默認(rèn)是false
      show-checkbox      //節(jié)點(diǎn)是否可被選擇
      :data="menuOptions"
      node-key="id"      //每個(gè)樹(shù)節(jié)點(diǎn)用來(lái)作為唯一標(biāo)識(shí)的屬性，整棵樹(shù)應(yīng)該是唯一的
      highlight-current
      //默認(rèn)勾選的節(jié)點(diǎn)的 key 的數(shù)組，formmenu是從父組件拿到的值。在此組件中通過(guò)this.$refs.tree.getCheckedKeys();返回目前被選中的節(jié)點(diǎn)的 key 所組成的數(shù)組，傳給formmenu。
      :default-checked-keys="formmenu"  
      :props="defaultProps"
    />
    <div style="margin: 15px 0" />
  </div>
</template>
<script>
import { getAllMenu } from '@/views/api/index';  //樹(shù)數(shù)據(jù)接口
export default {
  props: {
    formmenu: {    //父組件傳值子組件
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      checkAll: false,
      menuOptions: [],
      mydata: [],
      defaultProps: {
        children: 'children',
        label: 'menuName',
      },
      isIndeterminate: false,
    };
  },
  watch: {
    formmenu() {
      this.getTreeselect();
    },
  },
  created() {
    this.getTreeselect();
  },
  methods: {
    getTreeselect() {
      getAllMenu().then((response) => {
        this.menuOptions = response.data || []; //從接口拿到樹(shù)數(shù)據(jù)
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(this.formmenu);  //通過(guò) keys 設(shè)置目前勾選的節(jié)點(diǎn)，使用此方法必須設(shè)置 node-key 屬性
          this.mydata = this.convertTreeData(this.menuOptions);//因?yàn)橄旅嬉袛鄶?shù)組長(zhǎng)度，樹(shù)的結(jié)構(gòu)里包含children，所以要將其展開(kāi)。
          //與全選關(guān)聯(lián)起來(lái)，判斷是否全部選中還是部分選中
          let checkedCount = this.formmenu.length;
          this.checkAll = checkedCount === this.mydata.length;
          this.isIndeterminate = 
      checkedCount > 0 && checkedCount < this.mydata.length;
        });
      });
    },
    // tree 結(jié)構(gòu)轉(zhuǎn)化成一維數(shù)組
    convertTreeData(menuOptions) {
      for (let i = 0; i < menuOptions.length; i++) {
        if (menuOptions[i].children != undefined) {
          const temp = menuOptions[i].children;
          delete menuOptions[i].children;
          menuOptions = menuOptions.concat(temp);
        }
      }
      return menuOptions;
    },
    handleCheckAllChange(val) {
      if (this.checkAll) {
        this.$refs.tree.setCheckedNodes(this.menuOptions);
      } else {
        this.$refs.tree.setCheckedKeys([]);
      }
      this.isIndeterminate = false;
    },
  },
};
</script>