<template>
	<div class="appRecord">
		<!-- <m-header v-if="headerStatus" /> -->
		<!-- <van-tabs sticky title-active-color="#2DC7AA" color="#2DC7AA" line-width="50">
			<van-tab title="已缴费">
				<div v-if="dataShow" key="data">
					<van-list v-model="loading" :finished="finished" finished-text=" " @load="getList">
						<van-cell-group class="section" v-for="(item, index) in dataList" :key="index">
							<van-cell :value="item.examBaseName" title="考级名称" />
							<van-cell title="专业等级">
								<template #default>
									{{ item.subjectName }}({{ item.level | formatLevel }})
								</template>
							</van-cell>
							<van-cell :value="item.examTime" title="考试日期" />
							<van-button type="default" @click="onDetail(item)" block>查看资料</van-button>
						</van-cell-group>
					</van-list>
				</div>
				<van-empty v-else key="data" description="暂无已缴费记录"></van-empty>
			</van-tab>
			<van-tab title="未缴费">
				<div v-if="dataShow2" key="data">
					<van-list v-model="loading2" :finished="finished2" finished-text=" " @load="getList2">
						<van-cell-group class="section" v-for="(item, index) in dataList2" :key="index">
							<van-cell :value="item.examBaseName" title="考级名称" />
							<van-cell value-class="payTime" :value="item.payTime" title="缴费截止时间" />
							<van-cell title="专业等级" >
								<template #default>
									{{ item.subjectName }}({{ item.level | formatLevel }})
								</template>
							</van-cell>
							<van-cell :value="item.examTime" title="考试日期" />
							<van-button type="default" @click="onDetail(item)" block>查看报名</van-button>
						</van-cell-group>
					</van-list>
				</div>
				<van-empty v-else key="data" description="暂无未缴费记录"></van-empty>
			</van-tab>
		</van-tabs> -->
		<div v-if="dataShow" key="data">
			<van-list v-model="loading" :finished="finished" finished-text=" " @load="getList">
				<van-cell-group class="section" v-for="(item, index) in dataList" :key="index">
					<van-cell :value="item.examBaseName" title="考级名称" />
					<!-- <van-cell :value="item.paymentOrderNo" title="订单编号" /> -->
					<van-cell title="专业等级">
						<template #default>
							{{ item.subjectName }}({{ item.level | formatLevel }})
						</template>
					</van-cell>
					<van-cell :value="item.examTime" title="考试日期" />
					<van-cell title="报名审核" v-if="item.status == 'AUDIT_REJECT'">
						<div v-if="item.status">
							<p class="pass" v-if="item.status === 'AUDIT_PASS'">已通过</p>
							<p v-else-if="item.status === 'AUDIT_WAIT'">等待审核</p>
							<p class="noPass" v-else>未通过</p>
						</div>
					</van-cell>
					<van-button type="default" @click="onDetail(item)" block>查看资料</van-button>
				</van-cell-group>
			</van-list>
		</div>
		<van-empty v-else key="data" :image="noDataImg" class="custom-image" description="暂无报考记录"></van-empty>
	</div>
</template>
<script>
	import { browser } from '@/utils/common'
	import dayjs from 'dayjs'
	import {
		applyList
	} from './appApi'
	export default {
		name: 'appRecord',
		data() {
			return {
				headerStatus: false,
				dataShow: true, // 是否有数据
				loading: false,
				finished: false,
				dataList: [],
				noDataImg: require('../../assets/images/level/noData.png'),
				params: {
					paymentStatus: 1,
					page: 1,
					rows: 20
				},
				dataShow2: true, // 是否有数据
				loading2: false,
				finished2: false,
				dataList2: [],
				params2: {
					paymentStatus: 0,
					page: 1,
					rows: 20
				},
			}
		},
		mounted() {
			// 插入token
			let params = this.$route.query
			if(params.Authorization) {
				localStorage.setItem('Authorization', decodeURI(params.Authorization))
			}
			// 判断是否在app里面
			if(!browser().android && !browser().iPhone) {
				this.headerStatus = true
			} else {
				document.title = '报考记录'
			}
		},
		methods: {
			async getList() {
				// this.finished = true
				let params = this.params;
				await applyList(params).then(res => {
					let result = res.data;
					this.loading = false;
					if (result.code == 200) {
						let pageInfo = result.data
						params.page = pageInfo.pageNo
						pageInfo.rows.forEach(item => {
							item.isShow = false
							item.examTime = dayjs(item.examStartTime).format("YYYY-MM-DD") + '~' + dayjs(item.examEndTime).format("YYYY-MM-DD")
						})
						this.dataList = this.dataList.concat(pageInfo.rows)
						if (params.page >= pageInfo.totalPage) {
							this.finished = true;
						}
						this.params.page++;
					} else {
						this.finished = true;
					}
					// 判断是否有数据
					if (this.dataList.length <= 0) {
						this.dataShow = false;
					}
				}).catch(() => {
					this.finished = true
					this.dataShow = false
				})
			},
			async getList2() {
				// this.finished = true
				let params = this.params2;
				await applyList(params).then(res => {
					let result = res.data;
					this.loading2 = false;
					if (result.code == 200) {
						let pageInfo = result.data
						params.page = pageInfo.pageNo
						pageInfo.rows.forEach(item => {
							item.isShow = false
							item.examTime = dayjs(item.examStartTime).format("YYYY-MM-DD") + '~' + dayjs(item.examEndTime).format("YYYY-MM-DD")
						})
						this.dataList2 = this.dataList.concat(pageInfo.rows)
						if (params.page >= pageInfo.totalPage) {
							this.finished2 = true;
						}
						this.params.page++;
					} else {
						this.finished2 = true;
					}
					// 判断是否有数据
					if (this.dataList.length <= 0) {
						this.dataShow2 = false;
					}
				}).catch(() => {
					this.finished2 = true
					this.dataShow2 = false
				})
			},
			onDetail(item) {
				// localStorage.setItem("recordDetail", JSON.stringify(item))
				this.$router.push({
					path: '/appDetail',
					query: {
						examRegistrationId: item.id
					}
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	@import url("../../assets/commonLess/variable");

	.appRecord {
		height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
	}

	/deep/.van-cell {
		padding: 14px 16px;
		font-size: 16px;
		color: @--font-main-color;

		.van-cell__value {
			width: 40%;
			text-align: left;
			flex: auto;
			color: @--font-second-color;
		}

		.payTime {
			color: @--red-color;
		}
	}

	.section {
		margin-top: 10px;
	}

	.van-button--default {
		border: 0;
		color: @--main-color;
		font-size: 15px;
		height: .5rem;
		line-height: .52rem;
	}

	.van-button--primary {
		margin: .35rem 0 .1rem;
		background-color: @--main-color;
		border: 1px solid @--main-color;
		color: #FFFFFF;
		font-size: .18rem;
		height: .5rem;
		line-height: .52rem;
		width: 90%;
		margin-left: 5%;
	}
	/deep/.van-tabs__content {
		background-color: @--main-bg-color;
	}

	.noPass {
        color: @--red-color;
        .van-field__control:disabled {
            color: @--red-color;
        }
    }
    .pass {
        color: @--main-color;
        .van-field__control:disabled {
            color: @--main-color;
        }
	}

	.custom-image {
		padding-top: .8rem;
		/deep/.van-empty__image {
			width: 1.8rem;
			height: 1.88rem;
		}
		/deep/.van-empty__description {
			color: @--font-second-color;
		}
	}
</style>
