<template>
  <div class="art-full-height">
    <!-- 方向切换 + 搜索 -->
    <div class="direction-bar">
      <el-radio-group v-model="currentDirection" size="default" @change="onDirectionChange">
        <el-radio-button :value="0">{{ $t('page.search.clockwise') }}</el-radio-button>
        <el-radio-button :value="1">{{ $t('page.search.anticlockwise') }}</el-radio-button>
      </el-radio-group>
    </div>
    <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:reward:index:batchUpdateWeights'"
              type="primary"
              @click="weightRatioVisible = true"
              v-ripple
            >
              {{ $t('page.toolbar.weightRatio') }}
            </ElButton>
            <ElButton
              v-permission="'dice:reward:index:startWeightTest'"
              @click="weightTestVisible = true"
              v-ripple
            >
              {{ $t('page.toolbar.weightTest') }}
            </ElButton>
          </ElSpace>
        </template>
      </ArtTableHeader>

      <ArtTable
        ref="tableRef"
        rowKey="id"
        :loading="loading"
        :data="data"
        :columns="columns"
        :pagination="pagination"
        @sort-change="handleSortChange"
        @pagination:size-change="handleSizeChange"
        @pagination:current-change="handleCurrentChange"
      />
    </ElCard>

    <WeightRatioDialog v-model="weightRatioVisible" @success="refreshData" />
    <WeightTestDialog
      v-model="weightTestVisible"
      :channel-dept-id="channelDeptId"
      @success="refreshData"
    />
  </div>
</template>

<script setup lang="ts">
  import { useTable } from '@/hooks/core/useTable'
  import { useInjectedChannelDept } from '@/composables/useChannelDeptScope'
  import api from '../../api/reward/index'
  import TableSearch from './modules/table-search.vue'
  import WeightRatioDialog from './modules/weight-ratio-dialog.vue'
  import WeightTestDialog from './modules/weight-test-dialog.vue'

  const channelScope = useInjectedChannelDept()
  const channelDeptId = computed(() => channelScope?.selectedDeptId.value)

  const currentDirection = ref<0 | 1>(0)
  const weightRatioVisible = ref(false)
  const weightTestVisible = ref(false)

  const searchForm = ref<Record<string, unknown>>({
    direction: 0,
    tier: undefined
  })

  const listApi = (params: Record<string, any>) => {
    return api.list({ ...params, direction: currentDirection.value })
  }

  const handleSearch = (params: Record<string, any>) => {
    Object.assign(searchParams, { ...params, direction: currentDirection.value })
    getData()
  }

  const onDirectionChange = () => {
    searchForm.value.direction = currentDirection.value
    Object.assign(searchParams, { direction: currentDirection.value, tier: searchForm.value.tier })
    getData()
  }

  const {
    columns,
    columnChecks,
    data,
    loading,
    getData,
    searchParams,
    pagination,
    resetSearchParams,
    handleSortChange,
    handleSizeChange,
    handleCurrentChange,
    refreshData
  } = useTable({
    core: {
      apiFn: listApi,
      apiParams: { direction: 0, limit: 100 },
      columnsFactory: () => [
        { prop: 'start_index', label: 'page.table.startIndex', width: 100, align: 'center' },
        { prop: 'end_index', label: 'page.table.endIndex', width: 110, align: 'center' },
        { prop: 'tier', label: 'page.table.tier', width: 90, align: 'center', sortable: true },
        {
          prop: 'grid_number',
          label: 'page.table.dicePoints',
          width: 120,
          align: 'center',
          sortable: true,
          showOverflowTooltip: true
        },
        {
          prop: 'ui_text',
          label: 'page.table.displayText',
          minWidth: 100,
          align: 'center',
          showOverflowTooltip: true
        },
        { prop: 'remark', label: 'page.table.remark', minWidth: 80, align: 'center', showOverflowTooltip: true },
        { prop: 'weight', label: 'page.table.weight', width: 110, align: 'center' }
      ]
    }
  })

  onMounted(() => {
    searchParams.direction = currentDirection.value
  })
</script>

<style lang="scss" scoped>
  .direction-bar {
    margin-bottom: 12px;
    padding: 8px 0;
  }
</style>
