<template>
  <view class="detail-page">
    <!-- 基本信息卡片 -->
    <view class="section">
      <view class="section-header">
        <uni-icons type="paperclip" size="18" color="#AD181F"></uni-icons>
        <text class="section-title">结算信息</text>
      </view>
      <view class="info-grid">
        <view class="info-item">
          <text class="label">结算编号</text>
          <text class="value">{{ form.code || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">缴费名称</text>
          <text class="value">{{ form.name || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">缴费单位</text>
          <text class="value">{{ form.memName || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">考试人数</text>
          <text class="value">{{ form.personCount }}</text>
        </view>
        <view class="info-item">
          <text class="label">费用合计</text>
          <text class="value">{{ form.originPrice }}</text>
        </view>
        <view class="info-item">
          <text class="label">结算金额</text>
          <text class="value"> {{ form.price }}</text>
        </view>
         <view class="info-item">
          <text class="label">支付方式</text>
          <text class="value"> 民生付</text>
        </view>
          <view class="info-item">
          <text class="label">提交日期</text>
          <text class="value"> {{form.commitTime}}</text>
        </view>
          <view class="info-item">
          <text class="label">结算日期</text>
          <text class="value"> {{ form.auditTime }}</text>
        </view>
           <view class="info-item">
          <text class="label">下载发票</text>
          <text class="value link" @click="handelInvoice(form.fileUrl)"> 下载发票</text>
        </view>
      </view>
    </view>

    <!-- 结算状态 Tab -->
    <view class="tab-section">
      <view class="tab-bar">
        <view
          class="tab-item"
          :class="{ active: submitFlag === '' }"
          @click="handleTabChange('')"
        >全部</view>
        <view
          class="tab-item"
          :class="{ active: submitFlag === '1' }"
          @click="handleTabChange('1')"
        >已结算</view>
        <view
          class="tab-item"
          :class="{ active: submitFlag === '0' }"
          @click="handleTabChange('0')"
        >未结算</view>
      </view>
    </view>

    <!-- 统计卡片 -->
    <view class="stats-grid">
      <view class="stat-card">
        <view class="stat-label">费用合计</view>
        <view class="stat-value text-red">¥{{ statistical.totalCost?.toFixed(2) || '0.00' }}</view>
      </view>
      <view class="stat-card">
        <view class="stat-label">人数合计</view>
        <view class="stat-value">{{ statistical.totalNum || 0 }}<text class="stat-unit">人</text></view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-wrap" v-if="loading">
      <uni-load-more status="loading"></uni-load-more>
    </view>

    <!-- 列表区域 -->
    <view class="list-section" v-else>
      <view class="list-item" v-for="(item, index) in infoList" :key="index">
        <view class="item-row">
          <text class="item-label">缴费编号</text>
          <text class="item-value">{{ item.payCode || '-' }}</text>
        </view>
        <view class="item-row">
          <text class="item-label">缴费名称</text>
          <text class="item-value">{{ item.name || '-' }}</text>
        </view>
        <view class="item-row">
          <text class="item-label">缴费单位</text>
          <text class="item-value">{{ item.memberName || '-' }}</text>
        </view>
        <view class="item-row">
          <text class="item-label">考试人数</text>
          <text class="item-value">{{ item.totalNum || 0 }} 人</text>
        </view>
        <view class="item-row">
          <text class="item-label">总金额</text>
          <text class="item-value text-red">¥{{ Number(item.totalAmount || 0).toFixed(2) }}</text>
        </view>
        <view class="item-row">
          <text class="item-label">支付方式</text>
          <text class="item-value">民生付</text>
        </view>
        <view class="item-row">
          <text class="item-label">审核状态</text>
          <text class="item-value" :class="getVerityStatusClass(item.verityStatus)">
            {{ item.verityStatusStr || '-' }}
          </text>
        </view>
        <view class="item-row">
          <text class="item-label">结算状态</text>
          <text class="item-value" :class="item.submitId ? 'text-success' : 'text-warning'">
            {{ item.submitId ? '已结算' : '未结算' }}
          </text>
        </view>
        <view class="item-row">
          <text class="item-label">提交日期</text>
          <text class="item-value">{{ formatDate(item.submitTime) }}</text>
        </view>
        <view class="item-row" v-if="item.verityDate">
          <text class="item-label">审核日期</text>
          <text class="item-value">{{ formatDate(item.verityDate) }}</text>
        </view>
      </view>

      <!-- 无数据 -->
      <view class="empty-tip" v-if="infoList.length === 0">
        <text>暂无数据</text>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="total > 0">
      <uni-load-more :status="noMore ? 'noMore' : (loadingMore ? 'loading' : 'more')"></uni-load-more>
    </view>
  </view>
</template>

<script setup>
import * as api from '@/common/api_exam.js'
import config from '@/config.js'
import { ref, reactive, computed } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'

const loading = ref(false)
const form = ref({})
const infoList = ref([])
const total = ref(0)
const statistical = ref({
  totalCost: 0,
  totalNum: 0
})
const submitFlag = ref('')
const loadingMore = ref(false)

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  payIds: '',
  submitFlag: '',
  type: 1
})

let settlementId = ''

onLoad((options) => {
  if (options.item) {
    try {
      const item = JSON.parse(decodeURIComponent(options.item))
      settlementId = item.id
      // 结算信息从列表带过来
      form.value = item
      queryParams.payIds = item.payids || ''
      getList()
    } catch (e) {
      console.error('解析结算信息失败', e)
      uni.showToast({ title: '参数错误', icon: 'none' })
      setTimeout(() => uni.navigateBack(), 1500)
    }
  } else {
    uni.showToast({ title: '参数错误', icon: 'none' })
    setTimeout(() => uni.navigateBack(), 1500)
  }
})

// 上拉加载下一页
onReachBottom(() => {
  if (!loadingMore.value && infoList.value.length < total.value) {
    queryParams.pageNum++
    getList(true)
  }
})

async function getList(isLoadMore = false) {
  if (isLoadMore) {
    loadingMore.value = true
  } else {
    loading.value = true
    queryParams.pageNum = 1
    // 重置合计
    statistical.value = { totalCost: 0, totalNum: 0 }
  }

  try {
    const res = await api.paymentList(queryParams)
    if (isLoadMore) {
      infoList.value = [...infoList.value, ...(res.rows || [])]
    } else {
      infoList.value = res.rows || []
    }
    total.value = res.total || 0

    // 计算合计
    if (!isLoadMore) {
      infoList.value.forEach(info => {
        statistical.value.totalCost += (info.totalAmount * 1)
        statistical.value.totalNum += (info.totalNum * 1)
      })
    }
  } catch (err) {
    console.error('获取列表失败', err)
    uni.showToast({ title: '获取数据失败', icon: 'none' })
  } finally {
    loading.value = false
    loadingMore.value = false
  }
}

function handleTabChange(val) {
  submitFlag.value = val
  queryParams.submitFlag = val
  getList()
}

const noMore = computed(() => infoList.value.length >= total.value && total.value > 0)

function formatDate(dateStr) {
  if (!dateStr) return '-'
  if (typeof dateStr === 'string' && dateStr.indexOf('T') > -1) {
    return dateStr.slice(0, 10)
  }
  return dateStr
}

function getVerityStatusClass(status) {
  const map = {
    '1': 'text-success',
    '2': 'text-danger',
    '3': 'text-warning'
  }
  return map[status] || ''
}

function handelInvoice(fileUrl) {
  console.log('fileUrl', fileUrl)
  if (!fileUrl) {
    uni.showToast({ title: '暂无发票', icon: 'none' })
    return
  }
  try {
    const invoice = JSON.parse(fileUrl)
    if (invoice && invoice.length > 0) {
      let url = invoice[0].url
      const fileName = invoice[0].name || ''
      // 避免使用可选链操作符，确保兼容性
      let ext = ''
      if (fileName) {
        const parts = fileName.split('.')
        if (parts.length > 1) {
          ext = parts[parts.length - 1].toLowerCase()
        }
      }
      console.log('发票信息:', { url, fileName, ext })
      // 判断是否需要拼接 baseUrl
      if (url.indexOf('http') === -1) {
        url = config.baseUrl_api + url
      }
      console.log('完整下载地址:', url)
      uni.showLoading({ title: '下载中' })
      uni.downloadFile({
        url: url,
        success: (res) => {
          console.log('下载成功:', res)
          uni.hideLoading()
          if (res.statusCode === 200) {
            // 图片类型用 previewImage 预览
            if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) {
              uni.previewImage({
                urls: [res.tempFilePath],
                success: () => {
                  console.log('预览成功')
                },
                fail: (err) => {
                  console.error('预览失败:', err)
                  uni.showToast({ title: '预览失败', icon: 'none' })
                }
              })
            } else {
              // PDF 等文档用 openDocument 打开
              uni.openDocument({
                filePath: res.tempFilePath,
                showMenu: true,
                success: () => {
                  console.log('打开文档成功')
                },
                fail: (err) => {
                  console.error('打开失败:', err)
                  uni.showToast({ title: '打开失败', icon: 'none' })
                }
              })
            }
          } else {
            uni.showToast({ title: '下载失败: ' + res.statusCode, icon: 'none' })
          }
        },
        fail: (err) => {
          console.error('下载失败:', err)
          uni.hideLoading()
          uni.showToast({ title: '下载失败', icon: 'none' })
        }
      })
    } else {
      uni.showToast({ title: '暂无发票', icon: 'none' })
    }
  } catch (e) {
    console.error('发票信息解析失败:', e)
    uni.showToast({ title: '发票信息解析失败', icon: 'none' })
  }
}
</script>

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

.section {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  padding: 24rpx 24rpx 20rpx;
  border-bottom: 1rpx solid #eee;

  .section-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    margin-left: 10rpx;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding: 8rpx 24rpx 24rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  

  .label {
    font-size: 26rpx;
    color: #999;
    flex-shrink: 0;
  }

  .value {
    font-size: 26rpx;
    color: #333;
    text-align: right;
    flex: 1;
    margin-left: 20rpx;
    word-break: break-all;

    &.link {
      color: #1890ff;
    }
  }
}

/* Tab 页 */
.tab-section {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.tab-bar {
  display: flex;
  padding: 0 24rpx;
}

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

  &.active {
    color: #AD181F;
    font-weight: 600;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 4rpx;
      background: #AD181F;
      border-radius: 2rpx;
    }
  }
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.stat-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .stat-label {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 12rpx;
  }

  .stat-value {
    font-size: 36rpx;
    font-weight: 700;
    color: #333;
  }

  .stat-unit {
    font-size: 24rpx;
    font-weight: 400;
    color: #999;
  }

  .text-red {
    color: #AD181F;
  }
}

/* 加载 */
.loading-wrap {
  padding: 100rpx 0;
  text-align: center;
}

/* 列表 */
.list-section {
  margin-bottom: 20rpx;
}

.list-item {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 24rpx;
  border-bottom: 1rpx solid #f5f5f5;

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

  .item-label {
    font-size: 26rpx;
    color: #999;
    flex-shrink: 0;
  }

  .item-value {
    font-size: 26rpx;
    color: #333;
    text-align: right;
    flex: 1;
    margin-left: 20rpx;
    word-break: break-all;
  }

  .text-red {
    color: #AD181F;
  }

  .text-success {
    color: #52c41a;
  }

  .text-warning {
    color: #fa8c16;
  }

  .text-danger {
    color: #f5222d;
  }
}

.empty-tip {
  text-align: center;
  padding: 60rpx 0;
  color: #999;
  font-size: 28rpx;
}

/* 加载更多 */
.load-more {
  padding: 20rpx 0;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}
</style>