<template>
	<view class="hasfixedbottom">
		<view class="nolineform">
			<uni-forms :border="true" :modelValue="baseFormData" label-width="90">
<!-- 				<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,index) in list" :key="index">
					<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">
									{{getIdcType(n.perIdcType)}}: {{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: '3',
			text: "护照"
		},
		{
			value: '5',
			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 getIdcType(type) {
    for (var item of idcTypeList.value){
      if (item.value == type) {
        return item.text
      }
    }
  }

	// 查询会员
	function selectMember() {
		// if (!baseFormData.value.name) {
		// 	uni.showToast({
		// 		title: '请输入姓名',
		// 		icon: 'none'
		// 	})
		// 	return
		// }

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

		baseFormData.value.fromTransfer = '1'
		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 => {
			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.rangeId
			queryParams.value.rangeId = res.data.rangeId
			flag.value = true
			baseFormData.value.idcType = '0'
			baseFormData.value.idcCode = ''
			baseFormData.value.name = ''
			getList()
		})
	}

	function getList() {
		uni.showLoading({
			title:'加载中'
		})
		api.getTransferList(queryParams.value).then(res => {
			list.value = res.rows
			total.value = res.total
			uni.hideLoading()
		})
	}

	function commitFN() {
		if (baseFormData.value.rangeId == -1) return
		api.commit([baseFormData.value.rangeId] || [queryParams.value.rangeId]).then(res => {
			uni.showToast({
				title: '提交成功！'
			})
			uni.navigateBack()
		})
	}
	function handleDelete(row){
		uni.showModal({
			title: '提示',
			content: `确定删除吗`,
			success: function(res) {
				if (res.confirm) {
					api.deltransferRange([row.id]).then(Response=>{
						uni.showToast({
							icon:"none",
							title:'删除成功！'
						})
						if (total.value == 1) {
						    baseFormData.value.rangeId = '-1'
						    queryParams.value.rangeId = '-1'
						}
						getList()
					})
				}
			}
		})
	}
</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>