<template>
	<view class="hasfixedbottom">
		<view class="nolineform">
			<uni-forms :border="true" :modelValue="baseFormData" label-width="80">
				<uni-forms-item label="证件类型" required name="idcType">
					<uni-data-select v-model="baseFormData.idcType" :localdata="idcTypeListno2"
						:clear="false"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="证件号码" required name="idcCode">
					<uni-easyinput :styles="inputstyle" :placeholderStyle="placeholderStyle"
						v-model="baseFormData.idcCode" placeholder="请输入证件号码" />
				</uni-forms-item>
			</uni-forms>
			<view class="button-group">
				<button type="primary" size="mini" @click="selectMember">查询</button>
			</view>
		</view>
		<view class="wBox">
			<uni-swipe-action v-for="n in list" :key="n.id">
				<uni-swipe-action-item class="personitem">
					<uni-collapse>
						<uni-collapse-item :border="false" :title="n.perName+' - '+szToHz(n.oldJi)+'级'"
							title-border="none">
							<view class="collapseBody">

								<view>
									<label><text class="text-danger">*</text>变更后级别: </label>
									<view class="content">
										<uni-data-select v-model="n.newJi" :localdata="levelArr" :clear="false"
											@change="editJIFN(n,$event)">
										</uni-data-select>
									</view>
								</view>
								<view>
									<label><text class="text-danger">*</text>变更理由: </label>
									<view class="content">
										<uni-data-select v-model="n.reason" :localdata="reasonArr" :clear="false"
											@change="reasonFN(n,$event)">
										</uni-data-select>
									</view>
								</view>
								<view>
									<label><text class="text-danger">*</text>附件: </label>
									<view class="content">
										<uni-file-picker limit="1" v-model="n.fileUrl" file-extname="png,jpg,jpeg,pdf,zip"
											file-mediatype="all" @select="selectFile(n,$event)"
											@delete="delSupplementFile(n)"></uni-file-picker>
										<text class="text-danger">*需上传从前级位资料或相关情况说明</text>
									</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>
					<template v-slot:right>
						<view class="slot-button">
							<view class="danger-button" @click="handleDelete(n)">
								<uni-icons type="trash" color="#fff" size="20"></uni-icons>
								<text class="slot-button-text">删除</text>
							</view>
						</view>
					</template>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
	</view>
	<view class="fixedBottom">
		<button class="btn-red" :disabled="list?.length <= 0" @click="commitFN">保存并提交</button>
	</view>

	<uni-popup ref="popup" type="bottom" background-color="#fff">
		<view class="h3 text-center">级位考试变更</view>
		<view class="popBody">
			<uni-list>
				<uni-list-item v-for="n in levelList" :key="n.certCode" :title="n.name +'-'+n.certCode "
					:note="n.level+'级'  +'-'+ n.createTime?.slice(0,10)" rightText="选择" clickable
					@click="handleAdd(n)"></uni-list-item>
			</uni-list>

		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		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 idcTypeListno2 = ref([
		{
				value: '0',
				text: "身份证"
			},
			{
				value: '1',
				text: "港澳台通信身份证"
			},
			{
				value: '3',
				text: "外国护照"
			},
			{
				value: '4',
				text: "其它"
			},
			{
				value: '5',
				text: "户口本"
			}
	])
	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 = JSON.parse(item.fileUrl)
				}
			}
			total.value = Response.total
			uni.hideLoading()
		})
	}

	function commitFN() {
		const flag = list.value.some(item => {
			if (!item.fileUrl && !item.reason) {
				uni.showToast({
					title:`${item.perName}信息不完整，请确认必填项!`,
					icon:'none'
				})
				return !item.fileUrl && !item.reason
			}
		})
		if (flag) return
		if (queryParams.value.rangeId == -1) return
		api.levelModCommit([queryParams.value.rangeId]).then(res => {
			uni.showToast({
				title: '提交成功！'
			})
			uni.navigateBack()
		})
	}

	function handleAdd(row) {
		api.addLevelList({
			perId: row.perId,
			techId: row.techId,
			rangeId: queryParams.value.rangeId
		}).then(res => {
			queryParams.value.rangeId = res.data.rangeId
			getList()
			popup.value.close()
		})
	}
	let selectFileValue = {}

	function selectFile(row, e) {
		console.log(row, e)
		let file = e.tempFiles[0]
		api.uploadFile(e).then(data => {
			selectFileValue = {
				url: data.msg,
				name: file.name,
				extname: file.extname
			}

			row.fileUrl = [selectFileValue]
			api.addLevelModToRangeFile({
				fileUrl: JSON.stringify(row.fileUrl),
				modId: row.id
			}).then(res => {
				getList()
			})
		});
	}

	function delSupplementFile(row) {
		selectFileValue = {}
		row.fileUrl = []
	}

	function reasonFN(row, e) {
		console.log(row, e)
		api.addLevelModToRange({
			reason: e,
			modId: row.id
		}).then(res => {
			getList()
		})
	}

	function editJIFN(row, e) {
		api.editNewJi({
			modId: row.id,
			NewJi: e
		}).then(res => {
			getList()
		})
	}

	function handleDelete(row) {
		uni.showModal({
			title: '提示',
			content: `确定删除${row.perName}吗？`,
			success: function(res) {
				api.delLevelChangePer([row.id]).then(Response => {
					uni.showToast({
						icon: 'none',
						title: '操作成功！'
					})
					getList()
				})
			}
		})
	}
</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;background-color: transparent;
}
</style>