<script lang="ts" setup>
import { getMerchantPendingAssistList, submitAssistMaterial } from '@/api/loan'

definePage({
  style: {
    navigationBarTitleText: '贷款辅助材料',
  },
})

interface LoanItem {
  loanId: string
  userName: string
  amount: number
  applyTime: string
  isExpanded: boolean
  materials: { type: string, url: string, name: string }[]
}

const list = ref<LoanItem[]>([])
const loading = ref(false)

async function loadData() {
  loading.value = true
  try {
    const res = await getMerchantPendingAssistList()
    list.value = res.list.map(item => ({
      ...item,
      isExpanded: false,
      materials: []
    }))
  } finally {
    loading.value = false
  }
}

function handleExpand(item: LoanItem) {
  item.isExpanded = !item.isExpanded
}

function handleUpload(item: LoanItem, type: string, name: string) {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      // 模拟上传
      item.materials.push({
        type,
        name,
        url: res.tempFilePaths[0]
      })
    }
  })
}

function removeMaterial(item: LoanItem, index: number) {
  item.materials.splice(index, 1)
}

async function handleSubmit(item: LoanItem) {
  if (item.materials.length === 0) {
    uni.showToast({ title: '请至少上传一项材料', icon: 'none' })
    return
  }
  
  uni.showLoading({ title: '提交中...' })
  try {
    await submitAssistMaterial(item.loanId, item.materials)
    uni.showToast({ title: '提交成功', icon: 'success' })
    // 移除已处理项
    const idx = list.value.indexOf(item)
    if (idx > -1) list.value.splice(idx, 1)
  } finally {
    uni.hideLoading()
  }
}

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

<template>
  <view class="assist-page">
    <view v-if="loading && list.length === 0" class="loading">加载中...</view>
    
    <view v-else-if="list.length === 0" class="empty">
      <text class="i-carbon-document-blank icon"></text>
      <text>暂无需要提供材料的申请</text>
    </view>
    
    <view class="list">
      <view v-for="item in list" :key="item.loanId" class="card">
        <view class="card-header">
          <view class="info">
            <text class="user">{{ item.userName }}的贷款申请</text>
            <text class="time">{{ item.applyTime }}</text>
          </view>
          <view class="amount">
            <text class="val">{{ item.amount }}</text>
            <text class="unit">万</text>
          </view>
        </view>
        
        <view class="action-area" v-if="!item.isExpanded">
          <button class="btn primary" @click="handleExpand(item)">提供材料</button>
        </view>
        
        <!-- 上传区域 -->
        <view class="upload-area" v-else>
          <view class="upload-tip">请上传与该用户的真实交易凭证</view>
          
          <view class="material-types">
            <view class="type-btn" @click="handleUpload(item, 'invoice', '发票')">
              <text class="i-carbon-receipt"></text> 上传发票
            </view>
            <view class="type-btn" @click="handleUpload(item, 'contract', '合同')">
              <text class="i-carbon-document-pdf"></text> 上传合同
            </view>
            <view class="type-btn" @click="handleUpload(item, 'attachment', '附件')">
              <text class="i-carbon-attachment"></text> 上传附件
            </view>
          </view>
          
          <!-- 已传列表 -->
          <view class="preview-list" v-if="item.materials.length">
            <view v-for="(mat, idx) in item.materials" :key="idx" class="preview-item">
              <image :src="mat.url" mode="aspectFill" />
              <view class="del-btn" @click="removeMaterial(item, idx)">
                <text class="i-carbon-close"></text>
              </view>
              <text class="name">{{ mat.name }}</text>
            </view>
          </view>
          
          <div class="submit-actions">
            <button class="btn" @click="handleExpand(item)">取消</button>
            <button class="btn primary" @click="handleSubmit(item)">确认提交</button>
          </div>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.assist-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20rpx;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
  color: #999;
  
  .icon { font-size: 80rpx; margin-bottom: 20rpx; }
}

.card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
    
    .info {
      display: flex;
      flex-direction: column;
      .user { font-size: 30rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; }
      .time { font-size: 24rpx; color: #999; }
    }
    
    .amount {
      color: #ff8f0d;
      font-weight: bold;
      .val { font-size: 40rpx; }
      .unit { font-size: 24rpx; margin-left: 4rpx; }
    }
  }
}

.action-area {
  border-top: 1rpx solid #f5f5f5;
  padding-top: 20rpx;
  display: flex;
  justify-content: flex-end;
  
  .btn {
    font-size: 26rpx;
    height: 64rpx;
    line-height: 64rpx;
    padding: 0 40rpx;
    border-radius: 32rpx;
    background: #00c05a;
    color: #fff;
  }
}

.upload-area {
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-top: 20rpx;
  
  .upload-tip { font-size: 24rpx; color: #666; margin-bottom: 20rpx; }
  
  .material-types {
    display: flex;
    gap: 20rpx;
    margin-bottom: 20rpx;
    
    .type-btn {
      flex: 1;
      height: 72rpx;
      background: #fff;
      border: 1rpx dashed #ccc;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #666;
      gap: 8rpx;
      
      &:active { background: #e6f7eb; border-color: #00c05a; color: #00c05a; }
    }
  }
  
  .preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    margin-bottom: 20rpx;
    
    .preview-item {
      position: relative;
      width: 120rpx;
      height: 120rpx;
      
      image { width: 100%; height: 100%; border-radius: 8rpx; }
      
      .del-btn {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
        width: 36rpx;
        height: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 20rpx;
      }
      
      .name {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.5);
        color: #fff;
        font-size: 18rpx;
        text-align: center;
        border-bottom-left-radius: 8rpx;
        border-bottom-right-radius: 8rpx;
      }
    }
  }
  
  .submit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 20rpx;
    
    .btn {
      font-size: 26rpx;
      height: 60rpx;
      line-height: 60rpx;
      padding: 0 30rpx;
      border-radius: 30rpx;
      background: #fff;
      border: 1rpx solid #ddd;
      color: #666;
      
      &.primary {
        background: #00c05a;
        border-color: #00c05a;
        color: #fff;
      }
    }
  }
}
</style>
