<template>
  <div class="goods-table">
    <el-table :data="data" v-loading="loading" border stripe>
      <!-- ID -->
      <el-table-column prop="id" label="ID" width="80" align="center" />

      <!-- 盒子类型 -->
      <el-table-column prop="typeName" label="类型" width="100" align="center">
        <template #default="{ row }">
          <el-tag size="small">{{ row.typeName || GoodsTypeLabels[row.type] || '未知' }}</el-tag>
        </template>
      </el-table-column>

      <!-- 盒子图片 -->
      <el-table-column label="图片" width="80" align="center">
        <template #default="{ row }">
          <el-image
            :src="row.imgUrl"
            :preview-src-list="[row.imgUrl]"
            fit="cover"
            style="width: 50px; height: 50px; border-radius: 4px;"
            preview-teleported
          >
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>

      <!-- 盒子名称 -->
      <el-table-column prop="title" label="盒子名称" min-width="180">
        <template #default="{ row }">
          <div class="goods-title">{{ row.title }}</div>
        </template>
      </el-table-column>

      <!-- 价格 -->
      <el-table-column prop="price" label="价格" width="100" align="right">
        <template #default="{ row }">
          <span class="money">¥{{ row.price?.toFixed(2) || '0.00' }}</span>
        </template>
      </el-table-column>

      <!-- 套数/库存 -->
      <el-table-column label="库存" width="120" align="center">
        <template #default="{ row }">
          <div class="stock-info">
            <div>总: {{ row.stock || 0 }}</div>
            <div class="text-muted">剩: {{ row.remainingStock || 0 }}</div>
          </div>
        </template>
      </el-table-column>

      <!-- 抽奖门槛 -->
      <el-table-column label="门槛" width="80" align="center">
        <template #default="{ row }">
          <span v-if="row.choujiangXianzhi > 0" class="threshold-value">{{ row.choujiangXianzhi }}</span>
          <span v-else class="text-muted">-</span>
        </template>
      </el-table-column>

      <!-- 解锁金额 -->
      <el-table-column label="解锁金额" width="100" align="center">
        <template #default="{ row }">
          <span v-if="row.unlockAmount > 0" class="unlock-value">¥{{ row.unlockAmount }}</span>
          <span v-else class="text-muted">-</span>
        </template>
      </el-table-column>

      <!-- 福利屋时间信息 -->
      <el-table-column label="时间配置" width="180" v-if="hasFuLiWuType">
        <template #default="{ row }">
          <div v-if="row.type === 15" class="time-info">
            <div v-if="row.flwStartTime">开始: {{ formatTime(row.flwStartTime) }}</div>
            <div v-if="row.flwEndTime">结束: {{ formatTime(row.flwEndTime) }}</div>
            <div v-if="row.openTime">开奖: {{ formatTime(row.openTime) }}</div>
          </div>
          <span v-else class="text-muted">-</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)"
            style="width: 80px"
          />
        </template>
      </el-table-column>

      <!-- 状态 -->
      <el-table-column label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            :disabled="row.status === 2"
            @change="(val: number) => handleStatusChange(row, val)"
          />
          <el-tag v-if="row.status === 2" type="info" size="small" style="margin-left: 4px">售罄</el-tag>
        </template>
      </el-table-column>

      <!-- 创建时间 -->
      <el-table-column prop="createdAt" label="创建时间" width="160" align="center">
        <template #default="{ row }">
          <span class="text-muted">{{ row.createdAt }}</span>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" width="320" fixed="right">
        <template #default="{ row }">
          <div class="action-buttons">
            <el-button type="primary" link @click="handleCommand('edit', row)">
              <el-icon><Edit /></el-icon>编辑
            </el-button>
            <el-button type="success" link @click="handleCommand('prizes', row)">
              <el-icon><Present /></el-icon>奖品
            </el-button>
            <el-button type="warning" link @click="handleCommand('copy', row)">
              <el-icon><CopyDocument /></el-icon>复制
            </el-button>
            <el-dropdown trigger="click" @command="(cmd: string) => handleCommand(cmd, row)">
              <el-button type="info" link>
                更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="extend">
                    <el-icon><Setting /></el-icon>扩展设置
                  </el-dropdown-item>
                  <el-dropdown-item command="delete" divided>
                    <el-icon><Delete /></el-icon>删除
                  </el-dropdown-item>
                  <el-dropdown-item command="clearLottery">
                    <el-icon color="#F56C6C"><Warning /></el-icon>
                    <span style="color: #F56C6C">清空抽奖</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </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, computed } from 'vue'
import { 
  Picture, Edit, Present, CopyDocument, ArrowDown, 
  Setting, Delete, Warning 
} from '@element-plus/icons-vue'
import { GoodsTypeLabels, type GoodsListItem } from '@/api/business/goods'

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

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'page-change', page: number): void
  (e: 'size-change', size: number): void
  (e: 'command', command: string, row: GoodsListItem): void
  (e: 'status-change', row: GoodsListItem, status: number): void
  (e: 'sort-change', row: GoodsListItem, sort: number): void
}>()

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

// 检查是否有福利屋类型的数据
const hasFuLiWuType = computed(() => {
  return props.data.some(item => item.type === 15)
})

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

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

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

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

const handleCommand = (command: string, row: GoodsListItem) => {
  emit('command', command, row)
}

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

const handleSortChange = (row: GoodsListItem, sort: number) => {
  emit('sort-change', row, sort)
}

// 格式化时间
const formatTime = (time: string | null) => {
  if (!time) return '-'
  return time.replace('T', ' ').substring(0, 16)
}
</script>

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

.goods-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money {
  color: #e6a23c;
  font-weight: 500;
}

.stock-info {
  font-size: 12px;
  line-height: 1.6;
}

.time-info {
  font-size: 11px;
  line-height: 1.5;
  color: #606266;
}

.text-muted {
  color: #909399;
  font-size: 12px;
}

.threshold-value {
  color: #e6a23c;
  font-weight: 500;
}

.unlock-value {
  color: #409eff;
  font-weight: 500;
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background: #f5f7fa;
  color: #909399;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

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