<template>
  <div>
    <el-form ref="selectionUserForm" label-width="auto" style="margin: 20px">
      <el-row :gutter="50"> </el-row>
    </el-form>
    <!-- <div style="margin:20px">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="addMenu"
        >新增菜单</el-button
      >
    </div> -->
    <el-table
      :data="data"
      row-key="id"
      fit
      border
      stripe
      highlightCurrentRow
      v-loading="loading"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        v-for="(item, index) in tableHeader"
        :prop="item.value"
        :label="item.name"
        :key="index"
        :align="item.align"
        header-align="center"
        showOverflowTooltip
        :width="item.width"
        :formatter="formatter"
      >
       <template slot-scope="scope">
          <el-tag v-if="item.value === 'menuType'" :type="scope.row.menuType === 'B'?'':'success'"
            disable-transitions>{{scope.row.menuType === 'B'?'按钮':'菜单'}}</el-tag>
            <span v-else>{{scope.row.title}}</span>
        </template>
      </el-table-column>
       
      <el-table-column
        header-align="center"
        align="center"
        label="操作"
        width="auto"
      >
        <template slot-scope="scope">
          <!-- <el-button type="success" size="mini" @click="buttonClick(scope)">修改</el-button>
            <el-button type="primary" size="mini" @click="buttonClick(scope)"
              >查看</el-button
            > -->
          <el-button
            :type="scope.row.status == 1 ? 'warning' : 'primary'"
            v-hasPermi="['system:menu:openClose']"
            size="mini"
            @click="menuStatus(scope)"
            v-if="scope.row.menuType == 'C'"
            >{{ scope.row.status == 1 ? "停用菜单" : "启用菜单" }}</el-button
          >
          <el-button
            type="danger"
            size="mini"
            v-hasPermi="['system:menu:delete']"
            @click="removeMenu(scope)"
            v-if="scope.row.menuType == 'C'"
            >删除菜单</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- <Tables
      ref="newTable"
      :data="data"
      :headerData="tableHeader"
      size="medium"
      rowKey="id"
      :defaultExpandAll="true"
      height="auto"
      @tableSelect="tableSelect"
      @tableSelectAll="tableSelectAll"
      @SelectChange="SelectChange"
    >
      <el-table-column
        header-align="center"
        align="center"
        label="操作"
        width="auto"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="menuStatus(scope)">{{
            scope.menuStatus == 0 ? "停用" : "启用"
          }}</el-button>
          <el-button type="danger" size="mini" @click="removeMenu(scope)"
            >删除菜单</el-button
          >
        </template>
      </el-table-column>
    </Tables> -->
    <!-- <Drawer
      :dialogVisible="drawer"
      :drawerTitle="drawerTitle"
      :menuFormDisabled="menuFormDisabled"
      :menuData="menuData"
      @handleClose="handleClose"
    ></Drawer> -->
  </div>
</template>

<script>
import { getAllAuth, updateStatus } from "@/api/system/user.js";
import dictLabels from "@/assets/languages/dictLabels.js";
import Drawer from "./drawer.vue";
import { MessageBox } from "element-ui";
export default {
  name:"MenuConfig",
  components: {
    Drawer,
  },
  data() {
    return {
      drawer: false,
      menuFormDisabled: false,
      loading:false,
      drawerTitle: "",
      menuData: {},
      data: [],
      tableHeader: [
        {
          type: "",
          name: "菜单名",
          value: "title",
          width: "200",
          align: "left",
          sorTable: false,
        },
        {
          type: "",
          name: "菜单类型",
          value: "menuType",
          width: "100",
          align: "center",
          sortable: false,
        },
        {
          type: "",
          name: "权限标识",
          value: "permissionKey",
          width: "auto",
          align: "left",
          sortable: false,
        },
        {
          type: "",
          name: "菜单状态",
          value: "status",
          width: "100",
          align: "center",
          sorTable: false,
        },
        {
          type: "",
          name: "菜单路由",
          value: "path",
          width: "auto",
          align: "left",
          sorTable: false,
        },
      ],
    };
  },
  created() {
    if(this.$store.state.tagsView.cachedViews.length == 0){
      this.menuAll();
    }
  },
  activated(){
    this.menuAll();
  },
  deactivated(){
    this.data = []
  },
  methods: {
    addMenu() {
      this.menuData = {};
      this.drawer = true;
      this.drawerTitle = "新增菜单";
      this.menuFormDisabled = false;
    },

    //关闭
    handleClose(val) {
      this.drawer = val;
    },

    buttonClick(row) {
      this.menuData = row.row;
      this.drawer = true;
      this.drawerTitle = "查看/修改";
      this.menuFormDisabled = true;
    },

    //表格数据
    menuAll() {
      this.loading = true;
      getAllAuth().then((res) => {
        this.loading = false;
        if (res.code === 200) {
          res.data.length > 0
            ? (this.data = res.data)
            : this.$message({
                message: "数据为空",
                type: "warning",
              });
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      }).catch(()=>{
        this.loading = false;
      });
    },

    //菜单状态改变
    statusUpdate(data) {
      updateStatus(data)
        .then((res) => {
          if (res.code === 200) {
            this.menuAll();
            this.$message({
              message: "操作成功",
              type: "success",
            });
            // location.reload()
            this.$store.dispatch('tagsView/delAllCachedViews')
            this.$store.dispatch('tagsView/delAllVisitedViews')
            this.$router.push('/index')
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //菜单开启关闭
    menuStatus(row) {
      MessageBox.confirm(
        row.row.status == 1 ? "是否要关闭此菜单" : "是否要启用此菜单",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let data = {};
          data.id = row.row.id;
          data.status = row.row.status == 1 ? "2" : "1";
          this.statusUpdate(data);
        })
        .catch(() => {});
    },

    //菜单删除
    removeMenu(row) {
      MessageBox.confirm("是否要删除此菜单", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {};
          data.id = row.row.id;
          data.status = "0";
          this.statusUpdate(data);
        })
        .catch(() => {});
    },
    
    formatter(row, column, cellValue, index) {
      if (dictLabels[column.property]) {
        if (dictLabels[column.property][cellValue]) {
          return dictLabels[column.property][cellValue];
        }
      }
      return cellValue;
    },
  },
};
</script>

<style>
</style>