<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: #F70027;
		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/Static/signBack.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 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>
				<template v-if="signMsg.FirstShopLinkManList.length==0">
					<view>
						<view class="ac_upBtn" style="width:300rpx;margin:auto;" @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" @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:#F70027;border-color:#F70027" 
						@click="goOnAdd()">继续添加联系人</view>
					</view>
				</template>
			</view>
			<view>
				<view class="ac_upBtn" style="width:90%;margin:25rpx auto" @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: ''
				},
				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));
					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='';
			},
			//删除联系人
			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=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>
