<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Plus, Refresh, VideoPlay } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getSeckillPageApi, createSeckillApi, endSeckillApi } from '@/api/seckill'
import type { SeckillActivity } from '@/api/seckill'
import { SECKILL_STATUS_MAP } from '@/utils/dict'
import { formatDate } from '@/utils/date'
import SearchBar from '@/components/common/SearchBar.vue'

const loading = ref(false)
const list = ref<SeckillActivity[]>([])
const total = ref(0)

const query = reactive({ current: 1, size: 10 })

const dialogVisible = ref(false)
const form = reactive({
  name: '',
  startTime: '',
  endTime: ''
})

async function fetchData() {
  loading.value = true
  try {
    const res: any = await getSeckillPageApi(query)
    list.value = res.records
    total.value = res.total
  } finally {
    loading.value = false
  }
}

function openAdd() {
  Object.assign(form, { name: '', startTime: '', endTime: '' })
  dialogVisible.value = true
}

async function handleSubmit() {
  await createSeckillApi(form)
  ElMessage.success('创建成功')
  dialogVisible.value = false
  fetchData()
}

async function handleEnd(row: any) {
  await ElMessageBox.confirm(
    `确定要提前结束活动【${row.name}】吗？结束后商品将恢复原价`,
    '提示',
    { type: 'warning' }
  )
  await endSeckillApi(row.id)
  ElMessage.success('活动已结束')
  fetchData()
}

function statusType(s: number) {
  return s === 0 ? 'info' : s === 1 ? 'success' : 'warning'
}

onMounted(fetchData)
</script>

<template>
  <div class="page-container">
    <div class="page-header">
      <div>
        <h2>限时抢购</h2>
        <p class="page-desc">管理限时秒杀活动场次与商品</p>
      </div>
      <el-button type="primary" :icon="Plus" @click="openAdd">创建活动</el-button>
    </div>

    <!-- 数据概览 -->
    <el-row :gutter="16">
      <el-col :span="6">
        <el-card shadow="never" class="overview-card">
          <div class="ov-label">进行中活动</div>
          <div class="ov-value text-success">2</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" class="overview-card">
          <div class="ov-label">未开始活动</div>
          <div class="ov-value text-primary">1</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" class="overview-card">
          <div class="ov-label">总参与人次</div>
          <div class="ov-value">8,562</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" class="overview-card">
          <div class="ov-label">活动总销售额</div>
          <div class="ov-value text-danger">¥ 156,890</div>
        </el-card>
      </el-col>
    </el-row>

    <el-card shadow="never" class="table-card">
      <SearchBar show-divider>
        <el-button :icon="Refresh" @click="fetchData">刷新</el-button>
      </SearchBar>

      <el-table v-loading="loading" :data="list" stripe>
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column prop="name" label="活动名称" min-width="220" />
        <el-table-column label="开始时间" width="170">
          <template #default="{ row }">{{ formatDate(row.startTime) }}</template>
        </el-table-column>
        <el-table-column label="结束时间" width="170">
          <template #default="{ row }">{{ formatDate(row.endTime) }}</template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="statusType(row.status) as any" size="small">
              {{ SECKILL_STATUS_MAP[row.status as keyof typeof SECKILL_STATUS_MAP] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" align="center">
          <template #default="{ row }">
            <el-button link type="primary" size="small">查看商品</el-button>
            <el-button link type="primary" size="small">数据统计</el-button>
            <el-button
              v-if="row.status === 1"
              link
              type="warning"
              size="small"
              :icon="VideoPlay"
              @click="handleEnd(row)"
            >结束活动</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="query.current"
          v-model:page-size="query.size"
          :total="total"
          layout="total, prev, pager, next"
          background
          @current-change="fetchData"
        />
      </div>
    </el-card>

    <el-dialog v-model="dialogVisible" title="创建抢购活动" width="540px">
      <el-form :model="form" label-width="100px" size="large">
        <el-form-item label="活动名称" required>
          <el-input v-model="form.name" placeholder="如：618 限时秒杀" />
        </el-form-item>
        <el-form-item label="开始时间" required>
          <el-date-picker v-model="form.startTime" type="datetime" style="width: 100%" />
        </el-form-item>
        <el-form-item label="结束时间" required>
          <el-date-picker v-model="form.endTime" type="datetime" style="width: 100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">下一步：添加商品</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.overview-card {
  :deep(.el-card__body) {
    padding: 20px;
  }
  .ov-label {
    font-size: 13px;
    color: $color-text-secondary;
  }
  .ov-value {
    font-size: 24px;
    font-weight: 600;
    margin-top: 8px;
  }
  .text-success { color: $color-success; }
  .text-primary { color: $brand-primary; }
  .text-danger  { color: $color-danger; }
}
.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px;
}
</style>
