<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '我的优惠券',
  },
}
</route>

<template>
  <view class="bg-white min-h-screen">
    <view class="space-y-4">
      <!-- 优惠券列表 -->
      <view class="sticky-box-content w-100vw" v-if="couponList.length">
        <view class="coupon-list">
          <view class="coupon-item" v-for="item in couponList" :key="item.coupon2id">
            <view class="coupon-header">
              <text class="coupon-code">券码: {{ item.coupon2code }}</text>
              <wd-tag :type="item.coupon2isused ? 'primary' : 'success'" custom-class="status-tag">
                {{ item.coupon2isused ? '已使用' : '未使用' }}
              </wd-tag>
            </view>
            <view class="coupon-content">
              <view class="coupon-info">
                <text>卷名: {{ item.coupon2mc || '暂无卷名' }}</text>
              </view>
              <view class="coupon-info">
                <text>产品: {{ item.productsname || '暂无产品信息' }}</text>
              </view>
              <view class="coupon-info">
                <text>添加时间: {{ formatDate(item.coupon2adddatetime) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="sticky-box-content w-100vw" v-else>
        <wd-status-tip image="content" tip="暂无优惠券" />
      </view>

      <!-- loading -->
      <wd-overlay :show="overlayShow">
        <view class="wrapper w-full h-full flex items-center justify-center">
          <wd-loading />
        </view>
      </wd-overlay>

      <!-- 回到首页 -->
      <view class="sticky-box-content w-full box-border px-2 pb-2">
        <wd-button type="primary" block @click="handleBack">回到首页</wd-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useCouponStore } from '@/store/coupon'
import { useAppStore } from '@/store/app'

const appStore = useAppStore()
const couponStore = useCouponStore()
const couponList = ref([])
const overlayShow = ref(false)

// 格式化日期
function formatDate(dateStr) {
  if (!dateStr) return '--'
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

function handleBack() {
  uni.switchTab({
    url: '/pages/index/index',
  })
}

onLoad(() => {
  overlayShow.value = true

  // 调用获取优惠券列表接口
  couponStore
    .getCoupon2List({ coupon2userid: appStore.appInfo.userid })
    .then((res) => {
      couponList.value = res.Data
      overlayShow.value = false
    })
    .finally(() => {
      overlayShow.value = false
    })
})
</script>

<style lang="scss" scoped>
.coupon-list {
  padding: 0 12px;
}

.coupon-item {
  position: relative;
  padding: 12px;
  margin-bottom: 12px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.coupon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid #f5f5f5;
}

.coupon-code {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.status-tag {
  flex-shrink: 0;
}

.coupon-content {
  padding: 8px 0;
}

.coupon-info {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}
</style>
