<template>
    <en-table-layout :tableData="tableData.records" :loading="loading">
      <template #toolbar>
        <div class="inner-toolbar w-11/12 flex justify-between">
          <div class="toolbar-btns">
            <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" v-if="checkPermission(['roleManage:add'])" @click="handleAddRole"
              >添加</el-button
            >
          </div>
          <div class="toolbar-search">
            <en-table-search @search="searchEvent" placeholder="请输入关键字" />
          </div>
        </div>
      </template>
  
      <template #table-columns>
        <el-table-column prop="role_name" label="角色名称" />
        <el-table-column prop="role_describe" label="角色描述" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEditRole(scope.row)" v-if="checkPermission(['roleManage:edit'])">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDeleteRole(scope.row)" v-if="checkPermission(['roleManage:del'])">删除</el-button>
          </template>
        </el-table-column>
      </template>
  
      <template #pagination>
        <el-pagination
          v-if="tableData"
          @size-change="handlePageSizeChange"
          @current-change="handlePageCurrentChange"
          :current-page="tableData.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="tableData.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
        >
        </el-pagination>
      </template>
    </en-table-layout>
  </template>
    
    <script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import * as API_Auth from '@/api/auth';
  
  const router = useRouter();
  const loading = ref(false);
  const params = ref({
    page_no: 1,
    page_size: 10,
    keyword: '',
  });
  const tableData = ref<any>({});
  
  const checkPermission = (permissions: string[]): boolean => {
    return true;
  };
  
  const handlePageSizeChange = (size: number) => {
    params.value.page_size = size;
    GET_RoleList();
  };
  
  const handlePageCurrentChange = (page: number) => {
    params.value.page_no = page;
    GET_RoleList();
  };
  
  const handleAddRole = () => {
    router.push({ name: 'packageAdd', query: { id: 0 } });
  };
  
  const handleEditRole = (row: any) => {
    router.push({ name: 'packageAdd', query: { id: row.role_id } });
  };
  
  const handleDeleteRole = (row: any) => {
    ElMessageBox.confirm('确定要删除这个角色吗？', '提示', { type: 'warning' })
      .then(() => {
        API_Auth.deleteRole(row.role_id).then(() => {
          ElMessage.success('删除成功！');
          GET_RoleList();
        });
      })
      .catch(() => {});
  };
  
  const searchEvent = (data: string) => {
    params.value.keyword = data;
    params.value.page_no = 1;
    GET_RoleList();
  };
  
  const GET_RoleList = () => {
    loading.value = true;
    API_Auth.getPackageRoleList(params.value)
      .then((response) => {
        loading.value = false;
        tableData.value = response;
      })
      .catch(() => {
        loading.value = false;
      });
  };
  
  onMounted(() => {
    GET_RoleList();
  });
  </script>