<script lang="ts" setup>
import { getLoanApplicationList } from '@/api/loan'
import { LoanStatus } from '@/typings/loan'
import type { LoanApplication } from '@/typings/loan'

definePage({
  style: {
    navigationBarTitleText: '审核列表',
    enablePullDownRefresh: true
  },
})

// 状态标签
const tabs = [
  { label: '全部', value: '' },
  { label: '新申请', value: LoanStatus.SUBMITTED },
  { label: '已受理', value: LoanStatus.ACCEPTED },
  { label: '调查中', value: LoanStatus.INVESTIGATING },
  { label: '待审批', value: LoanStatus.REPORTED },
  { label: '已通过', value: LoanStatus.APPROVED },
  { label: '已拒绝', value: LoanStatus.REJECTED },
  { label: '已签约', value: LoanStatus.SIGNED },
  { label: '已放款', value: LoanStatus.DISBURSED },
  { label: '驳回要求补充', value: LoanStatus.PENDING_SUPPLEMENT },
]

const activeTab = ref('')
const keyword = ref('')
const list = ref<LoanApplication[]>([])
const loading = ref(false)

const statusMap: Record<string, { text: string; color: string; bgColor: string }> = {
  [LoanStatus.SUBMITTED]: { text: '新申请', color: '#ff8f0d', bgColor: 'rgba(255, 143, 13, 0.1)' },
  [LoanStatus.ACCEPTED]: { text: '已受理', color: '#4d80f0', bgColor: 'rgba(77, 128, 240, 0.1)' },
  [LoanStatus.INVESTIGATING]: { text: '调查中', color: '#4d80f0', bgColor: 'rgba(77, 128, 240, 0.1)' },
  [LoanStatus.REPORTED]: { text: '待审批', color: '#ff8f0d', bgColor: 'rgba(255, 143, 13, 0.1)' },
  [LoanStatus.APPROVED]: { text: '已通过', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
  [LoanStatus.REJECTED]: { text: '已拒绝', color: '#fa4350', bgColor: 'rgba(250, 67, 80, 0.1)' },
  [LoanStatus.SIGNED]: { text: '已签约', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
  [LoanStatus.DISBURSED]: { text: '已放款', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
  [LoanStatus.PENDING_SUPPLEMENT]: { text: '驳回要求补充', color: '#fa4350', bgColor: 'rgba(250, 67, 80, 0.1)' },
}

async function loadData() {
  loading.value = true
  try {
    const params = {
      status: activeTab.value || undefined,
      keyword: keyword.value
    }
    console.log('loadData - 请求参数:', params)
    console.log('loadData - activeTab.value:', activeTab.value)
    
    const res = await getLoanApplicationList(params)
    console.log('loadData - 返回结果:', res)
    
    list.value = res.list
  } finally {
    loading.value = false
    uni.stopPullDownRefresh()
  }
}

function handleTabChange(value: string) {
  activeTab.value = value
  loadData()
}

function handleSearch() {
  loadData()
}

function handleDetail(id: string) {
  uni.navigateTo({ url: `/pagesBank/audit/detail?id=${id}` })
}

onMounted(() => {
  loadData()
})

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

<template>
  <view class="audit-list-page">
    <!-- 顶部状态栏 -->
    <view class="sticky-header">
      <view class="search-bar">
        <view class="search-input">
          <text class="i-carbon-search"></text>
          <input 
            v-model="keyword" 
            placeholder="搜索申请人/单号" 
            confirm-type="search"
            @confirm="handleSearch"
          />
        </view>
      </view>
      
      <view class="tabs">
        <view 
          v-for="tab in tabs" 
          :key="tab.value"
          class="tab-item"
          :class="{ active: activeTab === tab.value }"
          @click="handleTabChange(tab.value)"
        >
          {{ tab.label }}
          <view class="line"></view>
        </view>
      </view>
    </view>

    <!-- 列表内容 -->
    <view class="list-container">
      <view v-if="loading && list.length === 0" class="loading-state">
        <text>加载中...</text>
      </view>
      
      <view v-else-if="list.length === 0" class="empty-state">
        <text class="i-carbon-document-blank"></text>
        <text>暂无相关贷申请</text>
      </view>
      
      <view
        v-for="item in list"
        :key="item.id"
        class="audit-card"
        @click="handleDetail(item.id)"
      >
        <view class="card-top">
          <view class="merchant-info">
            <text class="merchant-name">{{ item.userName }}的贷款申请</text>
            <text class="time">{{ item.createTime }}</text>
          </view>
          <view class="tags-row">
            <text 
              class="status-tag" 
              :style="{ color: statusMap[item.status]?.color, backgroundColor: statusMap[item.status]?.bgColor }"
            >
              {{ statusMap[item.status]?.text || item.status }}
            </text>
            <!-- 保险状态标识 -->
            <text 
              v-if="item.status === LoanStatus.DISBURSED" 
              class="insurance-tag"
            >
              {{ Math.random() > 0.5 ? '已投保' : '未投保' }}
            </text>
          </view>
        </view>
        
        <view class="card-content">
          <view class="info-row">
            <text class="label">申请金额</text>
            <text class="amount">¥{{ item.amount }}<text class="unit">万</text></text>
          </view>
          <view class="info-row">
            <text class="label">期限</text>
            <text class="val">{{ item.term }}年</text>
          </view>
          <view class="info-row" v-if="item.relatedMerchants.length">
            <text class="label">关联商家</text>
            <text class="val">{{ item.relatedMerchants.length }} 家</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.audit-list-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 30rpx;
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  padding: 20rpx 0 0;
}

.search-bar {
  padding: 0 30rpx 20rpx;
  
  .search-input {
    height: 72rpx;
    background: #f1f3f5;
    border-radius: 36rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    gap: 16rpx;
    
    text {
      font-size: 32rpx;
      color: #adb5bd;
    }
    
    input {
      flex: 1;
      font-size: 26rpx;
    }
  }
}

.tabs {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  border-bottom: 1rpx solid #f1f3f5;
  -webkit-overflow-scrolling: touch;
  
  /* 隐藏滚动条 */
  &::-webkit-scrollbar {
    display: none;
  }
  
  .tab-item {
    flex-shrink: 0;
    padding: 20rpx 24rpx;
    font-size: 28rpx;
    color: #495057;
    position: relative;
    
    &.active {
      color: #00c05a;
      font-weight: 700;
      
      .line {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 6rpx;
        background: #00c05a;
        border-radius: 3rpx;
      }
    }
  }
}

.list-container {
  padding: 24rpx 30rpx;
}

.audit-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
  
  .card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24rpx;
    
    .merchant-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8rpx;
      
      .merchant-name {
        font-size: 30rpx;
        font-weight: 700;
        color: #333;
      }
      .time {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .tags-row {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8rpx;

      .status-tag {
        font-size: 22rpx;
        padding: 6rpx 16rpx;
        border-radius: 8rpx;
        font-weight: 600;
      }

      .insurance-tag {
        font-size: 20rpx;
        color: #00c05a;
        background: rgba(0, 192, 90, 0.1);
        padding: 4rpx 12rpx;
        border-radius: 6rpx;
      }
    }
  }

  .card-content {
    background: #f8f9fa;
    border-radius: 12rpx;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    
    .info-row {
      display: flex;
      flex-direction: column;
      
      .label { font-size: 24rpx; color: #999; margin-bottom: 4rpx; }
      .amount { font-size: 32rpx; font-weight: 700; color: #333; .unit { font-size: 24rpx; font-weight: normal; margin-left: 2rpx; } }
      .val { font-size: 28rpx; color: #333; font-weight: 500; }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #adb5bd;
  gap: 20rpx;
  
  text:first-child {
    font-size: 80rpx;
  }
  
  text:last-child {
    font-size: 28rpx;
  }
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #adb5bd;
  
  text {
    font-size: 28rpx;
  }
}
</style>
