<template>
	<view class="hasfixedbottom">
	<view class="nolineform">
		<uni-forms :border="true" :modelValue="baseFormData" label-width="120">
			<uni-forms-item label="姓名" required name="name">
				<uni-easyinput :styles="inputstyle" :clearable='false' :placeholderStyle="placeholderStyle"
					v-model="baseFormData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="证件类型" required name="idcType">
				<uni-data-select v-model="baseFormData.idcType" :localdata="idcTypeList"
					:clear="false"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="证件号码" required name="idcCode">
				<uni-easyinput :styles="inputstyle" :clearable='false' :placeholderStyle="placeholderStyle"
					v-model="baseFormData.idcCode" placeholder="请输入证件号码" />
			</uni-forms-item>
		</uni-forms>
		<view class="button-group">
			<button type="primary" size="mini" @click="selectMember">查询</button>
			<button type="primary" size="mini" :disabled="flag" @click="submitForm">添加</button>
		</view>
	</view>
	<view class="wBox">
		<view class="info">
			<view>人数合计 <text class="text-danger"> {{ total}} </text> 人</view>
		</view>
		<uni-swipe-action>
			<uni-swipe-action-item class="personitem" v-for="n in list">
				<view class="content-box" @click="handleInfo(n)">
					<view class="flexbox">
						<view class="photobox">
							<view class="colorful">{{n.perName?.slice(0,1)}}</view>
						</view>
						<view>
							{{n.perName}}
							<view class="date">
								{{idcTypeList[n.perIdcType].text}}: {{n.perIdcCode}}
							</view>
						</view>
					</view>


				</view>
				<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>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
		import * as api from '@/common/api.js'
	const inputstyle = ref({
		borderColor: '#fff',
		fontSize: '30rpx'
	})
	const placeholderStyle = ref('text-align: right;font-size:30rpx')
	
	const idcTypeList = ref([{
			value: '0',
			text: "身份证"
		},
		{
			value: '1',
			text: "港澳台通信身份证"
		},
		{
			value: '2',
			text: "中国护照"
		},
		{
			value: '3',
			text: "外国护照"
		}
	])
	const baseFormData = ref({
		idcType: '0'
	})
	const list = ref([])
	const total = ref(0)
	const flag = ref(true)
	const queryParams = ref({
		rangeId: -1
	})
	onLoad((option) => {
		if (option.rangId) {
			baseFormData.value.rangeId = option.rangId
			queryParams.value.rangeId = option.rangId
			getList()
		}
	})
	// 查询会员
	function selectMember() {
		if (!baseFormData.value.name) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			})
			return
		}

		if (!baseFormData.value.idcCode) {
			uni.showToast({
				title: '请输入证件号',
				icon: 'none'
			})
			return
		}


		api.pickUp(baseFormData.value).then(res => {
			baseFormData.value.perId = res.data.perId
			baseFormData.value.ancestorNameList = res.data.ancestorNameList
			baseFormData.value.memName = res.data.memName
			baseFormData.value.personIdArray = res.data.perId
			flag.value = false
			uni.showToast({
				title: '查询成功！'
			})
		})
	}

	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 => {
			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() {
		api.getTransferList(queryParams.value).then(res => {
			list.value = res.rows
			total.value = res.total
		})
	}
	function commitFN() {
	  if (baseFormData.value.rangeId == -1) return
	  api.commit([baseFormData.value.rangeId] || [queryParams.value.rangeId]).then(res=>{
		  uni.showToast({
		  	title: '提交成功！'
		  })
		  uni.navigateBack()
	  })
	}
</script>

<style scoped lang="scss">
	.wBox {
		width: 700rpx;
		padding: 30rpx;
		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;
		}
	}

	.button-group {
		text-align: right;

		button {
			margin-left: 30rpx;
		}
	}

	.info {
		display: flex;
		margin: 30rpx 0 20rpx;
		font-size: 28rpx;

		view {
			color: #7D8592;
			margin-right: 20rpx;
		}
	}
</style>