<template>
	<view class="content bgfff">
		<view v-if="content" style="padding-bottom: 15px;">
			<!-- 文本 -->
			<image :src="content.pic" mode="scaleToFill" class="topimg" v-if="content.headimg" @click="previewImage">
			</image>
			<view class="box newsDetail">
				<view class="title">
					{{content.title}}
				</view>
				<view class="c999  border-bottom">
					<view>报名开始时间：{{content.start_time}}</view>
					<view>报名截止时间：{{content.end_time}}</view>
				</view>
				<view class="con">
					<u-parse :content="content.text_content"></u-parse>
				</view>
			</view>
			<!-- 表单 -->
			<view class="from">
				<view class="item" v-for="(ite,ind) in formFields">
					<view class="name">
						<text v-if="ite.is_must">*</text>
						{{ite.name}}
					</view>
					<view class="input" v-if="ite.type==='text'||ite.type==='email'||ite.type==='tel'">
						<input :type="ite.type" v-model="ite.value" :placeholder="ite.placeholder"
							@input="clearError(ite)" :class="{ 'input-error': ite.error }" class="form-input" />
					</view>
					<view class="input select" v-if="ite.type=='radio'">
						<radio-group name="radio" @change="radioChange($event,ind)" class="radiogroup">
							<label v-for="(it,id) in ite.options" :key="ind" class="radio"
								:class="{ 'input-error': ite.error }">
								<radio :value="it" style="transform:scale(0.8)" color="#345A9B" />{{it}}
							</label>
						</radio-group>
					</view>
					<view class="input select" v-if="ite.type=='select'">
						<picker mode="selector" :range="ite.options" @change="onsexArr($event,ind)"
							:class="{ 'input-error': ite.error }" class="form-input">
							<view>{{ite.value?ite.value:ite.placeholder}}</view>
							<uni-icons type="forward" size="20" color="#999"></uni-icons>
						</picker>
					</view>
					<view class="input " v-if="ite.type=='checkbox'">
						<checkbox-group @change="checkboxChange($event,ind)" class="form-input checkbox"
							:class="{ 'input-error': ite.error }">
							<label v-for="(it,id) in ite.options" :key="ind">
								<checkbox :value="it" style="transform:scale(0.8)" color="#345A9B" />
								{{it}}
							</label>
						</checkbox-group>
					</view>
					<view class="input" v-if="ite.type=='textarea'">
						<textarea v-model="ite.value" name="content" maxlength="-1"
							:class="{ 'input-error': ite.error }" @input="clearError(ite)"
							:placeholder="ite.placeholder" class="form-input" />
					</view>
				</view>
				<view class="btn" @click="submitForm">提交报名</view>
			</view>
		</view>
		<view class="nolist" v-else>
			<image src="@/static/none.png"></image>
			<text>暂无数据</text>
		</view>
		<!-- 秘书处弹框 -->
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import uParse from '@/uni_modules/u-parse/u-parse.vue'
	export default {
		data() {
			return {
				type: 1,
				content: null,
				formFields: [],
				submitSuccess: false,
			}
		},
		components: {
			uParse,
		},
		computed: {
			...mapState(["user"]),
		},
		onLoad(options) {
			let that = this
			that.handleActive(options.id)
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShareAppMessage() {
			let that = this
			return {
				title: that.content.title,
				path: '/pageTwo/campaign/detail?id=' + that.content.id,
				imageUrl: that.content.headimg,
				success: function(res) {
					console.log("分享到朋友成功")
				},
				fail: function(res) {
					console.log("分享到朋友失败")
				},
			}
		},
		onShareTimeline() {
			let that = this
			return {
				title: that.content.title,
				query: 'id=' + that.content.id,
				imageUrl: that.content.headimg,
				success: function(res) {
					console.log("分享到朋友圈成功")
				},
				fail: function(res) {
					console.log("分享到朋友圈失败")
				},
			}
		},
		methods: {
			handleActive(id) {
				let that = this
				that.$model.getCampaignDetail({
					id: id
				}).then((res) => {
					if (res.code != 0) return
					this.content = res.data
					this.formFields = res.data.form_content
					this.formFields.forEach(field => {
						field.error = false
					});
				})
			},
			resetErrors() {
				this.formFields.forEach(field => {
					field.error = false;
				});
			},
			clearError(field) {
				field.error = false;
			},
			radioChange(e, it) {
				this.formFields[it].error = false;
				this.formFields[it].value = e.detail.value
			},
			checkboxChange(e, it) {
				this.formFields[it].error = false;
				this.formFields[it].value = e.detail.value
			},
			//确定性别
			onsexArr(e, it) {
				this.formFields[it].error = false;
				this.formFields[it].value = this.formFields[it].options[e.target.value]
				console.log("111111111", this.formFields[it], e.target)
			},
			submitForm() {
				let that = this
				that.resetErrors();
				let isValid = true;
				// 遍历所有表单字段进行验证
				that.formFields.forEach(field => {
					if (field.is_must) {
						if (field.value == '' || !field.value.length) {
							field.error = true;
							isValid = false;
							that.$set(that.formFields, 'error', true)
						} else if (field.type === 'email' && field.value != '') {
							// 邮箱格式验证
							const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
							if (!emailPattern.test(field.value)) {
								field.error = true;
								isValid = false;
								that.$set(that.formFields, 'error', true)
							}
						} else if (field.type === 'phone' && field.value != '') {
							// 手机号格式验证
							const phonePattern = /^1[3-9]\d{9}$/;
							if (!phonePattern.test(field.value)) {
								field.error = true;
								isValid = false;
								that.$set(that.formFields, 'error', true)
							}
						}
					}

				});
				// 如果验证通过
				if (isValid) {
					console.log("验证通过");
					that.$model.getCampaignSave({
						id: that.content.id,
						tel: that.user.phone,
						content: that.formFields
					}).then((res) => {
						if (res.code != 0) {
							that.$tools.msg(res.msg)
							return
						}
						that.$tools.msg("提交成功")
						setTimeout(function() {
							uni.navigateBack()
						}, 1000)
					})
				}

			},

			previewImage() {
				let that = this
				let image = []
				image.push(that.content.headimg)
				uni.previewImage({
					urls: image,
					current: 0,
				}).catch((e) => {
					console.log(e) //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 0;
	}

	.webview {
		position: fixed;
		top: 80px;
		width: 100%;
		height: 100vh;
	}

	.nolist {
		padding-top: 40%;
		margin-top: 0 !important;
	}

	.box {
		padding-bottom: 70px;
	}

	.topimg {
		width: 750rpx;
		height: 381rpx;
	}

	.icon-zantongfill {
		color: $red;
	}

	.foot {
		height: 50px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 15px;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
		background-color: #fff;
		justify-content: space-between;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;

		icon {
			font-size: 20px;
			margin-bottom: 3px;
		}

		view {
			width: 30%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
		}

		text {
			width: 100%;
			text-align: center;
			display: inline-block;
		}

		.call {
			width: 120px !important;
			color: #000;
			padding: 5px;
			border-radius: 5px;
			margin-left: 10px;
			float: right;
			background-color: #E6C8A2;
		}

		/deep/button {
			width: 30%;
			padding: 0;
			line-height: 20px;
			font-size: 14px;
			background: #fff;
			margin: 0;

		}

		button:after {
			border: none;
		}

	}

	.from {
		margin: 15px;
		padding: 15px;
		border-radius: 10px;
		border: 1px solid #345A9B;
		width: calc(100% - 60px);

		.item {
			margin-bottom: 15px;

			.name {
				display: flex;
				width: 100%;
				align-items: center;

				text {
					color: red;
					font-size: 18px;
					font-weight: bold;
					margin-right: 5px;
					display: inline-block;
					margin-top: 5px;
				}
			}

			.input {
				width: calc(100% - 5px);
				background: #fff;
				display: flex;
				border-radius: 5px;
				justify-content: space-between;

				.form-input {
					border-radius: 5px;
					border: 1px solid #dfdfdf;
				}

				.radiogroup {
					display: flex;
					width: 100%;
				}

				.radio {
					display: flex;
					align-items: center;
					margin-right: 10px;
				}

				input {
					padding: 8px 10px;
					width: 100%;

				}

				/deep/ picker {
					align-items: center;
					width: 100%;
					display: flex;
					padding: 0 10px;
					height: 40px;
					position: relative;

					view {
						width: 100%;
						position: absolute;
						top: 10px;
					}

					uni-icons {
						position: absolute;
						right: 10px;
						top: 10px;
					}
				}

				textarea {
					height: 65px;
					padding: 0 10px;
					line-height: 30px;
				}

				.checkbox {
					width: 100%;
					display: flex;
					padding: 10px;
					flex-wrap: wrap;

					label {
						width: 33.3%;
						display: flex;
						margin: 5px 0;
						align-items: center;
					}
				}
			}

			.input-error {
				border-radius: 5px;
				border-color: #e74c3c !important;
				background-color: rgba(231, 76, 60, 0.05);
			}

		}

		.btn {
			width: 100%;
			color: #fff;
			margin: 15px auto;
			text-align: center;
			background: #345A9B;
			height: 40px;
			font-size: 14px;
			line-height: 40px;
			border-radius: 5px;
		}
	}
</style>