<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.oldName+'('+n.personCode+')' +' - '+ n.memName">
						<view class="collapseBody">
							<view>
								<label>姓名：</label>
								{{n.oldName}}
								<text class="text-primary" @click="handleChange(n,'newName')">变更 </text>
								<text class="text-danger" v-if="n.oldName!=n.newName">{{ n.newName }}</text>
							</view>
							<view>
								<label>性别：</label>
								{{ n.oldSex==0?'男':'女' }}
								<text class="text-primary" @click="handleChange(n,'newSex')">变更 </text>
								<text class="text-danger" v-if="n.oldSex!=n.newSex">{{ n.newSex==0?'男':'女' }}</text>
							</view>
							<view>
								<label>证件类型：</label>
								{{ cardType[n.oldIdcType].text }}
								<text class="text-primary" @click="handleChange(n,'newIdcType')">变更 </text>
								<text class="text-danger"
									v-if="n.oldIdcType!=n.newIdcType">{{ cardType[n.newIdcType].text }} </text>
							</view>
							<view>
								<label>证件号：</label>
								{{ n.oldIdcCode }}
								<text class="text-primary" @click="handleChange(n,'newIdcCode')">变更 </text>
								<text class="text-danger" v-if="n.oldIdcCode!=n.newIdcCode">{{ n.newIdcCode }}</text>
							</view>
							<view>
								<label>出生日期：</label>
								{{ n.oldBirth?.slice(0,10) }}
								<text v-if="n.generateFlag==1&&n.newIdcType==0" class="text-gray">变更 </text>
								<text v-else class="text-primary" @click="handleChange(n,'newBirth')">变更 </text>
								<text class="text-danger"
									v-if="n.oldBirth!=n.newBirth">{{ n.newBirth?.slice(0,10) }}</text>
							</view>
							<view style="display: flex;">
								<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>
								{{ n.oldBeginTime?.slice(0,10) }}
								<text class="text-primary" @click="handleChange(n,'newBeginTime')">变更 </text>
								<text class="text-danger"
									v-if="n.oldBeginTime!=n.newBeginTime">{{ n.newBeginTime?.slice(0,10) }}</text>
							</view>

							<view>
								<label>有效日期：</label>
								{{ n.oldValiDate?.slice(0,10) }}
								<text class="text-primary" @click="handleChange(n,'newValiDate')">变更 </text>
								<text class="text-danger"
									v-if="n.oldValiDate!=n.newValiDate">{{ n.newValiDate?.slice(0,10) }}</text>
							</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 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=='newName'">
							<uni-easyinput v-model="form.newName" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="性别:" v-show="type=='newSex'">
							<uni-data-checkbox v-model="form.newSex" :localdata="sexs" />
						</uni-forms-item>
						<uni-forms-item label="证件类型:" v-show="type=='newIdcType'">
							<uni-data-select v-model="form.newIdcType" :localdata="cardType1"
								:clear='false'></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="证件号码:" v-show="type=='newIdcCode'">
							<uni-easyinput v-model="form.newIdcCode" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="出生日期:" v-show="type=='newBirth'">
							<uni-datetime-picker type="datetime" placeholder="YYYY-MM-DD" :clear-icon="false"
								v-model="form.newBirth" />
						</uni-forms-item>
						<uni-forms-item label="开始日期:" v-show="type=='newBeginTime'">
							<uni-datetime-picker type="datetime" placeholder="YYYY-MM-DD" :clear-icon="false"
								v-model="form.newBeginTime" />
						</uni-forms-item>
						<uni-forms-item label="有效日期:" v-show="type=='newValiDate'">
							<uni-datetime-picker type="datetime" placeholder="YYYY-MM-DD" :clear-icon="false"
								v-model="form.newValiDate" />
						</uni-forms-item>
					</view>

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

			</view>
		</uni-popup>

		<uni-popup ref="choseStudent" type="bottom" background-color="#fff" animation>
			<view class="popBody">
				<view class="userlist" style="max-height:80vh;overflow: auto;">
					<view class="item" v-for=" (n,index) in studentList" :key="index">
						<view @click="checkThis(n)">
							<image class="icon" v-if="n.checked"
								:src="config.baseUrl_api+'/fs/static/member/dx_dwn.png'" />
							<image class="icon" v-else :src="config.baseUrl_api+'/fs/static/member/dx.png'" />
						</view>
						<view>
							<view class="name">{{n.name}} <text>{{n.perCode}}</text></view>
							<view class="date">{{ cardType[n.idcType]?.text }}：{{n.idcCode}}</view>
						</view>
					</view>
					<view class="nodata" v-if="studentList.length==0">
						<image mode="aspectFit" src="/static/nodata.png"></image>
						<text>无可变更会员</text>
					</view>
				</view>
				<button class="btn-red-kx" v-if="studentList.length!=0" @click="handleImport">批量添加</button>
			</view>
		</uni-popup>

	</view>
</template>

<script setup>
	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({})
	const sexs = ref([{
		text: '男',
		value: '0'
	}, {
		text: '女',
		value: '1'
	}])
	const cardType = ref([{
			text: '身份证',
			value: '0'
		},
		{
			text: '来往大陆(内地)通行证',
			value: '1'
		},
		{
			text: '中国护照',
			value: '2'
		},
		{
			text: '护照',
			value: '3'
		},
		{
			text: '其它',
			value: '4'
		},
		{
			text: '香港身份证',
			value: '5'
		},
		{
			text: '往来港澳台通行证',
			value: '6'
		}
	])
	const cardType1 = ref([{
			text: '身份证',
			value: '0'
		},
		{
			text: '来往大陆(内地)通行证',
			value: '1'
		}, {
			text: '护照',
			value: '3'
		},
		{
			text: '香港身份证',
			value: '5'
		}
	])
	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.addInfoModeList(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: `确认删除会员${row.newName}`,
			success: function(res) {
				if (res.confirm) {
					api.infoMod([row.id]).then(Response => {
						uni.showToast({
							title: '操作成功'
						})
						if (list.value.length == 1) {
							queryParams.value.rangeId = ''
						}
						getList()
					})
				}
			}
		})
	}

	function chooseOnline() {
		//   uni.showLoading({
		//     title: '加载中',
		//     icon: 'none'
		//   })
		//   var obj = {
		//     paymentRangeId: queryParams.value.rangeId || '-1',
		//     multiDeptFlag: 1,
		//     perType: 1
		//   }
		//   api.selectPageList(obj).then(res => {
		//     studentList.value = res.rows
		//     uni.hideLoading()
		//     choseStudent.value.open()
		//   })
		uni.navigateTo({
			url: `/personalVip/changeVipChoseList?rangeId=${queryParams.value.rangeId || '-1'}`
		})

	}

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

	function handleImport() {
		var arr = []
		for (var n of studentList.value) {
			if (n.checked) {
				arr.push(n.perId)
			}
		}
		api.addInfoModeToRange({
			perIds: arr,
			rangeIdStr: queryParams.value.rangeId || '-1'
		}).then(res => {
			queryParams.value.rangeId = res.data
			choseStudent.value.close()
			getList()
		})
	}

	function submitForm(type) {
		if (type == 'newIdcCode' && form.value.newIdcType == 0) {
			// 验证身份证
			const pattern =
				/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
			if (!pattern.test(form.value.newIdcCode)) {
				uni.showToast({
					title: '请输入正确证件号',
					icon: 'none'
				})
				form.value.newIdcCode = form.value.oldIdcCode
				return
			}
		}
		api.personChangeEditMod({
			id: form.value.id,
			newBeginTime: form.value.newBeginTime,
			newBirth: form.value.newBirth,
			newIdcCode: form.value.newIdcCode,
			newIdcType: form.value.newIdcType,
			newName: form.value.newName,
			newSex: form.value.newSex,
			newValiDate: form.value.newValiDate
		}).then(res => {
			popup.value.close()
			uni.showToast({
				title: '操作成功！'
			})
			getList()
		})
	}

	function commitFN() {
		const flag = list.value.some(item => {
			if ((item.newName == item.oldName) && (item.newSex == item.oldSex) &&
				(item.oldIdcType == item.newIdcType) && (item.oldIdcCode == item.newIdcCode) &&
				(item.newBirth == item.oldBirth)
			) {
				uni.showToast({
					title: `${item.newName}没有变更的信息`,
					icon: 'none'
				})
				return true
			}

			if (!item.fileUrl) {
				uni.showToast({
					title: `请上传${item.newName}的附件`,
					icon: 'none'
				})
				return !item.fileUrl
			}


		})
		if (flag) return
		if (form.value.rangeId == '') return

		uni.showModal({
			title: '提示',
			content: `确定提交吗`,
			success: function(res) {
				if (res.confirm) {
					api.commitPersonalChange([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: '上传中'
			})
			api.personChangeEditMod({
				id: form.value.id,
				newBeginTime: form.value.newBeginTime,
				newBirth: form.value.newBirth,
				newIdcCode: form.value.newIdcCode,
				newIdcType: form.value.newIdcType,
				newName: form.value.newName,
				newSex: form.value.newSex,
				newValiDate: form.value.newValiDate,
				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;

		view {
			margin: 0 0 20rpx;

			label {
				width: 5em;
				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>