<template>
	<view>
		<view class="wBox">
			<uni-collapse>
				<uni-collapse-item v-for="n in list" :key="n.id" :border="false"
					:title="n.perName+' - '+ szToHz(n.oldJi)+'级'" title-border="none" open>
					<view class="collapseBody">
						<view>
							<label>变更后级别: </label>
							<view class="content">
								{{szToHz(n.newJi)}}级
							</view>
						</view>
						<view>
							<label>变更理由: </label>
							<view class="content">
								{{reasonArr[Number(n.reason)-1]?.text}}
							</view>
						</view>
						<view>
							<label>附件: </label>
							<view class="content">
								<view class="text-primary" @click="showImg(n)">
									查看附件
								</view>

							</view>
						</view>
						<view>
							<label>级位编号: </label>
							<view class="content">
								{{n.examPersonData.certCode}}
							</view>
						</view>
						<view>
							<label>证件类型: </label>
							<view class="content">{{idcTypeList[n.idcType]?.text}}</view>
						</view>
						<view>
							<label>证件编号: </label>
							<view class="content">{{n.idcCode}}</view>
						</view>
						<view>
							<label>通过日期: </label>
							<view class="content">{{n.examPersonData.certTime.slice(0,10)}}</view>
						</view>

					</view>
				</uni-collapse-item>
			</uni-collapse>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		parseAttachmentJson,
		previewAttachment,
		szToHz
	} from '@/common/utils.js'
	import * as api from '@/common/api.js'
	const inputstyle = ref({
		borderColor: '#fff',
		fontSize: '30rpx'
	})
	const placeholderStyle = ref('text-align: right;font-size:30rpx')
	const levelArr = ref([{
			text: '九级',
			value: '9'
		},
		{
			text: '八级',
			value: '8'
		},
		{
			text: '七级',
			value: '7'
		},
		{
			text: '六级',
			value: '6'
		},
		{
			text: '五级',
			value: '5'
		},
		{
			text: '四级',
			value: '4'
		},
		{
			text: '三级',
			value: '3'
		},
		{
			text: '二级',
			value: '2'
		},
		{
			text: '一级',
			value: '1'
		}
	])
	const reasonArr = ref([{
			text: '报错级位',
			value: '1'
		},
		{
			text: '以前有级位无法报下一级',
			value: '2'
		},
		{
			text: '其它',
			value: '3'
		}
	])
	const idcTypeList = ref([{
			value: '0',
			text: "身份证"
		},
		{
			value: '1',
			text: "港澳台通信身份证"
		},
		{
			value: '2',
			text: "中国护照"
		},
		{
			value: '3',
			text: "外国护照"
		},
		{
			value: '4',
			text: "其它"
		},
		{
			value: '5',
			text: "户口本"
		}
	])
	const baseFormData = ref({
		idcType: '0'
	})
	const list = ref([])
	const levelList = ref([])
	const total = ref(0)
	const flag = ref(true)
	const popup = ref(null)
	const queryParams = ref({
		rangeId: ''
	})
	onLoad((option) => {
		if (option.rangeId) {
			baseFormData.value.rangeId = option.rangeId
			queryParams.value.rangeId = option.rangeId
		}
	})
	onShow(() => {
		if (queryParams.value.rangeId != '') {
			getList()
		}
	})
	// 查询会员
	function selectMember() {
		if (!baseFormData.value.idcCode) {
			uni.showToast({
				title: '请输入证件号',
				icon: 'none'
			})
			return
		}

		api.pickUpByPersonInfo(baseFormData.value).then(res => {
			if (res.data.length == 0) {
				uni.showModal({
					title: '提示',
					content: '该会员无级位考试记录',
					success: function(res) {}
				})
				return
			}

			levelList.value = res.data
			popup.value.open()
		})
	}

	function submitForm() {
		if (!baseFormData.value.name) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			})
			return
		}

		if (!baseFormData.value.idcCode) {
			uni.showToast({
				title: '请输入证件号',
				icon: 'none'
			})
			return
		}
		api.addTransferToRange({
			rangeId: baseFormData.value.rangeId || -1,
			personIdArray: baseFormData.value.personIdArray
		}).then(res => {
			if (res.data.result == 0) {
				uni.showModal({
					content: res.data?.list?.[0]?.msg,
					success: function(res) {

					}
				})
			} else {
				uni.showToast({
					title: '新增成功'
				})
			}
			baseFormData.value.rangeId = res.data
			queryParams.value.rangeId = res.data
			flag.value = true
			baseFormData.value.idcType = '0'
			baseFormData.value.idcCode = ''
			baseFormData.value.name = ''
			getList()
		})
	}

	function getList() {
		uni.showLoading({
			title: '加载中'
		})
		api.getLevelChangeAddList(queryParams.value).then(Response => {
			list.value = Response.rows
			for (var item of list.value) {
				item.examPersonData = JSON.parse(item.examPersonData)
				if (item.fileUrl) {
					item.fileUrl = parseAttachmentJson(item.fileUrl)
				}
			}
			total.value = Response.total
			uni.hideLoading()
		})
	}

	function showImg(n) {
		previewAttachment(n.fileUrl, { title: '查看附件' })
	}
</script>

<style scoped lang="scss">
	.wBox {
		width: 700rpx;
		margin: 20rpx auto 0;
		background: #FFFFFF;
		box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
		border-radius: 15rpx;

		.tt {
			color: #0A1629;
			font-size: 30rpx;
		}
	}

	.danger-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.collapseBody {
		padding: 0 30rpx 50rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.collapseBody>view {
		margin: 0 0 20rpx;
		display: flex;
		align-items: baseline;

		label {
			width: 6em;
			color: #999;
			display: inline-block;
			// text-align: right;
			flex: 0 0 auto;
		}

		.content {
			flex: 1 1 auto;
			padding-left: 10rpx;
		}
	}

	.button-group {
		text-align: right;

		button {
			margin-left: 30rpx;
		}
	}

	.h3 {
		padding: 20rpx 0;
	}

	:deep(.uni-list-item__extra-text) {
		color: #1561CB;
	}

	.popBody {
		max-height: 60vh;
		overflow: auto;
	}

	:deep(.uni-forms-item__inner) {
		padding-bottom: 20rpx;
		align-items: baseline;
	}

	// :deep(.uni-forms-item__label){
	// 	padding: 0;height: auto;
	// }
	// :deep(.uni-forms-item__content){
	// 	min-height: auto;
	// }
	.collapseTitle {
		padding: 20rpx;

		.name {
			font-size: 30rpx;
		}

		.date {
			color: #999;
			font-size: 28rpx;
		}
	}

	:deep(.file-picker__progress) {
		opacity: 0;
	}
</style>