<template>
  <div class="art-full-height">
    <!-- 搜索面板 -->
    <TableSearch
      v-model="searchForm"
      @search="handleSearch"
      @reset="resetSearchParams"
    ></TableSearch>

    <ElCard class="art-table-card" shadow="never">
      <!-- 表格头部 -->
      <ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="refreshData">
        <template #left>
          <ElSpace wrap>
            <ElButton v-permission="'core:role:save'" @click="showDialog('add')" v-ripple>
              <template #icon>
                <ArtSvgIcon icon="ri:add-fill" />
              </template>
              {{ $t('table.actions.add') }}
            </ElButton>
          </ElSpace>
        </template>
      </ArtTableHeader>

      <!-- 表格 -->
      <ArtTable
        rowKey="id"
        :loading="loading"
        :data="data"
        :columns="columns"
        :pagination="pagination"
        @sort-change="handleSortChange"
        @pagination:size-change="handleSizeChange"
        @pagination:current-change="handleCurrentChange"
      >
        <template #operation="{ row }">
          <div class="flex gap-2" v-if="row.id !== 1">
            <SaButton
              v-permission="'core:role:update'"
              type="secondary"
              @click="showDialog('edit', row)"
            />
            <SaButton
              v-permission="'core:role:destroy'"
              type="error"
              @click="deleteRow(row, api.delete, refreshData)"
            />
            <ElDropdown>
              <ArtIconButton
                icon="ri:more-2-fill"
                class="!size-8 bg-g-200 dark:bg-g-300/45 text-sm"
              />
              <template #dropdown>
                <ElDropdownMenu>
                  <ElDropdownItem
                    v-permission="'core:role:menu'"
                    @click="showPermissionDialog('edit', row)"
                  >
                    <div class="flex-c gap-2">
                      <ArtSvgIcon icon="ri:user-3-line" />
                      <span>菜单权限</span>
                    </div>
                  </ElDropdownItem>
                </ElDropdownMenu>
              </template>
            </ElDropdown>
          </div>
        </template>
      </ArtTable>
    </ElCard>

    <!-- 编辑弹窗 -->
    <EditDialog
      v-model="dialogVisible"
      :dialog-type="dialogType"
      :data="dialogData"
      @success="refreshData"
    />

    <!-- 菜单权限弹窗 -->
    <PermissionDialog
      v-model="permissionDialogVisible"
      :dialog-type="permissionDialogType"
      :data="permissionDialogData"
      @success="refreshData"
    />
  </div>
</template>

<script setup lang="ts">
  import { useTable } from '@/hooks/core/useTable'
  import { useSaiAdmin } from '@/composables/useSaiAdmin'
  import api from '@/api/system/role'
  import TableSearch from './modules/table-search.vue'
  import EditDialog from './modules/edit-dialog.vue'
  import PermissionDialog from './modules/permission-dialog.vue'

  // 搜索表单
  const searchForm = ref({
    name: undefined,
    code: undefined,
    status: undefined
  })

  // 搜索处理
  const handleSearch = (params: Record<string, any>) => {
    Object.assign(searchParams, params)
    getData()
  }

  // 表格配置
  const {
    columns,
    columnChecks,
    data,
    loading,
    getData,
    pagination,
    searchParams,
    resetSearchParams,
    handleSortChange,
    handleSizeChange,
    handleCurrentChange,
    refreshData
  } = useTable({
    core: {
      apiFn: api.list,
      apiParams: {
        orderField: 'level',
        orderType: 'desc'
      },
      columnsFactory: () => [
        { prop: 'id', label: 'table.columns.common.no', minWidth: 60, align: 'center' },
        { prop: 'name', label: 'page.table.roleName', minWidth: 120 },
        { prop: 'code', label: 'page.table.roleCode', minWidth: 120 },
        { prop: 'level', label: 'page.table.level', minWidth: 100, sortable: true },
        { prop: 'remark', label: 'page.table.roleRemark', minWidth: 150, showOverflowTooltip: true },
        { prop: 'sort', label: 'table.columns.common.sort', minWidth: 100 },
        { prop: 'status', label: 'page.table.status', saiType: 'dict', saiDict: 'data_status' },
        { prop: 'create_time', label: 'page.table.createTime', width: 180, sortable: true },
        { prop: 'operation', label: 'table.actions.operation', width: 140, fixed: 'right', useSlot: true }
      ]
    }
  })

  // 编辑配置
  const { dialogType, dialogVisible, dialogData, showDialog, deleteRow } = useSaiAdmin()

  // 权限配置
  const {
    dialogType: permissionDialogType,
    dialogVisible: permissionDialogVisible,
    dialogData: permissionDialogData,
    showDialog: showPermissionDialog
  } = useSaiAdmin()
</script>
