<template>
  <div>
    <main-top>
      <div slot="con">
        <el-button @click="openDilog()" type="primary">新增</el-button>
      </div>
    </main-top>
    <div class="tablecon noSubmune">
      <div class="tablebody">
        <search>
          <div slot="content" class="searchslot">
            <span>角色名称：</span>
            <el-input class="elInput paddingmore" :maxlength="INPUTLENGTH" show-word-limit
              @keydown.enter.native="getList" v-model="search.inputKey" placeholder="请输入角色名称"></el-input>
            <el-button @click="getList" type="primary">查询</el-button>
            <el-button @click="search.inputKey='',getList()">重置</el-button>

          </div>
        </search>
        <div class="table">
          <vtable :key="$route.params.type" :data="data" :page="page" @pagechange="
            (data) => {
              page.pageNum = data;
            }
          " @pagesizechange="
              (data) => {
                page.size = data;
              }
            " :tableData="list">
            <template slot-scope="{data}" slot="count">
              <el-button @click="gtoUser(data)" type="text">{{data.count}}</el-button>
            </template>
            <template slot-data="data" slot="record">
              <el-button type="text">审核详情</el-button>
            </template>
            <el-table-column slot="operate" label="操作" width="190">
              <template slot-scope="scope">
                <template v-if="scope.row.roleKey!='sys_admin'" >
                  <span class="o-span" @click="gotoEdit(scope.row)">权限设置</span>
                  <span class="o-span" @click="openDilog(scope.row)">编辑</span>
                  <span class="o-delete" :class="{disabledAc:scope.row.isEnabled}" @click="delSys(scope.row)">删除</span>
                </template>
                <template v-else>-</template>
              </template>

            </el-table-column>
          </vtable>
        </div>
      </div>
    </div>

    <vdialog :show="showRoleDetail" @close="handleDialogClose" :form="currentForm" />
  </div>
</template>

<script>

import vdialog from "./edit/dialog.vue";

import { raw } from "./data";
import { getSysList, delSysSingle } from "@/configue/api";

import { mapGetters } from "vuex";

export default {
  data() {
    return {
      showRoleDetail: false,
      currentForm: {},
      search: {
        inputKey: "",
        date: "",
        state: "",
      },
      list: {},
      page: {
        size: 25,
        pageNum: 1,
      },
    };
  },

  components: { vdialog },

  methods: {
    handleDialogClose(data) {
      this.showRoleDetail = false
      data && this.getList()
    },
    gotoEdit(item) {
      let { type } = this.$route.params;
      this.$router.push({
        name: "edit-" + this.$route.name,
        params: { id: item.id, type: type },
      });
    },
    delSys(item) {
      this.confirm("删除后，信息将无法恢复，是否继续？", () => {
        delSysSingle(
          "role",
          {
            id: item.id,
          },
          () => {
            this.$alert("删除成功", "提示", {
              confirmButtonText: "确定",
              callback: () => {
                let tmp = this.getList ? "getList" : "backList";
                this[tmp]();
              },
            });
          }
        );
      });
    },
    getList() {
      let { inputKey } = this.search;
      getSysList(
        "role",
        {
          pageNum: this.page.pageNum,
          pageSize: this.page.size,
          searchKey: inputKey,
        },
        (data) => {
          let temp = data.data
          temp.records =temp.records.filter(v=>v.roleKey!=='sys_visitor')
          this.list = temp;
        }
      );
    },
    openDilog(item = null) {
      this.showRoleDetail = true,
        this.currentForm = item ? item : {}
    },
    gtoUser(item) {
      if (item.count) {
        this.$router.push({ path: '/user/manage', query: { roleId: item.id } })
      }
    }
  },
  computed: {
    ...mapGetters({
      activeMenu: "activeMenu",
      activeSub: "activeSub"
    }),
    data() {
      return raw[this.$route.params.type];
    },
    subMenu() {
      return this.$route.params.type;
    },
  },
  watch: {
    subMenu: {
      deep: true,
      immediate: true,
      handler: function () {
        this.getAuth(this.activeMenu, "角色");
        this.getList();
      },
    },
    activeMenu: {
      deep: true,
      immediate: true,
      handler: function (newVal) {
        this.getAuth(newVal, "角色");
      },
    },
    "$route.params.type": function () {
      this.getList();
    },
    page: {
      deep: true,
      handler: function () {
        this.getList();
      },
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
