<template>
  <VerticalFlexLayout>
    <template #static>
      <Breadcrumb />
    </template>

    <div class="content">
      <div class="toolbar">
        <div>
          <el-input
            :style="{ width: '320px' }"
            v-model="requestParams.queryParam!.roleName"
            clearable
            placeholder="请输入角色名称"
            @keyup.enter="queryRolesPage"
          />
          <el-button type="primary" :icon="Search" @click="queryRolesPage" style="margin-left: 20px">查询</el-button>
        </div>

        <el-button type="primary" @click="openDrawer()" v-permission="PERM_USER.ROLE"> 添加角色 </el-button>
      </div>

      <div class="table-wrapper">
        <el-table :data="roleList" height="100%" class="role-table">
          <el-table-column label="角色ID" width="100" prop="id" />
          <el-table-column label="角色名称" prop="roleName" width="480" />
          <el-table-column label="备注" prop="remark" width="800" />
          <el-table-column label="创建时间" width="240" prop="createdAt" />
          <el-table-column label="操作" min-width="120" fixed="right">
            <template #default="{ row }">
              <section class="actions">
                <img src="@/assets/icons/edit.png" @click="openDrawer(row)" v-permission="PERM_USER.ROLE" />
                <img
                  src="@/assets/icons/delete.png"
                  @click="deleteRole(row.id)"
                  v-permission="{ action: [PERM_USER.ROLE] }"
                />
              </section>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <section class="paginationPosition">
        <el-pagination
          background
          :layout="DEFAULT_PAGINATION_LAYOUT"
          :page-sizes="PAGE_SIZE_CONFIG"
          :total="total"
          v-model:page-size="requestParams.pageSize"
          v-model:current-page="requestParams.pageNumber"
          @change="queryRolesPage"
        />
      </section>

      <RoleDrawer :title="drawerTitle" ref="drawerInstance" @submitted="onSubmitRole" />
    </div>
  </VerticalFlexLayout>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Search } from '@element-plus/icons-vue';
  import { DEFAULT_PAGINATION_LAYOUT, PAGE_SIZE_CONFIG } from '@/constant/pagination';
  import RoleDrawer from './components/RoleDrawer.vue';
  import useRolesQuery from './hooks/useRolesQuery';
  import { Role } from '@/types/role/type';
  import { deleteRole as _deleteRole } from '@/api/system/role';
  import { PERM_USER } from '@/types/permission/constants';
  import Breadcrumb from '@/components/Breadcrumb.vue';
  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
  import { msgConfirm } from '@/utils/element-plus/messageBox';

  const { roleList, total, queryRolesPage, requestParams } = useRolesQuery();

  // drawer 相关变量
  const drawerTitle = ref('');
  const drawerInstance = ref<InstanceType<typeof RoleDrawer>>();

  const openDrawer = (row?: Role) => {
    drawerTitle.value = row ? '编辑角色' : '添加角色';
    drawerInstance.value?.open(row);
  };

  /**
   * 创建或编辑角色后重新获取列表
   */
  const onSubmitRole = () => {
    queryRolesPage();
  };

  /**
   * 删除角色
   */
  const deleteRole = async (roleId: number) => {
    try {
      await msgConfirm('删除后无法回复，确认删除吗？', '确认删除', { type: 'warning' });
      await _deleteRole(roleId);
      queryRolesPage();
    } catch (e) {
      console.error(e);
    }
  };

  onMounted(() => {
    queryRolesPage();
  });
</script>

<style lang="scss" scoped>
  .actions {
    display: flex;
  }

  .actions > img {
    margin-right: 24px;
    cursor: pointer;
  }

  .content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .toolbar {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
  }

  .table-wrapper {
    flex: 1;
    overflow: hidden;
    min-height: 0;
  }

  .role-table {
    height: 100%;
  }

  .paginationPosition {
    flex-shrink: 0;
    margin-top: 20px;
  }
</style>
