<template>
  <el-card style="height: 100vh; overflow-y: auto">
    <div style="text-align: right; padding-bottom: 10px">
      <el-button size="mini" type="primary" @click="openModel(0)">
        新建分类
      </el-button>
    </div>
    <el-table
      border
      class="menu-table"
      :data="module_list"
      size="small"
      height="calc( 100vh - 100px )"
      row-key="id"
      :indent="20"
    >
      <el-table-column label="#" width="100"></el-table-column>
      <el-table-column
        prop="name"
        label="菜单名称"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="alias"
        label="别名"
        align="center"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="extend"
        label="功能"
        align="center"
        min-width="200"
      ></el-table-column>
      <el-table-column
        prop="enableStatus"
        label="状态"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.enableStatus === 5" class="open-span">
            启用
          </span>
          <span v-else class="disabled-span">禁用</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="180"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-tooltip content="编辑" placement="top">
            <el-button
              size="mini"
              type="primary"
              @click="openModel(scope.row.id)"
            >
              <i class="el-icon-edit" aria-hidden="true"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip
            :content="scope.row.enableStatus === 5 ? '禁用' : '启用'"
            placement="top"
          >
            <el-button
              size="mini"
              type="warning"
              :icon="
                scope.row.enableStatus === 5
                  ? 'el-icon-error'
                  : 'el-icon-success'
              "
              @click="updateCategoryStatus(scope.row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteData(scope.row.id)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <MenuAdmin
      v-if="is_drawer"
      :module-list="module_list"
      :model-id="model_id"
      :drawer="is_drawer"
      @subSuccess="subSuccess"
      @close="is_drawer = false"
    />
  </el-card>
</template>

<script>
  import MenuAdmin from "./MenuAdmin";
  import { getAllModule, delModule, updateModuleStatus } from "@/api/System";

  export default {
    name: "MenuList",
    components: {
      MenuAdmin,
    },
    data() {
      return {
        module_list: [],
        is_drawer: false,
        model_id: 0,
      };
    },
    async created() {
      this.getList();
    },
    methods: {
      openModel(id) {
        this.is_drawer = true;
        this.model_id = id || 0;
      },
      subSuccess() {
        this.is_drawer = false;
        this.getList();
      },
      // 显示和隐藏
      updateCategoryStatus(row) {
        const title =
          row.enableStatus === 5
            ? "确定要禁用该模块吗？"
            : "确定要启用该模块吗？";
        this.$confirm(title, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await updateModuleStatus({
            id: row.id,
            enableStatus: row.enableStatus === 5 ? 4 : 5,
          });

          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.getList();
        });
      },
      // 获取列表
      async getList() {
        const { data } = await getAllModule();

        this.module_list = data;
      },
      deleteData(id) {
        this.$confirm("确定要删除吗?", "删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await delModule(id);

          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.getList();
        });
      },
    },
  };
</script>
<style>
  .menu-table [class*="el-table__row--level"] .el-table__expand-icon {
    color: #000;
    font-size: 16px;
  }
</style>
