<template>
	<view class="hasfixedbottom">

		<view class="flexbox mb30">
			<button class="btn-red-kx mini w100" @click="chooseOnline">
				<uni-icons type="personadd" size="16" color="#AD181F"></uni-icons>
				在线选择</button>
		</view>

		<uni-swipe-action>
			<uni-swipe-action-item class="personitem" v-for="n in list" :key="n.id">
				<uni-collapse>
					<uni-collapse-item :title="n.personInfo?.name+' - '+ n.memName">
						<view class="collapseBody">
							<view v-if="n.oldPersonInfo">
								<label>姓名：</label>
								{{n.personInfo?.name}}

								<text class="text-danger">{{ n.oldPersonInfo?.name }}</text>
							</view>
							<view>
								<label>会员编号：</label>
								{{n.personInfo?.perCode}}
								<text v-if="n.oldPersonInfo" class="text-danger">{{ n.oldPersonInfo?.perCode }}</text>
							</view>
							<view style="display: flex;">
								<label>有效期：</label>
								<view>
									<view v-if="n.personInfo?.valiDateTime">
										<text v-if="n.personInfo?.beginTime">{{n.personInfo?.beginTime?.slice(0,10)}}</text>
										<text v-if="n.personInfo?.beginTime">至</text>
										<text>{{n.personInfo?.valiDateTime?.slice(0,10)}}</text>
									</view>
									<view class="text-danger" v-if="n.oldPersonInfo?.valiDateTime">
										<text v-if="n.oldPersonInfo?.beginTime">{{ n.oldPersonInfo?.beginTime?.slice(0,10)}}</text>
										<text v-if="n.oldPersonInfo?.beginTime">至</text>
										<text v-if="n.oldPersonInfo?.valiDateTime">{{n.oldPersonInfo?.valiDateTime?.slice(0,10)}}</text>
									</view>
									<text v-else>--</text>
								</view>
							</view>
							<view>
								<label>级位详情：</label>
								<view v-if="n.personInfo?.jiList.length>0" class="mt10">
									<uni-table border stripe>
										<uni-tr>
											<uni-th  width="50">序号</uni-th>
											<uni-th >级位</uni-th>
											<uni-th>证书编号</uni-th>
										</uni-tr>
										<uni-tr v-for="(tr,index) in n.personInfo.jiList" :key="index">
											<uni-td>{{index+1}}</uni-td>
											<uni-td>{{szToHz(tr.level)}}级</uni-td>
											<uni-td>{{tr.certCode}}</uni-td>
										</uni-tr>
									</uni-table>
								</view>
								<text v-else class="text-primary">无级位记录</text>
								<view v-if="n.oldPersonInfo?.jiList.length>0" class="mt10">
									<uni-table border stripe>
										<uni-tr>
											<uni-th width="50"><text class="text-danger">序号</text></uni-th>
											<uni-th><text class="text-danger">级位</text></uni-th>
											<uni-th><text class="text-danger">证书编号</text></uni-th>
										</uni-tr>
										<uni-tr v-for="(tr,index) in n.oldPersonInfo.jiList" :key="index">
											<uni-td>{{index+1}}</uni-td>
											<uni-td>{{szToHz(tr.level)}}级</uni-td>
											<uni-td>{{tr.certCode}}</uni-td>
										</uni-tr>
									</uni-table>
								</view>
								<text v-if="n.oldPersonInfo & n.oldPersonInfo?.jiList.length==0"  class="text-danger">无级位记录</text>

							</view>
							<view>
								<label>段位详情：</label>
								<view v-if="n.personInfo?.duanList.length>0" class="mt10">
									<uni-table border stripe>
										<uni-tr>
											<uni-th width="50">序号</uni-th>
											<uni-th>段位</uni-th>
											<uni-th>证书编号</uni-th>
										</uni-tr>
										<uni-tr v-for="(tr,index) in n.personInfo.duanList" :key="index">
											<uni-td>{{index+1}}</uni-td>
											<uni-td>{{szToHz(tr.level)}}段</uni-td>
											<uni-td>{{tr.certCode}}</uni-td>
										</uni-tr>
									</uni-table>
								</view>
								<text v-else class="text-primary">无段位记录</text>
								<view v-if="n.oldPersonInfo?.duanList.length>0" class="mt10">
									<uni-table border stripe>
										<uni-tr>
											<uni-th width="50"><text class="text-danger">序号</text></uni-th>
											<uni-th><text class="text-danger">段位</text></uni-th>
											<uni-th><text class="text-danger">证书编号</text></uni-th>
										</uni-tr>
										<uni-tr v-for="(tr,index) in n.oldPersonInfo.duanList" :key="index">
											<uni-td>{{index+1}}</uni-td>
											<uni-td>{{szToHz(tr.level)}}段</uni-td>
											<uni-td>{{tr.certCode}}</uni-td>
										</uni-tr>
									</uni-table>
								</view>
								<text v-if="n.oldPersonInfo&n.oldPersonInfo?.duanList.length==0" class="text-danger">无段位记录</text>
							</view>

							<view style="display: flex;">
								<label style="white-space: nowrap;"><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>

							<button size="mini" class="btn-red-kx" @click="handleChange(n,'idcCode')">合并</button>
						</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 class="nodata" v-if="list.length==0">
			<image mode="aspectFit" src="/static/nodata.png"></image>
			<text>请选择会员</text>
		</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="popBody">
				<view class="h3 text-center mb30">信息合并</view>
				<uni-forms class="mt30">
					<view style="min-height: 30vh">
						<uni-forms-item label="证件号码:" v-show="type=='idcCode'">
							<uni-easyinput v-model="form.idcCode" placeholder="请输入合并人员证件号" />
						</uni-forms-item>
					</view>

				</uni-forms>
				<view class="text-center">
					<button class="btn-red-kx" @click="submitForm(type)">保存</button>
				</view>

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

<script setup>
	import {
		szToHz
	} from '@/common/utils.js'
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import * as api from '@/common/api.js'
	import config from '/config.js'
	const queryParams = ref({

	})
	const total = ref(0)
	const list = ref([])
	const popup = ref(null)
	const choseStudent = ref(null)
	const studentList = ref([])
	const type = ref('')
	const form = ref({})
	onLoad((option) => {
		if (option.rangeId) {
			queryParams.value.rangeId = option.rangeId
			getList()
		}
	})
	onShow((option) => {
		console.log(option)
		if (option) {
			queryParams.value.rangeId = option
			getList()
		}
	})

	function getList() {
		uni.showLoading({
			title: '加载中'
		})
		api.infoMergeList(queryParams.value).then(res => {
			list.value = res.rows
			list.value.forEach(item => {
				item.fileUrl = JSON.parse(item.fileUrl)
			})
			total.value = res.total
			uni.hideLoading()
		})
	}

	function handleChange(a, b) {
		type.value = b
		form.value = a
		console.log(form.value.newName)
		popup.value.open()
	}

	function handleDelete(row) {
		uni.showModal({
			content: `确认删除这条合并吗？`,
			success: function(res) {
				if (res.confirm) {
					api.infoMergeMod([row.id]).then(Response => {
						uni.showToast({
							title: '操作成功'
						})
						getList()
					})
				}
			}
		})
	}

	function chooseOnline() {
		console.log(queryParams.value.rangeId)
		if (list.value.length == 0) {
			queryParams.value.rangeId = '-1'
		}
		uni.navigateTo({
			url: `/personalVip/mergeVipChoseList?rangeId=${queryParams.value.rangeId || '-1'}`
		})

	}

	function checkThis(n) {
		if (n.checked) {
			n.checked = false
		} else {
			n.checked = true
		}
	}

	function submitForm(type) {
		api.editMergeByOldIdc({
			mergeId: form.value.id,
			idcCode: form.value.idcCode
		}).then(res => {
			popup.value.close()
			uni.showToast({
				title: '操作成功！'
			})
			getList()
		})
	}

	function commitFN() {
		const flag = list.value.some(item => {
			if (!item.fileUrl) {
				uni.showToast({
					title: `请上传${item.personInfo?.name}的附件`,
					icon: 'none'
				})
				return !item.fileUrl
			}
		})
		if (flag) return
		if (form.value.rangeId == '') return

		uni.showModal({
			title: '提示',
			content: `确定提交吗`,
			success: function(res) {
				if (res.confirm) {
					api.commitMergeVip([queryParams.value.rangeId]).then(Response => {
						uni.showToast({
							icon: "none",
							title: '提交成功！'
						})
						uni.navigateBack()
					})
				}
			}
		})
	}
	let selectFileValue = {}

	function selectFile(row, e) {
		form.value = row
		let file = e.tempFiles[0]
		if (!file) {
			return
		}
		api.uploadFile(e).then(data => {
			selectFileValue = {
				url: data.msg,
				name: file.name,
				extname: file.extname
			}
			console.log(selectFileValue, row.fileUrl)
			uni.showLoading({
				title: '上传中'
			})
			debugger
			api.editMergeByFile({
				mergeId: form.value.id,
				fileUrl: JSON.stringify([selectFileValue])
			}).then(Response => {
				uni.hideLoading()
				getList()
			})
		});
	}

	function delSupplementFile(row) {
		selectFileValue = {}
		row.fileUrl = []
	}
</script>
<style scoped lang="scss">
	.flexbox {
		padding: 30rpx 30rpx 0
	}

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

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

		.btn-red-kx {
			margin: 0 0 0 6.5em;
		}

		view {
			margin: 0 0 20rpx;

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

	.popBody {
		background: #fff;
		padding: 30rpx;
	}

	.text-center .btn-red-kx {
		border-radius: 50px;
		font-size: 28rpx;
	}

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