<template>
	<view class="content">
		<!-- 选择时间区域 -->
		<view class="time">
			<view class="time_box" :class="{ active: currentIndex == index }" v-for="(item, index) in timeList" :key="item.id" @click="changeTimeIndex(index)">
				{{ item.name }}
			</view>
		</view>

		<!-- 列表区域 -->
		<view class="list">
			<!-- 每一个记录区域 -->
			<view class="list_box" v-for="item in dataList" :key="item.id">
				<!-- 申请状态区域 -->
				<view class="box_status ing" v-if="item.passName == '待审核'">审核中</view>
				<view class="box_status pass" v-if="item.passName == '已通过'">已通过</view>
				<view class="box_status nopass" v-if="item.passName == '已拒绝'">驳回</view>
				<!-- 姓名 -->
				<view class="box_item">
					<view class="item_key">姓名：</view>
					<view class="item_value">{{ item.name }}</view>
				</view>

				<!-- 微卡 -->
				<view class="box_item">
					<view class="item_key">微卡：</view>
					<view class="item_value">{{ item.cardNumber }}</view>
				</view>

				<!-- 手机 -->
				<view class="box_item">
					<view class="item_key">手机：</view>
					<view class="item_value">{{ item.phone }}</view>
				</view>

				<!-- 学院 -->
				<view class="box_item">
					<view class="item_key">学院：</view>
					<view class="item_value">{{ item.collegeName ? item.collegeName + '-' : '' }}{{ item.majorName ? item.majorName + '-' : '' }}{{ item.className }}</view>
				</view>
				<!-- 创建时间 -->
				<view class="box_item">
					<view class="item_key">创建时间：</view>
					<view class="item_value">{{ item.createTime }}</view>
				</view>

				<!-- 上榜方式 -->
				<view class="box_item">
					<view class="item_key">上榜方式：</view>
					<view class="item_value">{{ item.preferredMethodName }}</view>
				</view>

				<!-- 照片 -->
				<view class="box_item">
					<view class="item_key">照片：</view>
					<view class="item_value">
						<image class="img" :src="item.image" mode="aspectFill" @click="clickImg(item.image)"></image>
					</view>
				</view>

				<!-- 人物简介 -->
				<view class="box_item">
					<view class="item_key">人物简介：</view>
				</view>
				<view class="box_desc">
					{{ item.descript }}
				</view>

				<!-- 驳回原因 -->
				<view class="box_item" v-if="item.passValue">
					<view class="item_key">驳回原因：</view>
				</view>
				<view class="box_desc">
					{{ item.passValue }}
				</view>
			</view>
		</view>

		<!-- 没有数据时展示的页面 -->
		<noData v-if="!dataList.length"></noData>
	</view>
</template>

<script setup>
import { onReachBottom } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue'
import { getWeekTypes, getApplicationRecord } from '@/api/index.js'

// 时间分段器数组
const timeList = ref([])
// 时间分段器当前索引
const currentIndex = ref(0)
// 当前页
const currentPage = ref(1)
// 每页多少条
const pageCount = ref(6)
// 总条数
const total = ref(0)
// 列表数据
const dataList = ref([])

onMounted(() => {
	// 获取时间类型列表数据
	getWeekData()
})

// 页面触底触发的回调
onReachBottom(() => {
	if (total.value > dataList.value.length) {
		currentPage.value++
		getDataList()
	} else {
		uni.showToast({
			title: '没有更多数据了~~',
			icon: 'none'
		})
	}
})

// 获取时间类型列表数据
const getWeekData = async () => {
	const res = await getWeekTypes()
	// console.log(res)
	timeList.value = res.data

	// 获取我的申请分页数据
	getDataList()
}

// 获取我的申请分页数据
const getDataList = async () => {
	let data = {
		currentPage: currentPage.value,
		pageCount: pageCount.value,
		weekType: timeList.value[currentIndex.value].id
	}
	const res = await getApplicationRecord(data)
	// console.log(res)
	dataList.value = [...dataList.value, ...res.data.list]
	total.value = res.data.totalCount
}

// 分段器切换回调
const changeTimeIndex = (e) => {
	if (currentIndex.value != e) {
		currentIndex.value = e
		currentPage.value = 1
		dataList.value = []
		getDataList()
	}
}

// 点击图片回调
const clickImg = (e) => {
	uni.previewImage({
		urls: [e]
	})
}
</script>

<style lang="scss" scoped>
.content {
	.time {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;
		width: 712rpx;
		height: 90rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		background-color: #f2f7ff;

		.time_box {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 211rpx;
			height: 71rpx;
			border-radius: 8rpx;
		}

		.active {
			font-size: 30rpx;
			color: #0061ff;
			border: 2rpx solid #0061ff;
			background-color: rgba(0, 97, 255, 0.1);
		}
	}

	.list {
		margin-top: 28rpx;
		font-size: 28rpx;

		.list_box {
			position: relative;
			margin-bottom: 20rpx;
			padding: 15rpx 30rpx;
			width: 714rpx;
			line-height: 50rpx;
			border-radius: 28rpx;
			box-shadow: 0 4rpx 35rpx rgba(211, 211, 211, 0.32);

			.box_status {
				position: absolute;
				top: 27rpx;
				right: 23rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 128rpx;
				height: 55rpx;
				color: #fff;
				border-radius: 71rpx 40rpx 0 70rpx;
			}

			.ing {
				background: linear-gradient(90deg, #ff7045 0%, #f7a172 100%);
			}

			.pass {
				background: linear-gradient(90deg, #366fff 0%, #5da0fc 100%);
			}

			.nopass {
				background: linear-gradient(90deg, #d43030 0%, #f56c6c 100%);
			}

			.box_item {
				display: flex;

				.item_key {
					font-weight: bold;
				}

				.item_value {
					flex: 1;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					.img {
						margin-top: 5rpx;
						width: 136rpx;
						height: 162rpx;
						border-radius: 8rpx;
					}
				}
			}

			.box_desc {
				margin-top: 10rpx;
				color: #666666;
				line-height: 40rpx;
			}
		}
	}
}
</style>
