<el-table
          ref="treeTable"
          v-loading="loading"
          :data="tableList"
          row-key="id"
          stripe
          class="table_hei296"
          :expand-row-keys="expandRowKeys"
          @select="handleSelection"
          @select-all="selectAll"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column type="selection" width="55" align="center" :selectable="handleSelectable"/>
          <el-table-column type="index" width="55" align="center" label="序號(hào)"/>
          <el-table-column prop="name" label="類(lèi)名稱(chēng)" show-overflow-tooltip />
          <el-table-column prop="code" label="編碼" show-overflow-tooltip />
          <el-table-column prop="groupType" label="組別" show-overflow-tooltip />
        </el-table>

    initCheckedBox() {
      const initList = function(data) {
        data.forEach(function(item) {
          item.isCheck = false // 未選中
          if (item.children) {
            initList(item.children)
          }
        })
        return data
      }
      this.rightCheckList = initList(this.tableList)
    },

    // 當(dāng)用戶(hù)手動(dòng)勾選全選 Checkbox 時(shí)觸發(fā)的事件
    selectAll(selection) {
      if (!this.checkAll) {
        this.checkAll = true
        this.isAllChecked(this.rightCheckList, true)
      } else {
        this.checkAll = false
        this.isAllChecked(this.rightCheckList, false)
      }
      const selectCheck = this.$getNodesIterative(this.rightCheckList, 'children', 'isCheck', true)
      this.selectedRows = selectCheck.map(item => item.id)
    },
    // 是否全選中
    isAllChecked(data, status) {
      if (data === undefined) {
        const imitData = []
        imitData.push(data)
      } else {
        data.forEach(item => {
          item.isCheck = item.parentId === 0 ? false : status
          this.$refs.treeTable.toggleRowSelection(item, item.isCheck)
          if (item.children) {
            this.isAllChecked(item.children, status)
          }
        })
      }
    },

     handleSelection(selection, row) {
      row.isCheck = !row.isCheck
      if(row.children.length === 0 && row.isCheck === true){
        this.checkedParentRow(row, this.rightCheckList)
      } else if(row.children.length === 0 && row.isCheck === false){
        this.clearParentRow(row, this.rightCheckList)
      } else if(row.children.length > 0 && row.isCheck === true){
        this.isAllChecked(row.children, true)
      } else if(row.children.length > 0 && row.isCheck === false){
        this.isAllChecked(row.children, false)
      }
      const selectCheck = this.$getNodesIterative(this.rightCheckList, 'children', 'isCheck', true)
      this.selectedRows = selectCheck.map(item => item.id)
    },
    // 選中子節(jié)點(diǎn)默認(rèn)選中父節(jié)點(diǎn)，暫時(shí)不用，這段與需求不同，可不寫(xiě)。
    // 如果有這個(gè)需求可寫(xiě)，并取消if隱藏代碼
    checkedParentRow(data, obj) {
      for(var item in obj){
        if(obj[item].id === data.parentId){
          var every = obj[item].children.every(function(item) {
            return item.isCheck === true
          })
          // if (every) {
          //   obj[item].isCheck = true
          //   this.$refs.treeTable.toggleRowSelection(obj[item], true)
          // }
        }
      }
    },
    // 子節(jié)點(diǎn)都未被選中，父節(jié)點(diǎn)默認(rèn)取消選中
    clearParentRow(data, obj) {
      const parentRow = this.$findTreeObjById(obj, 'id', data.parentId)
      parentRow.isCheck = false
      this.$refs.treeTable.toggleRowSelection(parentRow, false)
    },

/**
 *
 * @param {Array} treeList 樹(shù)形數(shù)據(jù)
 * @param {string} targetType 樹(shù)形數(shù)據(jù)中所查找的鍵值
 * @param {string} target 樹(shù)形數(shù)據(jù)中所查找的值
 * @returns
 */
export function findTreeObjById(treeList, targetType, target) {
  for (const item of treeList) {
    // 匹配當(dāng)前節(jié)點(diǎn)
    if (item[targetType] === target) return item;
    // 遞歸查找子節(jié)點(diǎn)
    if (item.children && item.children.length > 0) {
      const res = findTreeObjById(item.children, targetType, target);
      if (res) return res;
    }
  }
  return null; // 無(wú)匹配
}
/**
 * 提取樹(shù)形結(jié)構(gòu)中所有type為true的節(jié)點(diǎn)（迭代版，避免棧溢出）
 * @param {Array} tree 樹(shù)形結(jié)構(gòu)數(shù)組
 * @param {string} childrenKey 子節(jié)點(diǎn)字段名
 * @param {string} key 判斷鍵值
 * @param  flagValue 判斷鍵值
 * @returns {Array} 平級(jí)的符合條件的節(jié)點(diǎn)數(shù)組
 */
export function getNodesIterative(tree, childrenKey, key, flagValue) {
  const result = [];
  // 用棧存儲(chǔ)待遍歷的節(jié)點(diǎn)（初始為根節(jié)點(diǎn)數(shù)組）
  const stack = [...tree];
  while (stack.length > 0) {
    const node = stack.pop(); // 棧頂取出節(jié)點(diǎn)（也可用shift()實(shí)現(xiàn)隊(duì)列，效率略低）
    // 篩選type為true的節(jié)點(diǎn)
    if (node[key] === flagValue) {
      result.push({ ...node });
    }
    // 子節(jié)點(diǎn)入棧（繼續(xù)遍歷）
    if (Array.isArray(node[childrenKey])) {
      stack.push(...node[childrenKey]);
    }
  }
  return result;
}
export default {
  findTreeObjById,
  getNodesIterative
}