<style>
	.activeSignUp {
		/* height: 100vh; */
	}

	.activeSignName {
		font-size: 28rpx;
		color: #1F1F1F;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.activeSign_Input {
		border-bottom: 1px solid #DADCE6;
		padding: 10rpx 0 20rpx 0;
	}

	.activeMainDiv {
		margin-bottom: 50rpx;
	}

	.active_Nature text {
		display: inline-block;
		padding: 6rpx 20rpx;
		background-color: #D2D2D2;
		color: black;
		margin: 0 40rpx 30rpx 0;
		border-radius: 10rpx;
		font-weight: bold;
		color: #1F1F1F;
	}

	.active_InTitle {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.checkedNature {
		background-color: #FDCCD4 !important;
		color: #F95771 !important;
	}

	.activeTopImg {
		width: 100%;
		height: 150px;
	}

	.active_Main {
		width: 100%;
		height: 100%;
		background-color: #000815;
	}

	.active_Info {
		padding: 30rpx 30rpx 45rpx 30rpx;
		width: 92%;
		margin: auto;
		background-color: #fff;
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.active_ContractContrent {
		display: flex;
		border-bottom: 1px solid #F5F6F7;
		padding-bottom: 20rpx;
		margin-bottom: 40rpx;
	}

	.active_Conleft {
		width: 170rpx;
		height: 75px;
		border-right: 1px solid #D5D5D5;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.AContra_Name {
		font-weight: bold;
		font-size: 30rpx;

	}

	.ac_Leftname {
		font-size: 26rpx;
		color: #696969;
	}

	.ac_Rightname {
		color: #1F1F1F;
		font-size: 26rpx;
		font-weight: bold;
	}

	.active_ConRight>view {
		margin-bottom: 15rpx;
	}

	.ac_upBtn {
		width: 40vw;
		height: 80rpx;
		border-radius: 20rpx;
		/* background-color: yellow; */
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.ac_CancelBtn {
		width: 40vw;
		height: 80rpx;
		border: 1px solid #E2E2E2;
		color: #1F1F1F;
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 20rpx;
	}

	.activeStar {
		color: red;
		margin-right: 5rpx;
		font-size: 23rpx;
	}
</style>
<template>
	<view class="activeSignUp">
		<view class="activeTopImg">
			<image mode="heightFit" style="width:100%;height:100%"
				src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1666692281000_342.png" />
		</view>
		<view class="active_Main">
			<view style="width:100%;height:35px;">
				<image mode="heightFit" style="width:100%;height:100%" src="@/static/images/signJuan.png" />
			</view>
			<view class="active_Info">
				<view class="active_InTitle">
					<text class="activeStar">*</text>
					基础信息
				</view>
				<view class="activeMainDiv">
					<view class="activeSignName">单位/企业/机构名称</view>
					<input class="activeSign_Input" placeholder="请输入对应名称" v-model="signMsg.CompanyName" />
				</view>
				<view class="activeMainDiv" style="border-bottom:1px solid #F5F6F7">
					<view class="activeSignName" style="margin-bottom:30rpx;"><text class="activeStar">*</text>性质（单选）
					</view>
					<view class="active_Nature">
						<text v-for="(item,index) in natureList" @click="getckedId(item,index)"
							:class="{'checkedNature':commonIndex==index}" :key="index">{{item.Name}}</text>
					</view>
				</view>
				<template v-if="signMsg.FirstShopLinkManList.length>0">
					<view class="active_InTitle">
						<text>*</text>
						联系人<text style="font-size:26rpx">（{{signMsg.FirstShopLinkManList.length}}）</text>
					</view>
					<view class="active_ContractContrent" v-for="(item,index) in signMsg.FirstShopLinkManList"
						:key="index">
						<view class="active_Conleft">
							<view class="AContra_Name">{{item.LinkMan}}</view>
							<view>
								<image mode="heightFit" @click="editSignPerson(item,index)"
									style="width:32rpx;height:32rpx" src="@/static/images/aedit.png">
									<image mode="heightFit" @click="removeSignPerson(index)"
										style="width:33rpx;height:33rpx;margin-left:40rpx;"
										src="@/static/images/adel.png">
							</view>
						</view>
						<view class="active_ConRight" style="padding-left:10px;">
							<view>
								<text class="ac_Leftname">公司职务：</text>
								<text class="ac_Rightname">{{item.Post}}</text>
							</view>
							<view>
								<text class="ac_Leftname">所属区域：</text>
								<text class="ac_Rightname">{{item.CountryInfo}}</text>
							</view>
							<view>
								<text class="ac_Leftname">联系电话：</text>
								<text class="ac_Rightname">{{item.LinkTel}}</text>
							</view>
						</view>
					</view>
				</template>
				<view v-if="isShowAdd">
					<view class="activeMainDiv">
						<view class="activeSignName"><text class="activeStar">*</text>姓名</view>
						<input class="activeSign_Input" v-model="pMsg.LinkMan" placeholder="请输入您的姓名" />
					</view>
					<!-- 新增年龄 -->
					<!-- <view class="activeMainDiv">
						<view class="activeSignName">年龄</view>
						<input type="number" class="activeSign_Input" v-model="pMsg.Age" placeholder="请输入您的年龄" />
					</view> -->
					<!-- <view class="activeMainDiv">
						<view class="activeSignName">身份证号码</view>
						<input type="number" class="activeSign_Input" v-model="pMsg.IdCard" placeholder="请输入您的身份证号码" />
					</view> -->
					<view class="activeMainDiv">
						<view class="activeSignName">公司职务</view>
						<input class="activeSign_Input" v-model="pMsg.Post" placeholder="请输入您在公司的职务" />
					</view>
					<view class="activeMainDiv">
						<view class="activeSignName">所属国籍/省/市</view>
						<input class="activeSign_Input" v-model="pMsg.CountryInfo" placeholder="所属国籍/省/市" />
					</view>
					<view class="activeMainDiv">
						<view class="activeSignName"><text class="activeStar">*</text>手机号</view>
						<input class="activeSign_Input" v-model="pMsg.LinkTel" placeholder="请输入您的11位手机号码" />
					</view>
					<!-- 新增表单 -->
					<view class="activeMainDiv">
						<view class="activeSignName">因疫情防控需要，请如实填写以下内容，感谢你的配合。</view>
					</view>
					<view class="activeMainDiv">
						<view class="activeSignName"><text class="activeStar">*</text>是否完成新冠接种</view>
						<u-radio-group v-model="pMsg.IsInoculate" :size="36">
							<u-radio shape="circle" :name="1">是</u-radio>
							<u-radio shape="circle" :name="0">否</u-radio>
						</u-radio-group>
					</view>
					<view class="activeMainDiv">
						<view class="activeSignName">因疫情防控需要，请如实填写以下内容，感谢你的配合。</view>
					</view>
					<view class="activeMainDiv">
						<view class="activeSignName">
							<text class="activeStar">*</text>
							1、会议前10天有港台地区和国外旅居史的人员</view>
						<u-radio-group v-model="pMsg.IsGATLJ" :size="36">
							<u-radio shape="circle" :name="1">是</u-radio>
							<u-radio shape="circle" :name="0">否</u-radio>
						</u-radio-group>
						<!-- <view class="activeSignName" style='margin-top: 20rpx;'>备注</view> -->
						<!-- <input class="activeSign_Input" style='margin-top: 20rpx;' v-model="pMsg.GATLJRemark" placeholder="备注" /> -->
					</view>
					<view class="activeMainDiv">
						<view class="activeSignName">
							<text class="activeStar">*</text>
							2、活动前7天内有国内重点地区（见“成都来返蓉人员疫情防控最新政策”）旅居史且未完成相应管控要求等防控措施的人员。</view>
						<u-radio-group v-model="pMsg.IsZGFX" :size="36">
							<u-radio shape="circle" :name="1">是</u-radio>
							<u-radio shape="circle" :name="0">否</u-radio>
						</u-radio-group>
						<!-- <view class="activeSignName" style='margin-top: 20rpx;'>备注</view> -->
						<!-- <input class="activeSign_Input" style='margin-top: 20rpx;' v-model="pMsg.ZGFXRemark" placeholder="备注" /> -->
					</view>
					<view class="activeMainDiv">
						<view class="activeSignName">
							<text class="activeStar">*</text>
							3、活动前7天内接到有关部门、单位关于疫情防控风险提示要求集中或居家隔离医学观察、健康监测，且未完成相关防控措施的人员。
						</view>
						<u-radio-group v-model="pMsg.IsQZJC" :size="36">
							<u-radio shape="circle" :name="1">是</u-radio>
							<u-radio shape="circle" :name="0">否</u-radio>
						</u-radio-group>
						<!-- <view class="activeSignName" style='margin-top: 20rpx;'>备注</view> -->
						<!-- <input class="activeSign_Input" style='margin-top: 20rpx;' v-model="pMsg.QZJCRemark" placeholder="备注" /> -->
					</view>
					<view class="activeMainDiv">
						<view class="activeSignName">
							<text class="activeStar">*</text>
							4、健康码为红黄码人员或临时弹窗的人员。
						</view>
						<u-radio-group v-model="pMsg.IsJJGLGX" :size="36">
							<u-radio shape="circle" :name="1">是</u-radio>
							<u-radio shape="circle" :name="0">否</u-radio>
						</u-radio-group>
						<!-- <view class="activeSignName" style='margin-top: 20rpx;'>备注</view> -->
						<!-- <input class="activeSign_Input" style='margin-top: 20rpx;' v-model="pMsg.JJGLGXRemark" placeholder="备注" /> -->
					</view>
					<view class="activeMainDiv">
						<view class="activeSignName">
							<text class="activeStar">*</text>
							5、尚在医学观察期内的已治愈出院的确诊病例和已解除集中隔离医学观察的无症状感染者。
							</view>
						<u-radio-group v-model="pMsg.IsZYCYJCGL" :size="36">
							<u-radio shape="circle" :name="1">是</u-radio>
							<u-radio shape="circle" :name="0">否</u-radio>
						</u-radio-group>
						<!-- <view class="activeSignName" style='margin-top: 20rpx;'>备注</view> -->
						<!-- <input class="activeSign_Input" style='margin-top: 20rpx;' v-model="pMsg.ZYCYJCGLRemark" placeholder="备注" /> -->
					</view>
					<view class="activeMainDiv">
						<view class="activeSignName">
							<text class="activeStar">*</text>
							6、被判定为新冠肺炎感染者（确诊病例或无症状感染者)的密切接触者、密接的密接、重点涉疫场所或区域风险人员。
							</view>
						<u-radio-group v-model="pMsg.IsMJ" :size="36">
							<u-radio shape="circle" :name="1">是</u-radio>
							<u-radio shape="circle" :name="0">否</u-radio>
						</u-radio-group>
						<!-- <view class="activeSignName" style='margin-top: 20rpx;'>备注</view> -->
						<!-- <input class="activeSign_Input" style='margin-top: 20rpx;' v-model="pMsg.MJRemark" placeholder="备注" /> -->
					</view>
					<view class="activeMainDiv">
						<view class="activeSignName">
							<text class="activeStar">*</text>
							7、有不适症状或有健康状况异常的人员（包括发热、干咳、乏力、咽痛、嗅（味）觉减退、腹泻等症状），且未排除新冠肺炎感染者的。
							</view>
						<u-radio-group v-model="pMsg.IsFRGK" :size="36">
							<u-radio shape="circle" :name="1">是</u-radio>
							<u-radio shape="circle" :name="0">否</u-radio>
						</u-radio-group>
						<!-- <view class="activeSignName" style='margin-top: 20rpx;'>备注</view> -->
						<!-- <input class="activeSign_Input" style='margin-top: 20rpx;' v-model="pMsg.FRGKRemark" placeholder="备注" /> -->
					</view>
					<!-- 新增表单 -->
				</view>
				<template v-if="signMsg.FirstShopLinkManList.length==0">
					<view>
						<view class="ac_upBtn" style="width:300rpx;margin:auto;" :style="{'background-color':mc}" @click="addPerson()">提交联系人信息</view>
					</view>
				</template>
				<template v-if="signMsg.FirstShopLinkManList.length>0">
					<view style="display: flex;justify-content: space-between;" v-if="isShowAdd">
						<view class="ac_upBtn" :style="{'background-color':mc}"  @click="addPerson()">提交联系人信息</view>
						<view class="ac_CancelBtn" @click="isShowAdd=false">取消</view>
					</view>
					<view v-if="!isShowAdd">
						<view class="ac_CancelBtn" style="width:300rpx;margin:auto;color:#fff;;"
						:style="{'background-color':mc}"
							@click="goOnAdd()">继续添加联系人</view>
					</view>
				</template>
				<view style="font-size: 16px;margin-top: 52rpx;font-weight: 600;">2022中国（成都）首店经济发展大会疫情防控提醒</view>
				<view style="font-size:13px !important;margin-top: 24rpx;">
					1、请如实填写，有异常情况的，请及时报告。
				</view>
				<view style="font-size:13px !important;margin-top: 24rpx;">
					2、如有相关情况说明，请在备注中详细注明。
				</view>
				<view style="font-size:13px !important;margin-top: 24rpx;">
					3、按照填报当天全国疫情中高风险地区调整情况。
				</view>
				<view style="font-size:13px !important;margin-top: 24rpx;">
					谢谢配合
				</view>
			</view>

			<view>
				<view class="ac_upBtn" style="width:90%;margin:25rpx auto" :style="{'background-color':mc}" @click="goSignUp()">提交</view>
			</view>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	export default {
		components: {
			auth
		},
		data() {
			return {
				mc: "",
				value: 1,
				natureList: [], //性质数组
				commonIndex: -1,
				signMsg: {
					ActivityIds: '',
					CompanyName: '',
					Nature: '',
					Remark: '',
					FirstShopLinkManList: []
				},
				pMsg: {
					LinkMan: '',
					LinkTel: '',
					Post: '',
					CountryInfo: '',
					Age:0,
					IdCard:'',
					IsInoculate:0,
					IsGATLJ:0,
					GATLJRemark:'',
					IsZGFX:0,
					ZGFXRemark:'',
					IsQZJC:0,
					QZJCRemark:'',
					IsJJGLGX:0,
					JJGLGXRemark:'',
					IsZYCYJCGL:0,
					ZYCYJCGLRemark:'',
					IsMJ:0,
					MJRemark:'',
					IsFRGK:0,
					FRGKRemark:''
				},
				isShowAdd: true,
				isEdit: false,
				EditIndex: -1,
				showAuth: false,
				u: {}
			}
		},
		created() {},
		mounted() {
			this.mc = this.$uiConfig.mainColor;
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: "",
				};
				this.showAuth = true;
			} else {
				this.getNatureList();
			}
		},
		onLoad(options) {
			if (options && options.Id) {
				this.signMsg.ActivityIds = options.Id;
			}
			uni.setNavigationBarTitle({
				title: "活动报名",
			});
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#000",
				animation: {
					duration: 400,
					timingFunc: "easeIn",
				},
			});
		},
		methods: {
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.getNatureList();
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack()
			},
			//获取性质
			getNatureList() {
				this.request2({
						url: "/api/AppletTrade/GetNatureEnumList",
						data: {},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.natureList = res.data;
						}
					}
				);
			},
			//点击性质
			getckedId(item, index) {
				this.commonIndex = index;
				this.signMsg.Nature = item.Id;
			},
			//提交联系人信息
			addPerson() {
				if (!this.isEdit) {
					if (this.pMsg.LinkMan == '') {
						uni.showToast({
							title: '请输入姓名',
							icon: 'none'
						})
						return
					}
					if (this.pMsg.LinkTel == '') {
						uni.showToast({
							title: '请输入联系手机号',
							icon: 'none'
						})
						return
					}
					this.signMsg.FirstShopLinkManList.push(JSON.parse(JSON.stringify(this.pMsg)));
					this.isShowAdd = false;
				} else {
					this.signMsg.FirstShopLinkManList[this.EditIndex] = JSON.parse(JSON.stringify(this.pMsg));
					if (this.signMsg.FirstShopLinkManList[this.EditIndex].LinkMan == '') {
						uni.showToast({
							title: '请输入姓名',
							icon: 'none'
						})
						return
					}
					if (this.signMsg.FirstShopLinkManList[this.EditIndex].LinkTel == '') {
						uni.showToast({
							title: '请输入联系手机号',
							icon: 'none'
						})
						return
					}
					this.isShowAdd = false;
				}
			},
			//继续添加联系人
			goOnAdd() {
				this.isShowAdd = true;
				this.isEdit = false;
				this.clearInput();
			},
			//清空方法
			clearInput() {
				this.pMsg.LinkMan = '';
				this.pMsg.LinkTel = '';
				this.pMsg.Post = '';
				this.pMsg.CountryInfo = '';
				this.pMsg.Age=''
				this.pMsg.IdCard='',
				this.pMsg.IsInoculate=0,
				this.pMsg.IsGATLJ=0,
				this.pMsg.GATLJRemark='',
				this.pMsg.IsZGFX=0,
				this.pMsg.ZGFXRemark='',
				this.pMsg.IsQZJC=0,
				this.pMsg.QZJCRemark='',
				this.pMsg.IsJJGLGX=0,
				this.pMsg.JJGLGXRemark='',
				this.pMsg.IsZYCYJCGL=0,
				this.pMsg.ZYCYJCGLRemark='',
				this.pMsg.IsMJ=0,
				this.pMsg.MJRemark='',
				this.pMsg.IsFRGK=0,
				this.pMsg.FRGKRemark=''
			},
			//删除联系人
			removeSignPerson(index) {
				let that = this
				uni.showModal({
					title: "提示",
					content: "确认删除？",
					success: function(res) {
						if (res.confirm) {
							that.signMsg.FirstShopLinkManList.splice(index, 1);
							that.clearInput();
							that.isShowAdd = true;
							that.isEdit = false;
						} else if (res.cancel) {}
					},
				});

			},
			//编辑联系人
			editSignPerson(item, index) {
				this.isShowAdd = true;
				this.isEdit = true;
				this.EditIndex = index;
				this.pMsg.LinkMan = item.LinkMan;
				this.pMsg.LinkTel = item.LinkTel;
				this.pMsg.Post = item.Post;
				this.pMsg.CountryInfo = item.CountryInfo;
			},
			//立即报名
			goSignUp() {
				if (this.signMsg.CompanyName == '') {
					uni.showToast({
						title: '请输入单位/企业/机构名称',
					 icon: 'none'
					})
					return
				}
				if (this.signMsg.Nature == '') {
					uni.showToast({
						title: '请选择性质',
						icon: 'none'
					})
					return
				}
				if (this.signMsg.FirstShopLinkManList.length == 0) {
					uni.showToast({
						title: '请至少提交1个联系人信息',
						icon: 'none'
					})
					return
				}
				this.request2({
						url: "/api/AppletTrade/SetFirstShopActivityEnroll",
						data: this.signMsg,
					},
					(res) => {
						if (res.resultCode == 1) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: "/pages/kotra/signSuccse"
								})
							}, 1000)
						}
					}
				);
			}
		},
	}
</script>

<style>
</style>
