<script lang="ts" setup>
import { getSettlements } from '@/pagesMerchant/api'
import { SettlementStatus } from '@/typings/merchant'
import type { Settlement } from '@/typings/merchant'

definePage({
  style: {
    navigationBarTitleText: '结算记录',
  },
})

const settlements = ref<Settlement[]>([])
const loading = ref(false)

// 状态配置
const statusConfig = {
  [SettlementStatus.PENDING]: { label: '待结算', color: '#ff8f0d' },
  [SettlementStatus.SETTLED]: { label: '已结算', color: '#00c05a' },
}

// 加载数据
async function loadData() {
  loading.value = true
  try {
    const res = await getSettlements()
    settlements.value = res.list
  } finally {
    loading.value = false
  }
}

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

<template>
  <view class="settlement-page">
    <view v-if="settlements.length === 0" class="empty">
      <text class="i-carbon-document"></text>
      <text>暂无结算记录</text>
    </view>
    
    <view v-for="item in settlements" :key="item.id" class="settlement-card">
      <view class="card-header">
        <text class="settlement-no">{{ item.settlementNo }}</text>
        <text class="status" :style="{ color: statusConfig[item.status].color }">
          {{ statusConfig[item.status].label }}
        </text>
      </view>
      
      <view class="card-body">
        <view class="amount-row">
          <text class="label">结算金额</text>
          <text class="amount">¥{{ item.amount.toFixed(2) }}</text>
        </view>
        <view class="info-row">
          <text>订单数：{{ item.orderCount }}笔</text>
          <text>周期：{{ item.period }}</text>
        </view>
      </view>
      
      <view class="card-footer">
        <text class="time">创建时间：{{ item.createTime }}</text>
        <text class="time" v-if="item.settledTime">结算时间：{{ item.settledTime }}</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.settlement-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  box-sizing: border-box;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
  
  text:first-child {
    font-size: 80rpx;
    margin-bottom: 20rpx;
  }
}

.settlement-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    .settlement-no {
      font-size: 26rpx;
      color: #333;
      font-weight: 500;
    }
    
    .status {
      font-size: 24rpx;
      font-weight: 500;
    }
  }
  
  .card-body {
    padding: 20rpx 0;
    
    .amount-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12rpx;
      
      .label {
        font-size: 26rpx;
        color: #666;
      }
      
      .amount {
        font-size: 36rpx;
        font-weight: 700;
        color: #ff8f0d;
      }
    }
    
    .info-row {
      display: flex;
      justify-content: space-between;
      
      text {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  .card-footer {
    padding-top: 16rpx;
    border-top: 1rpx solid #f5f5f5;
    
    .time {
      font-size: 22rpx;
      color: #999;
      display: block;
      
      & + .time {
        margin-top: 4rpx;
      }
    }
  }
}
</style>
