<template>
	<view class="page">
		<view class="content">
			<scroll-view scroll-y="true" style="height: 95%;padding-bottom: 150rpx;margin-bottom: 150rpx;">
				<view class="base-person">
					<view class="thick-divider"></view>
					<view class="item-box">
						<view class="item-title">报名类型</view>
						<radio-group @change="typeChange($event)" class="item-content">
							<radio value="1" style="transform: scale(0.7);font-size: 32rpx;" :checked="personType==1"
								color="green">
								个人</radio>
							<radio value="2" style="transform: scale(0.7);margin-left: 20rpx;font-size: 32rpx;"
								:checked="personType==2" color="green">单位</radio>
						</radio-group>
					</view>
					<view class="thick-divider"></view>
					<block v-if="personType==1">
						<view class="item-box">
							<view class="item-title">您的姓名</view>
							<input @input="inputBaseName" :value="name" placeholder="请输入您的姓名" class="item-content"
								placeholder-class="item-input" style="text-align: right;" />
						</view>
						<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
						<view class="item-box" style="margin-top: 0px;">
							<view class="item-title">身份证号码</view>
							<input placeholder-class="item-input" @input="inputBaseIdCard" :value="idcard"
								placeholder="请输入身份证号码" class="item-content" style="text-align: right;" />
						</view>
						<view class="thick-divider"></view>
						<view class="item-box">
							<view class="item-title" style="flex: 1;">是否为适龄公民</view>
							<radio-group @change="baseChange" class="item-content" style="flex:1.9;">
								<radio value="适龄公民" style="transform: scale(0.7);font-size: 32rpx;" color="green"
									checked="true">是</radio>
								<radio value="非适龄公民" style="transform: scale(0.7);margin-left: 10rpx;font-size: 32rpx;"
									color="green">否</radio>
							</radio-group>
						</view>
						<view v-if="1==personType" class="hint-txt">提示:依据<国务院关于开展全民义务植树运动的实施办法>
								适龄公民指男11岁至60岁,女11岁至55岁的中华人民共和国公民。</view>
						<view class="item-box">
							<view class="item-title">联系电话</view>
							<input placeholder-class="item-input" @input="inputBasePhone" :value="phone"
								placeholder="请输入常用手机号码" class="item-content" style="text-align: right;" />
						</view>
						<view class="thick-divider"></view>
						<view class="item-box-v">
							<view class="item-title">备注留言</view>
							<view class="item-content-bg">
								<textarea maxlength="50" @input="inputBaseRemark" :value="remark"
									placeholder="有什么想说的话可以在这里留言">
								</textarea>
								<text class="hint-num">{{remark.length}}/50</text>
							</view>
						</view>
					</block>
					<!-- 单位报名信息 -->
					<block v-else>
						<view class="item-box">
							<view class="item-title">单位名称</view>
							<input @input="inputOrgName" :value="orgName" placeholder="请输入单位名称" class="item-content"
								placeholder-class="item-input" style="text-align: right;" />
						</view>
						<view class="thick-divider"></view>
						<view class="item-box">
							<view class="item-title">您的姓名</view>
							<input @input="inputBaseName" :value="name" placeholder="请输入您的姓名" class="item-content"
								placeholder-class="item-input" style="text-align: right;" />
						</view>
						<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
						<view class="item-box" style="margin-top: 0rpx;">
							<view class="item-title">联系电话</view>
							<input placeholder-class="item-input" @input="inputBasePhone" :value="phone"
								placeholder="请输入常用手机号码" class="item-content" style="text-align: right;" />
						</view>
						<view class="thick-divider"></view>
						<view class="item-box-v">
							<view class="item-title">备注留言</view>
							<view class="item-content-bg">
								<textarea maxlength="50" @input="inputBaseRemark" :value="remark"
									placeholder="有什么想说的话可以在这里留言">
								</textarea>
								<text class="hint-num">{{remark.length}}/50</text>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
			<view class="btn-box">
				<view class="save-btn" @click="doSave">确认提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityId: "",
				name: "",
				idcard: "",
				phone: "",
				remark: "",
				type: "适龄公民",
				personType: '1',
				personList: [],
				token: "",
				orgName: ''
			}
		},
		onLoad(res) {
			this.activityId = res.id;
			this.token = getApp().globalData.token;
		},
		methods: {
			baseChange(event) {
				this.type = event.detail.value
			},
			typeChange(event) {
				this.personType = event.detail.value;
			},
			inputOrgName(event) {
				this.orgName = event.detail.value
			},
			inputBaseName(event) {
				this.name = event.target.value
				console.log(this.name)
			},
			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 (2 == this.personType) {
					if (this.orgName == "") {
						uni.showToast({
							icon: 'error',
							title: '请输入单位名称'
						})
						return;
					}
				}
				if (this.name == "") {
					uni.showToast({
						icon: 'error',
						title: "请输入姓名"
					})
					return;
				}
				if (1 == this.personType) {
					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);
					}
				}


				uni.showLoading({
					title: "提交中..."
				})
				if ('1' == this.personType) {
					var person = {
						name: this.name,
						phone: this.phone,
						remake: this.remark,
						userType: this.type,
						type: this.personType,
						activityId: this.activityId,
						cardNum: this.idcard,
						activityJoinVOList: itemPerson
					}
					this.$app.request({
						url: this.$api.duty.doSignActivity,
						method: 'POST',
						dataType: 'json',
						header: {
							token: this.token
						},
						data: person,
						success: res => {
							console.log(res)
							if (res.status) {
								uni.hideLoading()
								uni.showToast({
									icon: 'error',
									title: "系统错误"
								})
							} else {
								if (res.msg) {
									uni.showToast({
										icon: 'error',
										title: res.msg
									})
								} else {
									uni.hideLoading()
									uni.showToast({
										icon: 'success',
										title: "报名成功",
										success() {
											setTimeout(function() {
												let pages = getCurrentPages(); // 当前页面
												let beforePage = pages[pages.length - 2]; // 前一个页面
												beforePage.$vm.isRefresh = true;
												uni.navigateBack()
											}, 1000)
										}
									})

								}
							}
						},
						fail: res => {
							console.log(res)
							if (res.data) {
								uni.showToast({
									icon: 'error',
									title: res.data.msg
								})
							} else {
								uni.showToast({
									icon: 'error',
									title: '网络错误'
								})
							}
						},
						complete: res => {
							uni.hideLoading()
						}
					});
				} else {

					var person = {
						companyName: this.orgName,
						userName: this.name,
						phone: this.phone,
						remake: this.remark,
						userType: this.type,
						type: this.personType,
						activityId: this.activityId
					}
					this.$app.request({
						url: this.$api.duty.doSignOrgActivity,
						method: 'POST',
						dataType: 'json',
						header: {
							token: this.token
						},
						data: person,
						success: res => {
							console.log(res)
							if (res.status) {
								uni.hideLoading()
								uni.showToast({
									icon: 'error',
									title: "系统错误"
								})
							} else {
								if (res.msg) {
									uni.showToast({
										icon: 'error',
										title: res.msg
									})
								} else {
									uni.hideLoading()
									uni.showToast({
										icon: 'success',
										title: "报名成功",
										success() {
											setTimeout(function() {
												uni.navigateBack()
											}, 1000)
										}
									})

								}
							}
						},
						fail: res => {

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

				}
			}
		}
	}
</script>

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

	}

	.page {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		background: white;
	}

	.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;
		margin-bottom: 20rpx;
		width: 100%;

		.thick-divider {
			height: 15rpx;
			background: #f2f2f2;
			width: 100%;
		}

		.hint-txt {
			padding: 10rpx 40rpx;
			color: darkred;
			font-size: 20rpx;
			background: #f2f2f2;
		}

		.item-box-v {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-top: 10rpx;
			background: white;
			align-items: flex-start;
			width: 100%;
			padding-bottom: 50rpx;

			.item-title {
				font-size: 28rpx;
				padding: 10rpx 30rpx;
			}

			.item-content {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				padding: 10rpx 30rpx;
				font-size: 28rpx;

				input {
					font-size: 28rpx;
				}
			}

			.item-content-bg {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				padding: 20rpx;
				width: 85%;
				background: #f3f3f3;
				border-radius: 10rpx;
				align-self: center;
				height: 220rpx;

				textarea {
					font-size: 28rpx;
					text-align: left;
					width: 100%;
				}

				.hint-num {
					align-self: flex-end;
				}
			}

		}

		.item-box {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 10rpx;
			background: white;
			align-items: center;
			width: 100%;

			.item-input {
				font-size: 28rpx;
			}

			.item-title {
				font-size: 28rpx;
				flex: 0.5;
				padding: 15rpx 30rpx;
			}

			.item-content {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				flex: 1.5;
				padding: 15rpx 30rpx;
			}
		}

		.item {
			display: flex;
			flex-direction: row;
			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;
	}

	.btn-box {
		width: 100%;
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: white;
		bottom: 0;
		position: fixed;

		.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;
		}
	}


	.type-change-box {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}
</style>
