<template>
  <view class="record-container">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <view class="nav-left" @click="goBack">
        <AppIcon name="chevron-left" size="20" color="#FFFFFF" />
      </view>
      <text class="nav-title">停车券发放记录</text>
      <view class="nav-right"></view>
    </view>

    <!-- 状态筛选 -->
    <view class="filter-bar">
      <view
        v-for="(option, index) in statusOptions"
        :key="index"
        class="filter-item"
        :class="{ active: activeStatus === option.value }"
        @click="handleStatusChange(option.value)">
        <text>{{ option.label }}</text>
      </view>
    </view>

    <!-- 记录列表 -->
    <view class="record-list" v-if="list.length > 0">
      <view
        class="record-item"
        v-for="(item, index) in list"
        :key="index">
        <view class="item-header">
          <text class="item-code">{{ item.code || '-' }}</text>
          <text class="status-tag" :class="item.status === 1 ? 'used' : 'unused'">
            {{ item.status === 1 ? '已使用' : '未使用' }}
          </text>
        </view>
        <view class="item-content">
          <view class="info-row">
            <text class="info-label">用户ID</text>
            <text class="info-value">{{ item.userId || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">站点ID</text>
            <text class="info-value">{{ item.stationId || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">关联订单</text>
            <text class="info-value order">{{ item.orderId || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">过期时间</text>
            <text class="info-value">{{ item.expireTime ? formatTime(item.expireTime) : '-' }}</text>
          </view>
        </view>
        <view class="item-footer">
          <text class="footer-time">发放: {{ formatTime(item.createTime) }}</text>
          <text class="footer-time" v-if="item.status === 1">使用: {{ formatTime(item.usedTime) }}</text>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="list.length > 0">
      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
      <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
      <text class="load-more-text" v-else>没有更多数据了</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="list.length === 0 && !loading">
      <view class="empty-icon-wrapper"><AppIcon name="home" size="48" color="#BFBFBF" /></view>
      <text class="empty-text">暂无停车券发放记录</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading && list.length === 0">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import { getParkingCouponRecordList } from '../../api/parkingCouponRecord.js'
import { formatTime } from '../../utils/index.js'

const list = ref([])
const loading = ref(true)
const page = ref(1)
const pageSize = ref(10)
const hasMore = ref(true)
const loadMoreStatus = ref('more')
const activeStatus = ref('')

const statusOptions = [
  { label: '全部', value: '' },
  { label: '未使用', value: 0 },
  { label: '已使用', value: 1 }
]

const goBack = () => {
  uni.navigateBack()
}

const loadData = async (isLoadMore = false) => {
  if (!isLoadMore) {
    page.value = 1
    list.value = []
    hasMore.value = true
    loadMoreStatus.value = 'more'
  } else {
    loadMoreStatus.value = 'loading'
  }

  loading.value = true
  try {
    const params = {
      pageNum: page.value,
      pageSize: pageSize.value
    }
    if (activeStatus.value !== '') params.status = activeStatus.value

    const res = await getParkingCouponRecordList(params)
    if (res && res.code === 200) {
      const data = res.data
      const records = data.list || data.records || data
      const total = data.total || 0

      const totalPages = Math.ceil(total / pageSize.value)
      hasMore.value = page.value < totalPages
      loadMoreStatus.value = hasMore.value ? 'more' : 'noMore'

      if (isLoadMore) {
        list.value = [...list.value, ...records]
        page.value++
      } else {
        list.value = records
        page.value = 2
      }
    }
  } catch (error) {
    console.error('加载停车券记录失败:', error)
  } finally {
    loading.value = false
  }
}

const loadMore = () => {
  if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') {
    loadData(true)
  }
}

onReachBottom(() => {
  loadMore()
})

const handleStatusChange = (status) => {
  activeStatus.value = status
  loadData()
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.record-container {
  min-height: 100vh;
  background-color: #F5F7FA;
  padding-bottom: 100rpx;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(24rpx + var(--status-bar-height));
  padding-right: 30rpx;
  padding-bottom: 24rpx;
  padding-left: 30rpx;
  background: #C6171E;
}
.nav-left, .nav-right { width: 120rpx; }
.nav-title { font-size: 34rpx; color: #FFFFFF; font-weight: 600; }

.filter-bar {
  display: flex;
  padding: 16rpx 20rpx;
  background-color: #FFFFFF;
  gap: 16rpx;
}
.filter-item {
  padding: 10rpx 24rpx;
  background-color: #F5F5F5;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #666666;
}
.filter-item.active {
  background: #C6171E;
  color: #FFFFFF;
}

.record-list {
  padding: 20rpx;
}
.record-item {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #F0F0F0;
  margin-bottom: 16rpx;
}
.item-code {
  font-size: 24rpx;
  font-weight: 500;
  color: #1A1A1A;
  word-break: break-all;
  flex: 1;
  margin-right: 16rpx;
}
.status-tag {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 500;
  flex-shrink: 0;
}
.status-tag.unused {
  color: #909399;
  background-color: #F4F4F5;
}
.status-tag.used {
  color: #67C23A;
  background-color: #F0F9EB;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8rpx 0;
}
.info-label {
  font-size: 26rpx;
  color: #999999;
}
.info-value {
  font-size: 26rpx;
  color: #1A1A1A;
  max-width: 360rpx;
  text-align: right;
}
.info-value.order {
  font-size: 22rpx;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16rpx;
  border-top: 1rpx solid #F0F0F0;
  margin-top: 16rpx;
}
.footer-time {
  font-size: 22rpx;
  color: #999999;
}

.load-more {
  display: flex;
  justify-content: center;
  padding: 30rpx 0;
}
.load-more-text { font-size: 26rpx; color: #999999; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 0;
}
.empty-text { font-size: 28rpx; color: #999999; }

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 0;
}
.loading-spinner {
  font-size: 60rpx;
  animation: spin 1s linear infinite;
}
.loading-text { font-size: 28rpx; color: #999999; margin-top: 20rpx; }
</style>
