<template>
  <div class="coin-exchange-record-page">
    <!-- 顶部标题 -->
    <div class="page-header">
      <div class="header-content">
        <div class="back-btn" @click="goBack">
          <van-icon name="arrow-left" size="20" />
        </div>
        <div class="header-title">金币兑换记录</div>
        <div class="header-placeholder"></div>
      </div>
    </div>

    <!-- 记录列表 -->
    <div class="record-container">
      <div v-if="recordList.length > 0" class="record-list">
        <div v-for="(record, index) in recordList" :key="index" class="record-item">
          <div class="record-content">
            <div class="record-header">
              <!-- <div class="record-id">兑换编号: {{ record.id }}</div>
              <div class="record-status" :class="record.status">
                {{ getStatusText(record.status) }}
              </div> -->
            </div>

            <div class="record-info">
              <div class="record-user">
                <div class="user-details">
                  <!-- <div class="user-name">{{ record.targetUser.nickname }}</div> -->
                  <div class="user-id">兑换钻石（ID: {{ record.relationId }}）</div>
                  <div class="record-time">{{ formatTime(record.createTime) }}</div>
                </div>
              </div>

              <div class="exchange-details">
                <div class="exchange-item">
                  <span class="label">兑换金币:</span>
                  <span class="value coin">-{{ record.amount }}</span>
                </div>
                <div class="exchange-item">
                  <span class="label">获得钻石:</span>
                  <span class="value diamond">+{{ record.amount * 10 }}</span>
                </div>
              </div>
            </div>

            <!-- <div class="record-footer">
              <div class="record-time">{{ formatTime(record.createTime) }}</div>
            </div> -->
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else class="empty-state">
        <div class="empty-icon">
          <van-icon name="records" size="64" color="#CCCCCC" />
        </div>
        <div class="empty-text">暂无兑换记录</div>
        <div class="empty-desc">您还没有进行过金币兑换</div>
      </div>
    </div>

    <!-- 加载更多 -->
    <div v-if="hasMore && recordList.length > 0" class="load-more">
      <van-button type="default" size="small" :loading="loading" @click="loadMore" class="load-more-btn">
        {{ loading ? '加载中...' : '加载更多' }}
      </van-button>
    </div>
  </div>
</template>

<script>
import { getIntegralExchangeGoldCoinStreamList } from '@/api/coin'

export default {
  name: 'CoinExchangeRecordPage',
  data() {
    return {
      recordList: [],
      loading: false,
      hasMore: true,
      page: 1,
      pageSize: 50
    }
  },
  created() {
    this.loadRecords()
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },

    // 加载兑换记录
    async loadRecords(isLoadMore = false) {
      if (this.loading) return

      this.loading = true

      try {
        const res = await getIntegralExchangeGoldCoinStreamList(this.page)
        console.log('兑换记录', res)
        if (isLoadMore) {
          this.recordList.push(...res.data.list)
        } else {
          this.recordList = res.data.list
        }
        console.log('兑换记录', this.recordList)
        this.hasMore = res.data.hasMore

        if (isLoadMore && res.data.list.length > 0) {
          // 页码在loadMore方法中已经递增
        }

      } catch (error) {
        this.$toast.fail('加载失败，请重试')
        console.error('加载兑换记录失败:', error)

        // 加载失败时恢复页码
        if (isLoadMore && this.page > 1) {
          this.page--
        }
      } finally {
        this.loading = false
      }
    },

    // 加载更多
    async loadMore() {
      this.page++
      await this.loadRecords(true)
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'success': '兑换成功',
        'pending': '兑换中',
        'failed': '兑换失败'
      }
      return statusMap[status] || '未知状态'
    },

    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp)

      // 格式化为 yyyy-mm-dd hh:mm:ss
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }
  }
}
</script>

<style scoped>
.coin-exchange-record-page {
  min-height: 100vh;
  background-color: var(--background-color);
}

/* 页面头部 */
.page-header {
  background: var(--card-background);
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

.header-placeholder {
  width: 40px;
}

/* 记录容器 */
.record-container {
  padding: 16px;
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 记录项 */
.record-item {
  background: var(--card-background);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.record-content {
  padding: 16px;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.record-id {
  font-size: 14px;
  color: var(--text-lighter-color);
}

.record-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.record-status.success {
  background: #E8F5E8;
  color: #52C41A;
}

.record-status.pending {
  background: #FFF7E6;
  color: #FA8C16;
}

.record-status.failed {
  background: #FFF2F0;
  color: #FF4D4F;
}

/* 记录信息 */
.record-info {
  /* margin-bottom: 12px; */
}

.record-user {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  background: var(--input-background);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  color: var(--text-lighter-color);
}

.user-details {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 2px;
}

.user-id {
  font-size: 12px;
  color: var(--text-lighter-color);
}

/* 兑换详情 */
.exchange-details {
  background: var(--input-background);
  border-radius: 8px;
  padding: 12px;
}

.exchange-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.exchange-item:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 14px;
  color: var(--text-color);
}

.value {
  font-size: 14px;
  font-weight: 600;
}

.value.coin {
  color: #FF6B6B;
}

.value.diamond {
  color: var(--primary-color);
}

/* 记录底部 */
.record-footer {
  display: flex;
  justify-content: flex-end;
}

.record-time {
  font-size: 12px;
  color: var(--text-lighter-color);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  margin-bottom: 16px;
}

.empty-text {
  font-size: 16px;
  color: var(--text-color);
  margin-bottom: 8px;
}

.empty-desc {
  font-size: 14px;
  color: var(--text-lighter-color);
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 20px;
}

.load-more-btn {
  background: var(--card-background);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 8px 24px;
  border-radius: 20px;
}

.load-more-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* 响应式设计 */
@media (max-width: 375px) {
  .record-content {
    padding: 12px;
  }

  .record-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .exchange-details {
    padding: 10px;
  }

  .exchange-item {
    font-size: 13px;
  }
}
</style>