<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' }">
      <template v-for="(item, index) in tableHeader">
        <el-table-column v-if="item.value === 'menuType'" :prop="item.value" :label="item.name" :key="index"
          :align="item.align" header-align="center" :width="item.width" :formatter="formatter">
          <template slot-scope="scope">
            <el-tag :type="scope.row.menuType === 'B' ? '' : 'success'" disable-transitions>{{ scope.row.menuType ===
                "B" ? "按钮" : "菜单"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-else :prop="item.value" :label="item.name" :key="index" :align="item.align"
          header-align="center" :width="item.width" :formatter="formatter">
        </el-table-column>
      </template>
      <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>
  </div>
</template>

<script>
import { getAllAuth, updateStatus } from "@/api/system/user.js";
import dictLabels from "@/assets/languages/dictLabels.js";
import Drawer from "./drawer.vue";

export default {
  name: "MenuConfig",
  components: {
    Drawer,
  },
  data() {
    return {
      drawer: false,
      menuFormDisabled: false,
      loading: false,
      drawerTitle: "",
      menuData: {},
      data: [],
      tableHeader: [
        {
          name: "菜单名",
          value: "title",
          width: "",
          align: "left",
        },
        {
          name: "菜单类型",
          value: "menuType",
          width: "100",
          align: "center",
        },
        {
          name: "权限标识",
          value: "permissionKey",
          width: "auto",
          align: "left",
        },
        {
          name: "菜单状态",
          value: "status",
          width: "100",
          align: "center",
        },
        {
          name: "菜单路由",
          value: "path",
          width: "auto",
          align: "left",
        },
      ],
    };
  },
  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.msgWarning('数据为空')
          } else {
            this.msgWarning(res.msg)
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //菜单状态改变
    statusUpdate(data) {
      updateStatus(data)
        .then((res) => {
          if (res.code === 200) {
            this.menuAll();
            this.msgSuccess('操作成功')
            location.reload();
          } else {
            this.msgWarning(res.msg)
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //菜单开启关闭
    menuStatus(row) {
      this.$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) {
      this.$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["menu"][column.property]) {
        if (dictLabels["menu"][column.property][cellValue]) {
          return dictLabels["menu"][column.property][cellValue];
        }
      }
      return cellValue;
    },
  },
};
</script>

<style>
</style>