<template>
  <view class="settlement-audit-page">
    <!-- Tab 切换 -->
    <view class="tab-bar">
      <view
        v-for="tab in tabs"
        :key="tab.value"
        :class="['tab-item', { active: status === tab.value }]"
        @click="onTabChange(tab.value)"
      >
        {{ tab.text }}
      </view>
    </view>

    <!-- 列表区域 -->
    <scroll-view scroll-y class="list-container" @scrolltolower="loadMore">
      <view v-for="item in infoList" :key="item.id" class="list-item">
        <!-- 选择框 -->
        <view class="checkbox-wrap">
          <checkbox-group @change="onCheckboxChange(item.id)">
            <label>
              <checkbox :value="item.id" :checked="isChecked(item.id)" :disabled="item.status != '1'" color="#C4121B" />
            </label>
          </checkbox-group>
        </view>

        <!-- 头部信息 -->
        <view class="item-header">
          <text class="code" @click="goDetail(item)">{{ item.code }}</text>
          <text :class="['status-tag', 'status-' + item.status]">{{ statusArr[item.status] }}</text>
        </view>

        <!-- 主体信息 -->
        <view class="item-body">
          <view class="info-row">
            <text class="label">结算名称</text>
            <text class="value">{{ item.name }}</text>
          </view>
          <view class="info-row">
            <text class="label">结算单位</text>
            <text class="value">{{ item.memName }}</text>
          </view>
          <view class="info-row">
            <text class="label">考试人数</text>
            <text class="value">{{ item.personCount }}人</text>
          </view>
          <view class="info-row">
            <text class="label">费用合计</text>
            <text class="value primary">¥{{ item.originPrice }}</text>
          </view>
          <view class="info-row">
            <text class="label">结算金额</text>
            <text class="value red">¥{{ item.price }}</text>
          </view>
          <view class="info-row">
            <text class="label">结算状态</text>
            <text :class="['value', item.status == '2' ? 'green' : item.status == '3' ? 'red' : '']">{{ item.verityStatusStr }}</text>
          </view>
        </view>

        <!-- 底部信息 -->
        <view class="item-footer">
          <view class="footer-left">
            <text class="date">提交: {{ formatDate(item.commitTime) }}</text>
            <text v-if="item.auditTime" class="date">审核: {{ formatDate(item.auditTime) }}</text>
          </view>
          <view class="footer-right">
            <text v-if="item.fileUrl" class="invoice-btn" @click="downloadInvoice(item)">发票</text>
            <view v-else class="invoice-btn disabled">发票</view>
            <button
              v-if="item.status == '1'"
              class="btn-settle"
              @click="openSettlement(item)"
            >结算</button>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="infoList.length === 0 && !loading" class="empty">
        <text>暂无数据</text>
      </view>

      <!-- 加载更多 -->
      <view v-if="loading" class="loading-more">
        <text>加载中...</text>
      </view>
      <view v-if="noMore && infoList.length > 0" class="loading-more">
        <text>没有更多了</text>
      </view>
    </scroll-view>

    <!-- 底部统计和批量按钮 -->
    <view v-if="selectedIds.length > 0" class="bottom-bar">
      <view class="stat-left">
        <text class="stat-item">人数: <text class="value">{{ selectedStatistical.personCount }}</text></text>
        <text class="stat-item">费用: <text class="value">¥{{ selectedStatistical.originPrice?.toFixed(2) }}</text></text>
        <text class="stat-item">结算: <text class="value red">¥{{ selectedStatistical.price?.toFixed(2) }}</text></text>
      </view>
      <view class="btn-right">
        <button class="batch-btn" @click="openBatchSettlement">
          批量结算审核 ({{ selectedIds.length }})
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import {onShow} from '@dcloudio/uni-app'
import * as api from '@/common/api.js'
import config from '@/config.js'
import _ from 'underscore'

const tabs = ref([
  { value: '', text: '全部' },
  { value: '1', text: '待结算' },
  { value: '2', text: '结算通过' },
  { value: '3', text: '结算拒绝' }
])
const statusArr = ref(['未提交', '待结算', '结算通过', '结算拒绝'])
const status = ref('')
const infoList = ref([])
const loading = ref(false)
const noMore = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)

const selectedIds = ref([])

const statistical = ref({
  personCount: 0,
  originPrice: 0,
  price: 0
})

// 选中项的统计
const selectedStatistical = computed(() => {
  let personCount = 0
  let originPrice = 0
  let price = 0
  _.each(infoList.value, (info) => {
    if (selectedIds.value.includes(info.id)) {
      personCount += (info.personCount * 1)
      originPrice += (info.originPrice * 1)
      price += (info.price * 1)
    }
  })
  return { personCount, originPrice, price }
})

onMounted(() => {
  getList()
})

function onTabChange(value) {
  status.value = value
  pageNum.value = 1
  infoList.value = []
  selectedIds.value = []
  noMore.value = false
  getList()
}

async function getList() {
  if (loading.value) return
  loading.value = true

  try {
    const params = {
      status: status.value,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }

    const res = await api.settlementList(params)

    if (pageNum.value === 1) {
      infoList.value = res.rows || []
    } else {
      infoList.value = [...infoList.value, ...(res.rows || [])]
    }

    total.value = res.total || 0
    noMore.value = infoList.value.length >= total.value

    // 计算统计
    calculateStatistical()
  } catch (err) {
    console.error('获取结算列表失败', err)
  } finally {
    loading.value = false
  }
}

function calculateStatistical() {
  statistical.value = {
    personCount: 0,
    originPrice: 0,
    price: 0
  }
  _.each(infoList.value, (info) => {
    statistical.value.personCount += (info.personCount * 1)
    statistical.value.originPrice += (info.originPrice * 1)
    statistical.value.price += (info.price * 1)
  })
}

function loadMore() {
  if (!noMore.value && !loading.value) {
    pageNum.value++
    getList()
  }
}

function formatDate(dateStr) {
  if (!dateStr) return '-'
  return dateStr.substring(0, 10)
}

// 复选框选择
function onCheckboxChange(id) {
  const index = selectedIds.value.indexOf(id)
  if (index > -1) {
    selectedIds.value.splice(index, 1)
  } else {
    selectedIds.value.push(id)
  }
}

function isChecked(id) {
  return selectedIds.value.includes(id)
}

// 进入详情页
function goDetail(item) {
  const data = encodeURIComponent(JSON.stringify(item))
  uni.navigateTo({
    url: `/level/settlementView?data=${data}`
  })
}

// 下载发票
function downloadInvoice(item) {
  if (!item.fileUrl) {
    uni.showToast({ title: '暂无发票', icon: 'none' })
    return
  }
  try {
    const invoice = JSON.parse(item.fileUrl)
    if (invoice && invoice[0]?.url) {
      let fileUrl = invoice[0].url
      // 确保 URL 格式正确
      if (!fileUrl.startsWith('http')) {
        fileUrl = config.baseUrl_api + fileUrl
      }

      // 小程序中使用 previewImage 预览，让用户长按保存
      uni.previewImage({
        urls: [fileUrl],
        success: () => {
          console.log('previewImage success')
        },
        fail: (err) => {
          console.error('previewImage fail:', err)
          uni.showToast({ title: '打开图片失败', icon: 'none' })
        }
      })
    } else {
      uni.showToast({ title: '发票文件不存在', icon: 'none' })
    }
  } catch (e) {
    console.error('解析发票数据失败', e)
    uni.showToast({ title: '解析发票数据失败', icon: 'none' })
  }
}

// 打开结算审核 - 跳转到审核页面
function openSettlement(item) {
  const ids = item.id
  uni.navigateTo({
    url: `/pages/rank/scoreAudit?ids=${ids}&pageType=3`
  })
}

// 批量结算审核 - 跳转到审核页面
function openBatchSettlement() {
  if (selectedIds.value.length === 0) {
    uni.showToast({ title: '请先选择要结算的项目', icon: 'none' })
    return
  }
  const ids = selectedIds.value.join(',')
  uni.navigateTo({
    url: `/pages/rank/scoreAudit?ids=${ids}&pageType=3`
  })
}

function handleQuery() {
  pageNum.value = 1
  infoList.value = []
  noMore.value = false
  getList()
}

// 页面显示时刷新列表
onShow(() => {
  handleQuery()
})
</script>

<style lang="scss" scoped>
.settlement-audit-page {
  min-height: 100vh;
  background: #f5f5f5;
}

/* Tab 切换 */
.tab-bar {
  display: flex;
  background: #fff;
  padding: 20rpx 0;

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

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

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

/* 列表区域 */
.list-container {
  height: calc(100vh - 180rpx);
}

.list-item {
  position: relative;
  background: #fff;
  margin: 20rpx 30rpx;
  border-radius: 12rpx;
  padding: 24rpx;
}

/* 复选框 */
.checkbox-wrap {
  position: absolute;
  top: 44rpx;
  left: 20rpx;
  transform: translateY(-50%);
  z-index: 10;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding-left: 60rpx;

  .code {
    font-size: 30rpx;
    color: #1561cb;
    font-weight: 600;
  }

  .status-tag {
    font-size: 24rpx;
    padding: 4rpx 16rpx;
    border-radius: 20rpx;

    &.status-1 { background: #fff3e0; color: #ff9800; }
    &.status-2 { background: #e8f5e9; color: #4caf50; }
    &.status-3 { background: #ffebee; color: #f44336; }
  }
}

.item-body {
  .info-row {
    display: flex;
    justify-content: space-between;
    padding: 6rpx 0;

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

    .value {
      font-size: 26rpx;
      color: #333;

      &.primary { color: #333; }
      &.red { color: #C4121B; font-weight: 600; }
      &.green { color: #4caf50; font-weight: 600; }
    }
  }
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;

  .footer-left {
    display: flex;
    flex-direction: column;

    .date {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 4rpx;
    }
  }

  .footer-right {
    display: flex;
    align-items: center;
    gap: 16rpx;

    .invoice-btn {
      font-size: 26rpx;
      color: #1561cb;

      &.disabled {
        color: #ccc;
      }
    }

    .btn-settle {
        padding: 0rpx 20rpx;
        background: #fff;
        color: #C4121B;
        font-size: 24rpx;
        border: 2rpx solid #C4121B;
        border-radius: 35rpx;
        width: 150rpx;

      &::after {
        border: none;
      }
    }
  }
}

/* 空状态 */
.empty {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

.loading-more {
  text-align: center;
  padding: 20rpx;
  color: #999;
  font-size: 24rpx;
}

/* 底部栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  box-sizing: border-box;

  .stat-left {
    flex: 1;
    display: flex;
    gap: 20rpx;

    .stat-item {
      font-size: 24rpx;
      color: #666;

      .value {
        font-weight: 600;
        color: #333;

        &.red {
          color: #C4121B;
        }
      }
    }
  }

  .btn-right {
    .batch-btn {
     padding: 0rpx 30rpx;
      background: #C4121B;
      color: #fff;
      font-size: 28rpx;
      border-radius: 40rpx;

      &::after {
        border: none;
      }
    }
  }
}
</style>