<template>
  <view class="my-coupons">
    <view class="tabs">
      <view
        v-for="tab in tabs"
        :key="tab.value"
        class="tab-item"
        :class="{ active: currentTab === tab.value }"
        @tap="switchTab(tab.value)"
      >
        {{ tab.label }}
      </view>
    </view>

    <!-- 领取优惠券入口 -->
    <view class="claim-entry" @tap="goToCouponCenter">
      <view class="claim-entry-content">
        <u-icon name="coupon" :size="24" color="#667eea" />
        <text class="claim-entry-text">领取更多优惠券</text>
      </view>
      <u-icon name="arrow-right" :size="20" color="#999" />
    </view>

    <view class="coupon-list">
      <view v-if="loading" class="loading">加载中...</view>
      <view v-else-if="list.length === 0" class="empty">暂无优惠券</view>
      <view v-else>
        <view
          v-for="item in list"
          :key="item.id"
          class="coupon-item"
          :class="{ expired: item.status !== 'unused' }"
        >
          <view class="coupon-left">
            <view class="amount">
              <text class="symbol">¥</text>
              <text class="value">{{ formatAmount(item.coupon) }}</text>
            </view>
            <view class="condition">{{ formatCondition(item.coupon) }}</view>
          </view>
          <view class="coupon-right">
            <view class="name">{{ item.coupon.name }}</view>
            <view class="date">{{ item.coupon.startDate }} ~ {{ item.coupon.endDate }}</view>
            <view class="scope">{{ formatScope(item.coupon) }}</view>
            <view class="status">
              <text v-if="item.status === 'unused'" class="status-unused">未使用</text>
              <text v-else-if="item.status === 'used'" class="status-used">已使用</text>
              <text v-else class="status-expired">已过期</text>
            </view>
            <view v-if="item.status === 'used' && item.usedAt" class="used-time">
              使用时间：{{ item.usedAt }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getMyCoupons } from '@/api/coupon';

const tabs = [
  { label: '未使用', value: 'unused' },
  { label: '已使用', value: 'used' },
  { label: '已过期', value: 'expired' },
];

const currentTab = ref('unused');
const list = ref<any[]>([]);
const loading = ref(false);

onMounted(() => {
  fetchList();
});

const switchTab = (tab: string) => {
  currentTab.value = tab;
  fetchList();
};

const fetchList = async () => {
  loading.value = true;
  try {
    const res: any = await getMyCoupons({ status: currentTab.value });
    console.log('我的优惠券原始数据:', res);
    // 处理响应结构：res.data.list 是真正的数据数组
    list.value = res.data?.list || [];
    console.log('解析后的数据:', list.value);
  } catch (e: any) {
    console.error('加载失败:', e);
    uni.showToast({ title: e.message || '加载失败', icon: 'none' });
  } finally {
    loading.value = false;
  }
};

const formatAmount = (coupon: any) => {
  if (coupon.type === 'fixed') {
    return coupon.value;
  }
  return `${coupon.value / 10}折`;
};

const formatCondition = (coupon: any) => {
  if (coupon.minAmount > 0) {
    return `满${coupon.minAmount}元可用`;
  }
  return '无门槛';
};

const formatScope = (coupon: any) => {
  const scopeMap: Record<string, string> = {
    platform: '平台通用',
    merchant: '指定商家',
    room: '指定房源',
  };
  return scopeMap[coupon.scope] || coupon.scope;
};

const goToCouponCenter = () => {
  uni.navigateTo({ url: '/pages/coupon/center' });
};
</script>

<style scoped lang="scss">
.my-coupons {
  min-height: 100vh;
  background: #f5f5f5;
}

.tabs {
  display: flex;
  background: #fff;
  padding: 0 32rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 32rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;

  &.active {
    color: #1890ff;
    font-weight: bold;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 4rpx;
      background: #1890ff;
      border-radius: 2rpx;
    }
  }
}

.claim-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
  margin: 24rpx 32rpx;
  padding: 24rpx 32rpx;
  border-radius: 16rpx;
  border: 2rpx solid #91d5ff;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, #d6f0ff 0%, #e0e8ff 100%);
  }
}

.claim-entry-content {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.claim-entry-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #667eea;
}

.coupon-list {
  padding: 24rpx 32rpx;
}

.loading,
.empty {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

.coupon-item {
  display: flex;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  position: relative;

  &.expired {
    background: linear-gradient(135deg, #bbb 0%, #999 100%);
  }
}

.coupon-left {
  width: 200rpx;
  padding: 32rpx 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-right: 2rpx dashed rgba(255, 255, 255, 0.3);
}

.amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 8rpx;
}

.symbol {
  font-size: 32rpx;
  font-weight: bold;
}

.value {
  font-size: 56rpx;
  font-weight: bold;
}

.condition {
  font-size: 24rpx;
  opacity: 0.9;
}

.coupon-right {
  flex: 1;
  padding: 24rpx;
  color: #fff;
  position: relative;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
}

.date,
.scope {
  font-size: 24rpx;
  opacity: 0.9;
  margin-bottom: 8rpx;
}

.status {
  position: absolute;
  right: 24rpx;
  top: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: bold;
}

.status-unused {
  background: rgba(82, 196, 26, 0.9);
  color: #fff;
}

.status-used {
  background: rgba(255, 255, 255, 0.9);
  color: #999;
}

.status-expired {
  background: rgba(255, 255, 255, 0.5);
  color: #666;
}

.used-time {
  font-size: 24rpx;
  opacity: 0.8;
  margin-top: 8rpx;
}
</style>
