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

    <ElCard class="art-table-card" shadow="never">
      <ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="refreshData">
        <template #left>
          <ElSpace wrap>
            <ElButton
              v-permission="'dice:ante_config:index:save'"
              @click="showDialog('add')"
              v-ripple
            >
              <template #icon>
                <ArtSvgIcon icon="ri:add-fill" />
              </template>
              {{ $t('table.actions.add') }}
            </ElButton>
            <ElButton
              v-permission="'dice:ante_config:index:destroy'"
              :disabled="selectedRows.length === 0"
              @click="deleteSelectedRows(api.delete, refreshData)"
              v-ripple
            >
              <template #icon>
                <ArtSvgIcon icon="ri:delete-bin-5-line" />
              </template>
              {{ $t('table.actions.delete') }}
            </ElButton>
          </ElSpace>
        </template>
      </ArtTableHeader>

      <ArtTable
        ref="tableRef"
        rowKey="id"
        :loading="loading"
        :data="data"
        :columns="columns"
        :pagination="pagination"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        @pagination:size-change="handleSizeChange"
        @pagination:current-change="handleCurrentChange"
      >
        <template #is_default="{ row }">
          <ElTag :type="row.is_default === 1 ? 'primary' : 'warning'" size="small">
            {{ row.is_default === 1 ? $t('page.table.defaultYes') : $t('page.table.defaultNo') }}
          </ElTag>
        </template>

        <template #operation="{ row }">
          <div class="flex gap-2">
            <SaButton
              v-permission="'dice:ante_config:index:update'"
              type="secondary"
              @click="showDialog('edit', row)"
            />
            <SaButton
              v-permission="'dice:ante_config:index:destroy'"
              type="error"
              @click="deleteRow(row, api.delete, refreshData)"
            />
          </div>
        </template>
      </ArtTable>
    </ElCard>

    <EditDialog
      v-model="dialogVisible"
      :dialog-type="dialogType"
      :data="dialogData"
      @success="refreshData"
    />
  </div>
</template>

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

  const searchForm = ref({
    name: undefined,
    title: undefined,
    is_default: undefined
  })

  const handleSearch = (params: Record<string, unknown>) => {
    Object.assign(searchParams, params)
    getData()
  }

  const {
    columns,
    columnChecks,
    data,
    loading,
    getData,
    searchParams,
    pagination,
    resetSearchParams,
    handleSortChange,
    handleSizeChange,
    handleCurrentChange,
    refreshData
  } = useTable({
    core: {
      apiFn: api.list,
      apiParams: { limit: 100 },
      columnsFactory: () => [
        { type: 'selection' },
        { prop: 'id', label: 'page.table.id', width: 80, align: 'center' },
        { prop: 'name', label: 'page.table.name', align: 'center' },
        { prop: 'title', label: 'page.table.title', align: 'center' },
        { prop: 'mult', label: 'page.table.mult', align: 'center' },
        {
          prop: 'is_default',
          label: 'page.table.isDefault',
          width: 110,
          align: 'center',
          useSlot: true
        },
        { prop: 'create_time', label: 'page.table.createTime', width: 170, align: 'center' },
        { prop: 'update_time', label: 'page.table.updateTime', width: 170, align: 'center' },
        {
          prop: 'operation',
          label: 'table.actions.operation',
          width: 100,
          align: 'center',
          fixed: 'right',
          useSlot: true
        }
      ]
    }
  })

  const {
    dialogType,
    dialogVisible,
    dialogData,
    showDialog,
    deleteRow,
    deleteSelectedRows,
    handleSelectionChange,
    selectedRows
  } = useSaiAdmin()
</script>
