<template>
  <view class="page">
    <NavBar title="优惠券管理" :showBack="true" />

    <view class="search-bar">
      <input class="search-input" v-model="keyword" placeholder="搜索优惠券名称" placeholder-class="search-ph" confirm-type="search" @confirm="handleSearch" />
    </view>

    <scroll-view class="list-scroll" scroll-y @scrolltolower="loadMore">
      <view class="card-set">
        <view class="card" v-for="item in list" :key="item.id" @click="goDetail(item.id)">
          <view class="card-head">
            <view class="card-left">
              <view class="top-row">
                <text class="card-name">{{ item.name }}</text>
                <text class="card-amount">{{ item.type === 1 ? '¥' + (item.amount || 0) : (item.discount || 0) + '%' }}</text>
              </view>
              <view class="card-meta">
                <text class="meta-type">{{ CouponTypeText[item.type] || '未知' }}</text>
                <text class="meta-range" v-if="item.minAmount">满¥{{ item.minAmount }}可用</text>
              </view>
              <text class="card-time">{{ item.startTime }} ~ {{ item.endTime }}</text>
            </view>
            <view class="card-right">
              <view class="card-status" :class="statusClass(item.status)">
                <text>{{ CouponStatusText[item.status] || '未知' }}</text>
              </view>
            </view>
          </view>
          <view class="card-foot" v-if="item.statistics">
            <text class="foot-stat">已领: {{ item.statistics.receivedCount || 0 }}</text>
            <text class="foot-stat">已用: {{ item.statistics.usedCount || 0 }}</text>
          </view>
        </view>
      </view>
      <view class="load-tip" v-if="loading"><view class="dot-row"><view class="pulse-dot"></view><view class="pulse-dot"></view><view class="pulse-dot"></view></view></view>
      <view class="end-tip" v-if="!hasMore && list.length > 0"><text>没有更多了</text></view>
      <view class="empty-state" v-if="!loading && list.length === 0"><text class="empty-text">暂无优惠券数据</text></view>
    </scroll-view>

    <view class="bottom-btn" @click="goDetail(0)"><text>新建优惠券</text></view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import NavBar from '@/components/NavBar.vue';
import { getCouponList } from '@/api/coupon';
import { CouponTypeText, CouponStatusText, DEFAULT_PAGE_SIZE } from '@/utils/constants';

const list = ref<any[]>([]);
const loading = ref(false);
const hasMore = ref(true);
const page = ref(1);
const pageSize = DEFAULT_PAGE_SIZE;
const keyword = ref('');

const statusClass = (status: number) => {
  if (status === 1) return 'on';
  if (status === 2) return 'off';
  return 'draft';
};

const loadData = async () => {
  loading.value = true;
  try {
    const params: any = { page: page.value, pageSize };
    if (keyword.value) params.name = keyword.value;
    const res = await getCouponList(params);
    if (page.value === 1) list.value = res.list || [];
    else list.value = [...list.value, ...(res.list || [])];
    hasMore.value = list.value.length < (res.total || 0);
  } catch (e) { console.error('加载优惠券列表失败', e); }
  loading.value = false;
};

const loadMore = () => { if (loading.value || !hasMore.value) return; page.value++; loadData(); };
const handleSearch = () => { page.value = 1; hasMore.value = true; list.value = []; loadData(); };
const goDetail = (id: number) => { uni.navigateTo({ url: `/pages/marketing/coupon-detail?id=${id}` }); };

onMounted(() => loadData());
</script>

<style lang="scss" scoped>
.page { height: 100vh; background: $bg-color-page; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.search-bar { padding: $spacing-2 $spacing-3; background: $bg-color-card; }
.search-input { width: 100%; height: 68rpx; background: $bg-color-page; border-radius: 40rpx; padding: 0 24rpx; font-size: $font-size-base; box-sizing: border-box; }
.search-ph { color: $text-color-muted; font-size: 26rpx; }
.list-scroll { flex: 1; height: 0; }
.card-set { padding: 20rpx 24rpx; display: flex; flex-direction: column; gap: 16rpx; }
.card { background: $bg-color-card; border-radius: $radius-md; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.card-left { flex: 1; min-width: 0; }
.top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8rpx; }
.card-name { font-size: 30rpx; font-weight: 600; color: $text-color-primary; }
.card-amount { font-size: 36rpx; font-weight: 700; color: $primary-color-dark; }
.card-meta { display: flex; gap: 12rpx; margin-bottom: 6rpx; }
.meta-type { font-size: 22rpx; color: $primary-color-dark; background: $primary-color-bg; padding: 2rpx 10rpx; border-radius: 6rpx; }
.meta-range { font-size: 22rpx; color: $text-color-muted; }
.card-time { font-size: 22rpx; color: $text-color-muted; }
.card-right { flex-shrink: 0; }
.card-status { padding: 4rpx 14rpx; border-radius: 8rpx; font-size: 22rpx; font-weight: 500; }
.card-status.on { background: $success-color-bg; color: $success-color; }
.card-status.off { background: $bg-color-page; color: $text-color-muted; }
.card-status.draft { background: $warning-color-bg; color: $warning-color; }
.card-foot { display: flex; gap: 24rpx; margin-top: 16rpx; padding-top: 14rpx; border-top: 1rpx solid $border-color-light; }
.foot-stat { font-size: 24rpx; color: $text-color-secondary; }
.load-tip { display: flex; justify-content: center; padding: 36rpx 0; }
.dot-row { display: flex; gap: 8rpx; }
.pulse-dot { width: 9rpx; height: 9rpx; background: $text-color-placeholder; border-radius: 50%; animation: pulse 1.2s ease-in-out infinite; }
.pulse-dot:nth-child(2) { animation-delay: 0.2s; } .pulse-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse { 0%,80%,100% { transform: scale(0.5); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
.end-tip { text-align: center; padding: 36rpx; font-size: 24rpx; color: $text-color-muted; }
.empty-state { display: flex; align-items: center; justify-content: center; padding: 100rpx 0; }
.empty-text { font-size: 28rpx; color: $text-color-muted; }
.bottom-btn { background: $primary-color; margin: 20rpx 24rpx; padding: 28rpx 0; border-radius: $radius-xl; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bottom-btn text { font-size: $font-size-lg; font-weight: 600; color: $text-color-primary; }
</style>
