<script lang="ts" setup>
import type { ClaimApplication } from '@/api/types/insurance'
import { getClaimReviewApplications } from '@/api/insurance'

definePage({
  style: {
    navigationBarTitleText: '理赔审核',
  },
})

const loading = ref(false)
const claims = ref<ClaimApplication[]>([])
const currentTab = ref('pending')

// 状态映射
const statusMap: Record<string, { text: string, color: string }> = {
  pending: { text: '待审核', color: '#F59E0B' },
  approved: { text: '已通过', color: '#00c05a' },
  rejected: { text: '已拒绝', color: '#fa4350' },
}

const tabs = [
  { key: 'pending', label: '待审核' },
  { key: 'approved', label: '已通过' },
  { key: 'rejected', label: '已拒绝' },
]

// 筛选后的列表
const filteredClaims = computed(() => {
  if (currentTab.value === 'pending') {
    return claims.value.filter(c => c.status === 'pending')
  }
  return claims.value.filter(c => c.status === currentTab.value)
})

// 切换标签
function handleTabChange(tab: string) {
  currentTab.value = tab
}

// 查看详情
function handleViewDetail(id: string) {
  uni.navigateTo({
    url: `/pagesInsurance/claim-review/detail?id=${id}`,
  })
}

// 加载列表
async function loadList() {
  loading.value = true
  try {
    const res = await getClaimReviewApplications()
    claims.value = res.list
  }
  finally {
    loading.value = false
  }
}

onShow(() => {
  loadList()
})
</script>

<template>
  <view class="claim-review-list-page">
    <!-- 标签页 -->
    <view class="tabs">
      <view
        v-for="tab in tabs"
        :key="tab.key"
        class="tab-item"
        :class="{ active: currentTab === tab.key }"
        @click="handleTabChange(tab.key)"
      >
        <text class="tab-text">{{ tab.label }}</text>
        <view v-if="currentTab === tab.key" class="tab-indicator" />
      </view>
    </view>

    <!-- 列表 -->
    <view v-if="loading" class="loading-state">
      加载中...
    </view>

    <view v-else-if="filteredClaims.length > 0" class="claim-list">
      <view
        v-for="claim in filteredClaims"
        :key="claim.id"
        class="claim-item"
        @click="handleViewDetail(claim.id)"
      >
        <view class="claim-header">
          <view class="claim-info">
            <text class="claim-id">理赔申请号: {{ claim.id }}</text>
            <text class="bank-name">{{ claim.bankName }}</text>
          </view>
          <view
            class="status-tag"
            :style="{ background: statusMap[claim.status]?.color }"
          >
            {{ statusMap[claim.status]?.text }}
          </view>
        </view>

        <view class="claim-body">
          <view class="claim-row">
            <text class="label">保险单号</text>
            <text class="value">{{ claim.policyNumber }}</text>
          </view>
          <view class="claim-row">
            <text class="label">保险公司</text>
            <text class="value">{{ claim.companyName }}</text>
          </view>
          <view class="claim-row">
            <text class="label">理赔金额</text>
            <text class="value amount">{{ claim.claimAmount }}元</text>
          </view>
          <view class="claim-row">
            <text class="label">理赔原因</text>
            <text class="value reason">{{ claim.claimReason }}</text>
          </view>
          <view class="claim-row">
            <text class="label">提交时间</text>
            <text class="value">{{ claim.submittedAt }}</text>
          </view>
          <view v-if="claim.payoutAmount" class="claim-row">
            <text class="label">赔付金额</text>
            <text class="value payout">{{ claim.payoutAmount }}元</text>
          </view>
          <view v-if="claim.payoutDate" class="claim-row">
            <text class="label">赔付日期</text>
            <text class="value">{{ claim.payoutDate }}</text>
          </view>
          <view v-if="claim.rejectionReason" class="claim-row">
            <text class="label">拒绝原因</text>
            <text class="value reject">{{ claim.rejectionReason }}</text>
          </view>
        </view>

        <view class="claim-footer">
          <text class="material-count">已上传 {{ claim.materials.length }} 份材料</text>
          <text class="arrow-icon i-carbon-chevron-right" />
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="empty-state">
      <text class="empty-icon i-carbon-document" />
      <text class="empty-text">暂无理赔申请</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.claim-review-list-page {
  min-height: 100vh;
  background: #f5f7fa;
}

.tabs {
  background: #fff;
  display: flex;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f5f5f5;

  .tab-item {
    flex: 1;
    position: relative;
    padding: 30rpx 0;
    text-align: center;
    font-size: 28rpx;
    color: #666;

    &.active {
      color: #00c05a;
      font-weight: 600;
    }

    .tab-text {
      position: relative;
      z-index: 1;
    }

    .tab-indicator {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 4rpx;
      background: #00c05a;
      border-radius: 2rpx;
    }
  }
}

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
}

.claim-list {
  padding: 20rpx;

  .claim-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 16rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .claim-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .claim-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8rpx;

        .claim-id {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
        }

        .bank-name {
          font-size: 24rpx;
          color: #666;
        }
      }

      .status-tag {
        padding: 8rpx 20rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        color: #fff;
      }
    }

    .claim-body {
      background: #f8f9fa;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-bottom: 16rpx;

      .claim-row {
        display: flex;
        justify-content: space-between;
        padding: 12rpx 0;
        font-size: 26rpx;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .label {
          color: #666;
        }

        .value {
          color: #333;
          text-align: right;
          flex: 1;

          &.amount {
            color: #ff8f0d;
            font-weight: 600;
          }

          &.reason {
            text-align: left;
            line-height: 1.5;
          }

          &.payout {
            color: #00c05a;
            font-weight: 600;
          }

          &.reject {
            color: #fa4350;
            text-align: left;
            line-height: 1.5;
          }
        }
      }
    }

    .claim-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12rpx;

      .material-count {
        font-size: 24rpx;
        color: #999;
      }

      .arrow-icon {
        font-size: 28rpx;
        color: #ccc;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;

  .empty-icon {
    font-size: 80rpx;
    margin-bottom: 20rpx;
    color: #ccc;
  }

  .empty-text {
    font-size: 26rpx;
  }
}
</style>
