<template>
  <div class="signconfig-table">
    <el-table :data="data" v-loading="loading" border stripe>
      <el-table-column prop="id" label="ID" width="70" align="center" />
      
      <el-table-column prop="title" label="标题" min-width="120">
        <template #default="{ row }">
          {{ row.title || '-' }}
        </template>
      </el-table-column>
      
      <el-table-column label="图标" width="80" align="center">
        <template #default="{ row }">
          <el-image
            v-if="row.icon"
            :src="row.icon"
            :preview-src-list="[row.icon]"
            fit="cover"
            class="icon-preview"
            preview-teleported
          />
          <span v-else class="no-data">-</span>
        </template>
      </el-table-column>
      
      <el-table-column label="天数" width="80" align="center">
        <template #default="{ row }">
          <span>{{ row.day || '-' }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="奖励信息" min-width="200">
        <template #default="{ row }">
          <div v-if="row.rewards && row.rewards.length > 0" class="reward-list">
            <el-tag
              v-for="(reward, index) in row.rewards"
              :key="index"
              :type="getRewardTagType(reward.rewardType)"
              size="small"
              class="reward-tag"
            >
              {{ getRewardLabel(reward) }}
            </el-tag>
          </div>
          <span v-else class="no-data">暂无奖励</span>
        </template>
      </el-table-column>
      
      <el-table-column label="排序" width="100" align="center">
        <template #default="{ row }">
          <el-input-number
            v-model="row.sort"
            :min="0"
            :max="9999"
            size="small"
            controls-position="right"
            @change="(val: number) => handleSortChange(row, val)"
          />
        </template>
      </el-table-column>
      
      <el-table-column label="状态" width="80" align="center">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            @change="(val: number) => handleStatusChange(row, val)"
          />
        </template>
      </el-table-column>
      
      <el-table-column label="创建时间" width="160" align="center">
        <template #default="{ row }">
          {{ row.createdAt || '-' }}
        </template>
      </el-table-column>
      
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button type="warning" link size="small" @click="handleEditReward(row)">
            奖励
          </el-button>
          <el-button type="danger" link size="small" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="currentPageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
      class="pagination"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import {
  type SignConfigResponse
} from '@/api/business/signconfig'
import {
  RewardType,
  RewardTypeLabels,
  type RewardResponse
} from '@/api/business/reward'

interface Props {
  data: SignConfigResponse[]
  loading: boolean
  total: number
  page: number
  pageSize: number
  signType: number
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'page-change', page: number): void
  (e: 'size-change', size: number): void
  (e: 'edit', row: SignConfigResponse): void
  (e: 'edit-reward', row: SignConfigResponse): void
  (e: 'delete', row: SignConfigResponse): void
  (e: 'status-change', row: SignConfigResponse, status: number): void
  (e: 'sort-change', row: SignConfigResponse, sort: number): void
}>()

const currentPage = ref(props.page)
const currentPageSize = ref(props.pageSize)

watch(() => props.page, (val) => {
  currentPage.value = val
})

watch(() => props.pageSize, (val) => {
  currentPageSize.value = val
})

// 获取奖励类型标签样式
const getRewardTagType = (type: number): string => {
  switch (type) {
    case RewardType.Diamond:
      return 'primary'
    case RewardType.UUCoin:
      return 'success'
    case RewardType.DaDaCoin:
      return 'warning'
    case RewardType.Coupon:
      return 'danger'
    default:
      return 'info'
  }
}

// 获取奖励显示文本
const getRewardLabel = (reward: RewardResponse): string => {
  const typeName = RewardTypeLabels[reward.rewardType] || '未知'
  if (reward.rewardType === RewardType.Coupon) {
    return reward.coupon?.title || `优惠券(ID:${reward.rewardExtend})`
  }
  return `${typeName}: ${reward.rewardValue}`
}

const handlePageChange = (page: number) => {
  emit('page-change', page)
}

const handleSizeChange = (size: number) => {
  emit('size-change', size)
}

const handleEdit = (row: SignConfigResponse) => {
  emit('edit', row)
}

const handleEditReward = (row: SignConfigResponse) => {
  emit('edit-reward', row)
}

const handleDelete = (row: SignConfigResponse) => {
  emit('delete', row)
}

const handleStatusChange = (row: SignConfigResponse, status: number) => {
  emit('status-change', row, status)
}

const handleSortChange = (row: SignConfigResponse, sort: number) => {
  emit('sort-change', row, sort)
}
</script>

<style scoped>
.signconfig-table {
  width: 100%;
}

.icon-preview {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

.reward-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.reward-tag {
  margin: 2px;
}

.no-data {
  color: #909399;
  font-size: 12px;
}

.pagination {
  margin-top: 16px;
  justify-content: flex-end;
}
</style>
