<template>
    <div class="app-container">
      <el-input v-model="search" placeholder="Filter keyword" style="margin-bottom:30px;"/>
      <el-table
        ref="menuTree"
        :data="treeTable"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        height="60vh"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="title"
          label="名称"
          sortable
          width="350">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <!-- v-if="node.level == 1 || node.level == 2" v-if="node.level == 3" v-if="node.level == 4"-->
            <el-button
              v-if="(scope.row.level == 1 || scope.row.level == 2) "
              type="text"
              size="mini"
              @click="() => {dialogFormVisible = true, menu.pid = scope.row.id}">添加菜单
            </el-button>
            <el-button
              v-if="scope.row.level == 3"
              type="text"
              size="mini"
              @click="() => {dialogPermissionVisible = true, permission.pid = scope.row.id}">添加功能
            </el-button>
            <el-button
              v-if="scope.row.level == 4 "
              type="text"
              size="mini"
              @click="() => updateFunction(scope.row)">修改功能
            </el-button>
            <el-button
              v-if="scope.row.level != 4 "
              type="text"
              size="mini"
              @click="() => getById(scope.row)">修改
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <el-dialog :visible.sync="dialogFormVisible" :title="dialogFormValue">
        <el-form ref="menu" :model="menu" :rules="menuValidateRules" label-width="120px">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="menu.name"/>
          </el-form-item>
          <el-form-item label="访问路径" prop="path">
            <el-input v-model="menu.path"/>
          </el-form-item>
          <el-form-item label="组件路径" prop="component">
            <el-input v-model="menu.component"/>
          </el-form-item>
  
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="restData()">取 消</el-button>
          <el-button type="primary" @click="append()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加功能的窗口 -->
      <el-dialog :visible.sync="dialogPermissionVisible" title="添加功能">
        <el-form ref="permission" :model="permission" :rules="permissionValidateRules" label-width="120px">
          <el-form-item label="功能名称" prop="name">
            <el-input v-model="permission.name"/>
          </el-form-item>
          <el-form-item label="访问路径">
            <el-input v-model="permission.path"/>
          </el-form-item>
          <el-form-item label="组件路径">
            <el-input v-model="permission.component"/>
          </el-form-item>
          <el-form-item label="功能权限值" prop="permissionValue">
            <el-input v-model="permission.permissionValue"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="restData()">取 消</el-button>
          <el-button type="primary" @click="appendPermission()">确 定</el-button>
        </div>
      </el-dialog>
  
    </div>
  </template>
  
  <script>
 import { add, list, update, listmesg, deleteMenu } from "@/api/admin/menu";
  
  const menuForm = {
    name: '',
    pid: 0,
    path: '',
    component: '',
    type: '1'
  }
  const perForm = {
    permissionValue: '',
    type: '2',
    name: '',
    path: '',
    component: '',
    pid: 0
  }
  
  export default {
  
    data() {
      return {
        flag : -1,
        expandRow: [],
        search: '',
        tableData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        dialogFormValue: '添加菜单',
        dialogFormVisible: false,
        dialogPermissionVisible: false,
        menu: menuForm,
        permission: perForm,
        menuValidateRules: {
          name: [{required: true, trigger: 'blur', message: '菜单名必须输入'}],
          path: [{required: true, trigger: 'blur', message: '菜单路径必须输入'}],
          component: [{required: true, trigger: 'blur', message: '组件名称必须输入'}]
        },
        permissionValidateRules: {
          name: [{required: true, trigger: 'blur', message: '功能名称必须输入'}],
          permissionValue: [{required: true, trigger: 'blur', message: '功能权限值必须输入'}]
        }
      }
    },
  
  
    created() {
      this.fetchNodeList()
    },
  
    computed: {
      treeTable: function () {
        var searchValue = this.search;
        if (searchValue) {
          // 一般表格的查询
          // return  this.tableData.filter(function(dataNews){
          //   return Object.keys(dataNews).some(function(key){
          //     return String(dataNews[key]).toLowerCase().indexOf(search) > -1
          //   })
          // })
          let treeData = this.tableData
          let handleTreeData = this.handleTreeData(treeData, searchValue)
          this.setExpandRow(handleTreeData)
          this.expandRow = this.expandRow.join(",").split(",")
          return handleTreeData
        }
        return this.tableData
      }
    },
    methods: {
      // 将过滤好的树形数据展开
      setExpandRow(handleTreeData) {
        this.flag =-1
        if (handleTreeData.length) {
          for (let i of handleTreeData) {
            this.expandRow.push(i.id)
            if (i.children.length) {
              this.setExpandRow(i.children)
            }
          }
        }
      },
      //  树形表格过滤
      handleTreeData(treeData, searchValue) {
  
        if (!treeData || treeData.length === 0) {
          return [];
        }
        const array = [];
        for (let i = 0; i < treeData.length; i += 1) {
          let match = false;
          for (let pro in treeData[i]) {
            if (typeof (treeData[i][pro]) == 'string' ) {
              match |= treeData[i][pro].includes(searchValue);
              if (match  ) break;
            }
          }
          if (this.handleTreeData(treeData[i].children, searchValue).length > 0 || match) {
            if (treeData[i].type ==0 && match){
              this.flag =0
              searchValue = ''
              array.push({
                ...treeData[i],
                children: this.handleTreeData(treeData[i].children, searchValue),
              });
            }else if(treeData[i].type ==1 && match){
              if (this.flag == 0){
                this.flag = 1
              }
              searchValue =''
              array.push({
                ...treeData[i],
                children: this.handleTreeData(treeData[i].children, searchValue),
              });
              if (this.flag != 1){
                searchValue =this.search
              }
            }else {
              array.push({
                ...treeData[i],
                children: this.handleTreeData(treeData[i].children, searchValue),
              });
            }
          }
        }
        return array;
      },
      fetchNodeList() {
        list().then((response) => {
          this.tableData= response.data;
         })
        },
    //   remove(data) {
    //     console.log(data)
  
    //     this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }).then(() => {
    //       return menu.removeById(data.id)
    //     }).then(() => {
    //       this.fetchNodeList()// 刷新列表
    //       this.$message({
    //         type: 'success',
    //         message: '删除成功!'
    //       })
    //     }).catch((response) => { // 失败
    //       if (response === 'cancel') {
    //         this.$message({
    //           type: 'info',
    //           message: '已取消删除'
    //         })
    //       } else {
    //         this.$message({
    //           type: 'error',
    //           message: '删除失败'
    //         })
    //       }
    //     })
    //   },
    //   appendPermission() {
    //     this.$refs.permission.validate(valid => {
    //       if (valid) {
    //         if (this.permission.id) {
    //           this.update(this.permission)
    //         } else {
    //           menu.saveLevelOne(this.permission).then(response => {
    //             this.dialogPermissionVisible = false
    //             this.$message({
    //               type: 'success',
    //               message: '添加功能成功'
    //             })
    //             // 刷新页面
    //             this.fetchNodeList()
    //             this.menu = {...menuForm}
    //             this.permission = {...perForm}
    //           })
    //         }
    //       }
    //     })
    //   },
    //   appendLevelOne() {
    //     menu.saveLevelOne(this.menu)
    //       .then(response => {
    //         this.dialogFormVisible = false
    //         this.$message({
    //           type: 'success',
    //           message: '添加一级菜单成功'
    //         })
    //         // 刷新页面
    //         this.fetchNodeList()
    //         this.menu = {...menuForm}
    //         this.permission = {...perForm}
    //       })
    //       .catch(response => {
    //         // 你们写：判断点击取消清空一下
    //         this.dialogFormVisible = false
    //         this.$message({
    //           type: 'error',
    //           message: '添加一级菜单失败'
    //         })
    //         this.menu = {...menuForm}
    //         this.permission = {...perForm}
    //       })
    //   },
  
    //   append() {
    //     this.$refs.menu.validate(valid => {
    //       if (valid) {
    //         if (!this.menu.id) { // 添加
    //           if (this.menu.pid == 0) {
    //             this.appendLevelOne() // 一级分类的添加
    //           } else {
    //             this.appendLevelTwo() // 二级分类的添加
    //           }
    //         } else { // 修改
    //           this.update(this.menu)
    //         }
    //       }
    //     })
    //   },
  
    //   update(obj) {
    //     debugger
    //     menu.update(obj).then(response => {
    //       this.dialogFormVisible = false
    //       this.$message({
    //         type: 'success',
    //         message: '修改成功'
    //       })
    //       // 刷新页面
    //       this.fetchNodeList()
    //       this.restData()
    //     })
    //   },
    //   appendLevelTwo() {
    //     menu.saveLevelOne(this.menu)
    //       .then(response => {
    //         // 1、把文本框关
    //         this.dialogFormVisible = false
    //         // 2、提示成功
    //         this.$message({
    //           type: 'success',
    //           message: "添加二级分类成功"
    //         })
    //         // 3、刷新页面
    //         this.fetchNodeList()
    //         // 4、把menu清空
    //         this.menu = {...menuForm}
    //         this.permission = {...perForm}
    //       })
    //       .catch(response => {
    //         // 1、把文本框关
    //         this.dialogFormVisible = false
    //         // 2、提示成功
    //         this.$message({
    //           type: 'error',
    //           message: "添加二级分类失败"
    //         })
    //         // 3、把menu清空
    //         this.menu = {...menuForm}
    //         this.permission = {...perForm}
  
    //       })
    //   },
    //   getById(data) {
    //     this.dialogFormVisible = true
    //     this.menu = data
    //   },
    //   updateFunction(data) {
    //     this.dialogPermissionVisible = true
    //     this.permission = data
    //   },
    //   restData() {
    //     this.dialogPermissionVisible = false
    //     this.dialogFormVisible = false
    //     this.menu = {...menuForm}
    //     this.permission = {...perForm}
    //   }
    }
  }
  </script>
  