<template>
  <com-head :options="[{ name: '角色管理', value: '2' }]">
    <el-form label-width="84px">
      <el-form-item label="角色名称：">
        <el-input v-model="state.query.searchKey" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="所属架构：">
        <com-company v-model="state.query.deptId" />
      </el-form-item>
      <el-form-item class="searh-btns">
        <el-button type="primary" @click="refresh">查询</el-button>
        <el-button type="primary" plain @click="queryReset">重置</el-button>
      </el-form-item>
    </el-form>
  </com-head>

  <div class="body-layer" style="padding-top: 8px">
    <div class="body-but">
      <el-button type="primary" v-pdpath="'add'" @click="addHandler">新增角色</el-button>
    </div>

    <el-table
      class="user-table"
      :data="state.table.rows"
      style="width: 100%; max-height: 480px"
      size="large"
    >
      <el-table-column label="序号" width="70" v-slot:default="{ $index }">
        <div style="text-align: center">
          {{ state.pag.size * (state.pag.currentPage - 1) + $index + 1 }}
        </div>
      </el-table-column>
      <el-table-column label="角色名称" prop="roleName"></el-table-column>
      <el-table-column label="角色类型" prop="type">
        <template #default="scope">
          {{ scope.row.type == 0 ? "预设" : "自定义" }}
        </template>
      </el-table-column>
      <el-table-column label="所属架构" prop="deptName"></el-table-column>
      <el-table-column label="创建人" prop="nickName"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="操作" v-slot:default="{ row }">
        <span class="oper-span" v-pdpath="'view'" @click="showRole(row.id)">查看</span>
        <span
          class="oper-span"
          v-pdpath="['edit']"
          :class="{ disable: row.type === 0 }"
          @click="editHandler(row)"
          >编辑</span
        >
        <span
          class="oper-span"
          style="color: var(--primaryColor)"
          @click="delInfo(row)"
          :class="{ disable: row.type == 0 }"
          v-pdpath="['del']"
          >删除</span
        >
      </el-table-column>
    </el-table>

    <com-pagination
      @size-change="changPageSize"
      @current-change="changPageCurrent"
      :current-page="state.pag.currentPage"
      :page-size="state.pag.size"
      :total="state.pag.total"
    />
  </div>
</template>

<script setup lang="ts">
import { usePagging } from "@/hook/pagging";
import comHead from "@/components/head/index.vue";
import comCompany from "@/components/company-select/index.vue";
import comPagination from "@/components/pagination/index.vue";
import { getPageList, axios, removeRole } from "@/request";
import { Role, delRole, getRolePagging } from "@/store/role";
import { ElMessage } from "element-plus";
import { confirm } from "@/helper/message";
import { showRole, addRole, editRole } from "@/view/window";

const { state, queryReset, refresh, changPageCurrent, changPageSize } = usePagging({
  get: getRolePagging,
  paramsTemlate: {
    searchKey: "",
    deptId: "",
  },
});

const delInfo = async (row: Role) => {
  if (row.type == 0) {
    return ElMessage.warning("预设角色不能删除");
  }
  if (await confirm("删除角色后，相关用户需重新配置角色，确认要删除组织吗？")) {
    await delRole(row.id);
    ElMessage.success("操作成功");
    refresh();
  }
};

const addHandler = async () => {
  await addRole();
  refresh();
};

const editHandler = async (role: Role) => {
  await editRole(role.id);
  refresh();
};
</script>