<template>
	<view>
		<uni-segmented-control class="whitebg" :current="current" :values="navs" @clickItem="onClickItem"
			styleType="text" activeColor="#AD181F"></uni-segmented-control>

		<view class="appList">
			<view class="appItem" v-for="item in infoList" :key="item.examId" @click="goDetail(item)">
				<view class="status" :class="{
                'text-primary-bg': item.status=='1',
                'text-success-bg': item.status=='2',
                'text-danger-bg':  item.status=='3'
				}" >
					{{ item.statusStr || '待提交' }}
				</view>

				<view class="date" v-if="item.commitTime">提交时间：{{ item.commitTime.substring(0,10) }}</view>
				<view class="text-primary">{{ item.examCode }}</view>
				<view class="name mt10" >{{ item.name }}</view>
				<view class="flexbox" >
					<view>
						考试人数
						<view>{{ item.totalNum }}</view>
					</view>
					<view>
						支付方式
						<view>
							{{ item.ziZhangBu ? '对公转账' : '民生付' }}
						</view>
					</view>
					<view>
						总金额
						<view>¥{{ item.price }}</view>
					</view>
				</view>
				<view class="pp esp">上报单位：{{ item.memberName }}</view>

				<view class="func" v-if="item.status=='1'">
					<button @click.stop="goApproval(item)">审批</button>
				</view>
			</view>
		</view>

		<!-- 上滑加载提示 -->
		<view class="load-tip" v-if="infoList.length > 0">
			<text v-if="loading">加载中...</text>
			<text v-else-if="noMore">没有更多数据了</text>
		</view>

		<!-- 空数据 -->
		<view class="nodata" v-if="infoList.length == 0 && !loading">
			<image mode="aspectFit" :src="config.baseUrl_api + '/fs/static/nodata.png'"></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

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

	const app = getApp()

	// 导航栏对应 status 值
	const statusValues = ['', '1', '2', '3']
	const navs = ref(['全部', '审批中', '审批通过', '审批拒绝'])
	const current = ref(0)

	const queryParams = ref({
		status: '',
		auditSelectType: '1',
		auditFlag: '1',
		pageNum: 1,
		pageSize: 10
	})

	const infoList = ref([])
	const total = ref(0)
	const totalCost = ref(0)
	const totalNum = ref(0)
	const loading = ref(false)
	const noMore = ref(false)

	onShow(() => {
		if (app.globalData.isLogin) {
			refreshList()
		} else {
			app.firstLoadCallback = () => {
				refreshList()
			}
		}
	})

	// 刷新列表（重置第一页）
	function refreshList() {
		queryParams.value.pageNum = 1
		noMore.value = false
		infoList.value = []
		getList()
	}

	// 上滑加载下一页
	onReachBottom(() => {
		if (loading.value || noMore.value) return
		queryParams.value.pageNum++
		getList()
	})

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

		if (queryParams.value.pageNum === 1) {
			uni.showLoading({ title: '加载中', mask: true })
		}

		totalCost.value = 0
		totalNum.value = 0

		api.examauditList(queryParams.value).then(response => {
			loading.value = false
			uni.hideLoading()

			const list = response.rows || []
			total.value = response.total || 0

			// 分页追加
			if (queryParams.value.pageNum === 1) {
				infoList.value = list
			} else {
				infoList.value = [...infoList.value, ...list]
			}

			// 判断是否还有更多
			if (list.length < queryParams.value.pageSize) {
				noMore.value = true
			}

			// 统计
			infoList.value.forEach(item => {
				totalCost.value += Number(item.price) || 0
				totalNum.value += Number(item.totalNum) || 0
			})
		}).catch(() => {
			loading.value = false
			uni.hideLoading()
		})
	}

	function onClickItem(e) {
		current.value = e.currentIndex
		queryParams.value.status = statusValues[e.currentIndex]
		refreshList()
	}

	function goDetail(item) {
		uni.navigateTo({
			url: `/pages/rank/applyDetail?examId=${item.examId}&type=1`
		})
	}

	function goApproval(item) {
		uni.navigateTo({
			url: `/level/ztx/memberAuditPage?ids=${item.examId}`
		})
	}
</script>

<style scoped lang="scss">
	.mt0 {
		margin-top: 0 !important;
	}

	.stat-row {
		display: flex;
		gap: 40rpx;
		padding: 20rpx 30rpx;
		background: #f3e5e5;
		font-size: 26rpx;
		color: #666;

		.red {
			color: #C4121B;
			font-weight: 600;
		}
	}

	.appList .appItem .name {
		width: 100%;
		word-break: break-all;
	}

	/* 加载提示样式 */
	.load-tip {
		text-align: center;
		padding: 20rpx 0;
		font-size: 26rpx;
		color: #999;
	}
</style>