<template>
	<view class="page">
		<view class="content">
			<view class="base-person">
				<view class="item">
					<view class="item-title">您的姓名</view>
					<input @input="inputBaseName" :value="name" placeholder="请输入您的姓名" />
				</view>
				<view class="item">
					<view class="item-title">身份证号码</view>
					<input @input="inputBaseIdCard" :value="idcard" placeholder="请输入身份证号码" />
				</view>
				<view class="item">
					<view class="item-title">人员类型</view>
					<radio-group @change="baseChange"
						style="margin-top: 20rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;">
						<radio value="适龄公民" style="transform: scale(0.8);" checked="true">适龄公民</radio>
						<radio value="非适龄公民" style="transform: scale(0.8);margin-top: 10rpx;">非适龄公民</radio>
					</radio-group>
					<view>提示:依据<国务院关于开展全民义务植树运动的实施办法>适龄公民指男11岁至60岁,女11岁至55岁的中华人民共和国公民。</view>
					<view v-if="personList.length==0" class="add-person" @click="addPerson">添加人员</view>
				</view>
				<view class="item">
					<view class="item-title">联系电话</view>
					<input @input="inputBasePhone" :value="phone" placeholder="请输入常用手机号码" />
				</view>
				<view class="item">
					<view class="item-title">备注留言</view>
					<input @input="inputBaseRemark" :value="remark" placeholder="有什么想说的话可以在这里留言" />
				</view>
			</view>

			<!-- 动态添加人员 -->
			<view class="base-person" v-for="(item,index) in personList" :key="index">
				<view class="item">
					<view class="item-title-box">
						<view class="item-title-name">您的姓名</view>
						<view class="item-title-del" @click="delPerson(index)">删除该人员</view>
					</view>
					<input @input="addPersonInputName($event,index)" :value="item.name" placeholder="请输入您的姓名" />
				</view>
				<view class="item">
					<view class="item-title">身份证号码</view>
					<input @input="addPersonInputIdCard($event,index)" :value="item.idcard" placeholder="请输入身份证号码" />
				</view>
				<view class="item">
					<view class="item-title">人员类型</view>
					<radio-group @change="addChange($event,index)"
						style="margin-top: 20rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;">
						<radio value="适龄公民" style="transform: scale(0.8);" checked="true">适龄公民</radio>
						<radio value="非适龄公民" style="transform: scale(0.8);margin-top: 10rpx;">非适龄公民</radio>
					</radio-group>
					<view>提示:依据<国务院关于开展全民义务植树运动的实施办法>适龄公民指男11岁至60岁,女11岁至55岁的中华人民共和国公民。</view>
					<view v-if="index == personList.length-1" class="add-person" @click="addPerson">添加人员</view>
				</view>
				<view class="item">
					<view class="item-title">联系电话</view>
					<input @input="addPersonInputPhone($event,index)" :value="item.phone" placeholder="请输入常用手机号码" />
				</view>

			</view>
			<view class="save-btn" @click="doSave">确认提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityId: "",
				name: "",
				idcard: "",
				phone: "",
				remark: "",
				type: "适龄公民",
				personList: [],
				token: ""
			}
		},
		onLoad(res) {
			this.activityId = res.id;
			this.token = getApp().globalData.token;
		},
		methods: {
			baseChange(event) {
				this.type = event.detail.value
			},
			inputBaseName(event) {
				this.name = event.target.value
			},
			inputBaseIdCard(event) {
				this.idcard = event.target.value
			},
			inputBasePhone(event) {
				this.phone = event.target.value
			},
			inputBaseRemark(event) {
				this.remark = event.target.value
			},
			addPerson() {
				var item = {
					name: "",
					idcard: "",
					phone: "",
					remark: "",
					type: "适龄公民",
					remark: ""
				}
				this.personList.push(item)
			},
			delPerson(index) {
				this.personList.splice(index, 1)
				this.$forceUpdate()
			},
			addPersonInputPhone(event, index) {
				this.personList[index].phone = event.target.value
			},
			addPersonInputIdCard(event, index) {
				this.personList[index].idcard = event.target.value
			},
			addPersonInputName(event, index) {
				this.personList[index].name = event.target.value
			},
			addChange(event, index) {
				this.personList[index].type = event.target.value
			},
			doSave() {
				if (this.name == "") {
					uni.showToast({
						icon: 'error',
						title: "请输入姓名"
					})
					return;
				}
				if (this.idcard == "") {
					uni.showToast({
						icon: 'error',
						title: "请输入身份证号"
					})
					return;
				}
				if (this.phone == "") {
					uni.showToast({
						icon: 'error',
						title: "请输入电话"
					})
					return;
				}
				var itemPerson = []
				if (this.personList.length > 0) {
					for (var i = 0; i < this.personList.length; i++) {
						if (this.personList[i].name == "") {
							uni.showToast({
								icon: 'error',
								title: "请输入姓名"
							})
							return;
						}
						if (this.personList[i].idcard == "") {
							uni.showToast({
								icon: 'error',
								title: "请输入身份证号"
							})
							return;
						}
						if (this.personList[i].phone == "") {
							uni.showToast({
								icon: 'error',
								title: "请输入电话"
							})
							return;
						}
					}

					for (var i = 0; i < this.personList.length; i++) {
						var basePerson = {
							name: this.personList[i].name,
							phone: this.personList[i].phone,
							userType: this.personList[i].type,
							cardNum: this.personList[i].idcard,
							orderNum: i,
						}
						itemPerson.push(basePerson);
					}
				}

				var person = {
					name: this.name,
					phone: this.phone,
					remake: this.remark,
					userType: this.type,
					activityId: this.activityId,
					cardNum: this.idcard,
					activityJoinVOList: itemPerson
				}
				console.log(person)
				uni.showLoading({
					title: "提交中..."
				})
				this.$app.request({
					url: this.$api.duty.doSignActivity,
					method: 'POST',
					dataType: 'json',
					header: {
						token: this.token
					},
					data: person,
					success: res => {
						if (res.status) {
							uni.hideLoading()
							uni.showToast({
								icon: 'error',
								title: "系统错误"
							})
						} else {
							uni.hideLoading()
							uni.showToast({
								icon: 'success',
								title: "报名成功"
							})
							uni.navigateBack()
						}
					},
					fail: res => {

					},
					complete: res => {
						uni.hideLoading()
					}
				});

			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;

	}

	.page {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: auto;
		height: 100%;
		background: #f2f2f2;
	}

	.content {
		flex: 1;
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
	}

	.base-person {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		font-size: 20rpx;
		background: white;
		margin-bottom: 20rpx;
		width: 100%;

		.item {
			display: flex;
			flex-direction: column;
			margin: 20rpx;
			justify-content: flex-start;
			align-items: center;
			width: 95%;

			.item-title {
				font-size: 25rpx;
				width: 100%;
				background: #e4f3f2;
				padding: 10rpx;
			}

			.item-title-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				background: #f2f2f2;
				padding: 10rpx;
				width: 100%;

				.item-title-name {
					font-size: 20rpx;
				}

				.item-title-del {
					color: darkgreen;
				}

			}

			input {
				margin-top: 20rpx;
				padding: 10rpx;
				width: 95%;
				font-size: 25rpx;
				border: 1rpx #d3d3d3 solid;
			}
		}
	}

	.add-person {
		color: green;
		border: 1rpx #c28127 solid;
		border-radius: 10rpx;
		text-align: center;
		align-self: flex-start;
		margin-top: 10rpx;
		border-radius: 10rpx;
		width: 25%;
		padding: 10rpx;
	}

	.save-btn {
		color: white;
		background-color: green;
		width: 95%;
		border-radius: 10rpx;
		text-align: center;
		align-self: center;
		margin-top: 5rpx;
		border-radius: 10rpx;
		padding: 10rpx;
	}
</style>
