<template>
  <view class="policy-card" @tap="handleCardClick">
    <view class="policy-header">
      <view class="policy-info">
        <text class="policy-name">{{ policy.application?.insurance_type?.name }}</text>
        <StatusBadge 
          :status="policy.status" 
          type="policy" 
          size="small"
        />
      </view>
      <text class="policy-number">{{ policy.policy_number }}</text>
    </view>
    
    <view class="policy-content">
      <view class="info-row">
        <text class="info-label">保险金额</text>
        <text class="info-value">{{ formatAmount(policy.coverage_amount) }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">年保费</text>
        <text class="info-value primary">¥{{ policy.premium_amount }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">保险期间</text>
        <text class="info-value">{{ formatDateRange(policy.start_date, policy.end_date) }}</text>
      </view>
    </view>
    
    <view class="policy-footer">
      <text class="create-date">投保时间：{{ formatDate(policy.created_at) }}</text>
    </view>
  </view>
</template>

<script setup>
import StatusBadge from './StatusBadge.vue'

// 定义属性
const props = defineProps({
  policy: {
    type: Object,
    required: true,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['click'])

// 格式化金额
const formatAmount = (amount) => {
  if (!amount) return '0万'
  if (amount >= 10000) {
    return (amount / 10000).toFixed(0) + '万'
  }
  return amount.toString()
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 格式化日期范围
const formatDateRange = (startDate, endDate) => {
  if (!startDate || !endDate) return ''
  const start = new Date(startDate).toLocaleDateString('zh-CN')
  const end = new Date(endDate).toLocaleDateString('zh-CN')
  return `${start} - ${end}`
}

// 处理卡片点击
const handleCardClick = () => {
  emit('click', props.policy)
}
</script>

<style scoped>
.policy-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.policy-header {
  margin-bottom: 20rpx;
}

.policy-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.policy-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.policy-number {
  font-size: 24rpx;
  color: #999;
}

.policy-content {
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #666;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.info-value.primary {
  color: #1890ff;
  font-weight: bold;
}

.policy-footer {
  text-align: right;
}

.create-date {
  font-size: 24rpx;
  color: #999;
}
</style>