<template>
	<view class="content">
		<view class="top-box">团队报名</view>
		<view class="box">
			<view class="box-1">
				<view class="box-left">
					单位名称
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="unit_name" placeholder="请输入单位名称"
					placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					单位性质
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="unit_type" placeholder="请输入单位性质"
					placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					法人代表
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="unit_peo" placeholder="请输入法人代表"
					placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					单位人数
					<text class="imp"></text>
					：
				</view>
				<input type="number" value="" class="list-input" v-model="unit_num" placeholder="请输入单位人数" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					联系人
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="unit_concat" placeholder="请输入联系人"
					placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					常驻地区
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="usually_area" placeholder="请输入常驻地区"
					placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					邮政编码
					<text class="imp"></text>
					：
				</view>
				<input type="number" value="" class="list-input" v-model="postal_code" placeholder="请输入邮政编码"
					placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					联系电话
					<text class="imp"></text>
					：
				</view>
				<input type="number" value="" class="list-input" v-model="concat_phone" placeholder="请输入联系电话"
					placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					电子邮箱
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="email" placeholder="请输入电子邮箱"
					placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					联系地址
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="concat_address" placeholder="请输入联系地址"
					placeholder-class="placeholder" />
			</view>
		</view>
		<!-- <view class="buttom-ts" ></view> -->
		<view class="buttom" :class="{ action: loding }" @click="!loding ? join() : ''">提交申请</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		vip,
		getVipmoney,
		createOrder
	} from '@/api/index.js';
	import {
		upload
	} from '@/api/ask.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				loding: false, //是否提交中
				unit_name: '', //单位名称
				unit_peo: '', //法人代表
				unit_type: '', //单位性质
				unit_num: '', //单位人数
				unit_concat: '', //单位联系人
				usually_area: '', //常驻地区
				postal_code: '', //邮政编码
				concat_phone: '', //联系电话
				email: '', //电子邮箱
				id: '',
				money: '',
				concat_address: '' //联系地址
			};
		},
		onShow() {
			if (this.hasLogin) {
				// this.loadBaseData();
				const obj = this
				console.log('getVipmoney+++++')
				getVipmoney().then(({
					data
				}) => {
					console.log(data, 'getVipmoney');
					data.forEach(e => {
						if (e.user_type == 2) {
							obj.money = e.pay_price;
							obj.id = e.id;
							console.log(obj.money, obj.id)
						}
					});
				});
			} else {
				saveUrl();
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
			}
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo']),
			...mapState(['weichatObj']),
			// startDate() {
			// 	return this.getDate('start');
			// },
			// endDate() {
			// 	return this.getDate('end');
			// }
		},
		methods: {
			async join() {
				let obj = this;
				if (obj.unit_name == '') {
					obj.$api.msg('请填写单位名称');
					return;
				}
				if (obj.unit_type == '') {
					obj.$api.msg('请填写单位性质');
					return;
				}
				if (obj.unit_peo == '') {
					obj.$api.msg('请填写法人代表');
					return;
				}
				if (obj.unit_num == '') {
					obj.$api.msg('请填写单位人数');
					return;
				}
				if (obj.unit_concat == '') {
					obj.$api.msg('请填写联系人');
					return;
				}
				if (obj.usually_area == '') {
					obj.$api.msg('请填写常驻地址');
					return;
				}
				if (obj.postal_code == '') {
					obj.$api.msg('请填写邮政编码');
					return;
				}
				if (obj.concat_phone == '') {
					obj.$api.msg('请填写联系电话');
					return;
				}
				if (!/^((\+?86)|(\(\+86\)))?1\d{10}$/.test(obj.concat_phone)) {
					obj.$api.msg('请填写正确的联系电话');
					return;
				}
				if (obj.email == '') {
					obj.$api.msg('请填写电子邮箱');
					return;
				}

				if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(obj.email)) {
					obj.$api.msg('请填写正确的邮箱');
					return;
				}
				if (obj.concat_address == '') {
					obj.$api.msg('请填写联系地址');
					return;
				}
				// obj.loding = true;
				vip({
						company_name: obj.unit_name, //单位名称
						nature: obj.unit_type, //性质
						legal_person: obj.unit_peo, //法人
						company_member: obj.unit_num * 1, //公司人数
						company_address: obj.concat_address, //联系地址
						zip_code: obj.postal_code, //邮编
						mobile: obj.concat_phone, //联系电话
						company_email: obj.email, //邮箱
						address: obj.usually_area, //常驻地址
						full_name: obj.unit_concat, //联系人
						user_type: 2
					})
					.then(e => {
						if (e.status == 400) {
							obj.$api.msg(e.msg);
							return;
						}
						uni.showModal({
							title: '提示',
							content: '成为企业会员需要缴纳' + obj.money + '元年费，是否前往提交',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									console.log(obj.money,obj.id,'obj.id+++++')
									createOrder({
										level_id: obj.id,
										body: '企业红会年费',
										pay_type: 0,
										// name: obj.name,
										pay_price: obj.money,
										from: 'weixin'
									}).then(({
										data
									}) => {
										let res = data.jsConfig;
										console.log(res);
										obj.weichatObj.chooseWXPay({
											timestamp: res.timestamp,
											nonceStr: res.nonceStr,
											package: res.package,
											signType: res.signType,
											paySign: res.paySign,
											success: function(res) {
												obj.unit_name = '';
												obj.unit_type = '';
												obj.unit_num = '';
												obj.concat_address = '';
												obj.postal_code = '';
												obj.concat_phone = '';
												obj.email = '';
												obj.usually_area = '';
												uni.navigateTo({
													url: '../joinSuc/joinNow'
												});
											},
											fail: function(res) {
												this.$refs.popup1.open();
												console.log(res, '失败');
												console.log(res.errMsg);
											}
										});
									});
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					})
					.catch(function(e) {
						console.log('出错了');
						console.log(e);
					});
			},
			imgsub() {
				console.log('imgsub');
				upload({
					filename: ''
				}).then(data => {
					this.cardimg = data[0].url;
				});
			},
			// 选择性别
			bindPickerSex: function(e) {
				console.log(this.array[e.target.value]);
				this.sex = this.array[e.target.value];
				this.index = e.target.value + 1;
			},
			// 选择教育程度
			bindPickerEdu: function(e) {
				this.education = this.chooseEdu[e.target.value];
				this.index = e.target.value + 1;
			},
			// 选择日期
			bindDateChange: function(e) {
				this.birth = e.target.value;
			},
			// 是否参加志愿活动
			bindPickerVol: function(e) {
				this.is_vol = this.chooseVol[e.target.value];
				this.index = e.target.value + 1;
			},
			// 有无服务经验
			bindPickerExp: function(e) {
				this.is_experience = this.chooseExp[e.target.value];
				this.index = e.target.value + 1;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 选择可提供时间

			// this.quantum = item.detail.value.join(',');

			checktime1(e) {
				// var items = this.timeList,
				// let quantum = [];
				this.quantum = e.detail.value.join(',');
				console.log(this.quantum);
			},
			checktime2(e) {
				// var items = this.timeList,
				let values = e.detail.value;
				// let quantum = [];
				console.log(values);
			},
			checktime3(e) {
				// var items = this.timeList,
				let values = e.detail.value;
				// let quantum = [];
				console.log(values);
			},
			//选择有兴趣参与的工作
			checkjob(item) {
				this.taste = item.detail.value.join(',');
			},
			// 选择专长checkspeciality
			checkspeciality(item) {
				this.speciali = item.detail.value.join(',');
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fdcbc2;
		height: 100%;
	}

	.content {
		max-height: 100%;
		padding-top: 44rpx;
		background-color: #fdcbc2;

		.buttom-ts {
			height: 120rpx;
		}

		.buttom {
			margin: 60rpx auto 0;
			// position: absolute;
			// bottom: 0;
			width: 600rpx;
			height: 100rpx;
			border-radius: 50rpx;
			background: #fa7e67;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 100rpx;
			text-align: center;

			&.action {
				background: #999999;
			}
		}

		.box {
			// margin-top: 44rpx;
			width: 690rpx;
			margin: 20rpx auto 0;
			background-color: #ffffff;
			border-radius: 20rpx;
			// padding: 28rpx 20rpx 32rpx 20rpx;
			position: relative;

			.red-box {
				width: 405rpx;
				line-height: 66rpx;
				text-align: center;
				background: linear-gradient(0deg, #c90f1b, #f14d33);
				// background-color: #c62316;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #ffffff;
				// position: relative;
				position: absolute;
				top: -36rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 1;
			}

			.box-check {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
				line-height: 100rpx;
			}

			.imp {
				color: red;
				margin-left: 5rpx;
			}

			.box-1 {
				height: 98rpx;
				padding: 0 20rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #f0f0f0;
				line-height: 98rpx;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;

				// .box-left {
				// 	width: 120rpx;
				// }
				// .list-input {
				// 	width: 440rpx;
				// }
				// .box-right {
				// 	width: 440rpx
				// }
				.list-input {
					width: 440rpx;
					// height: 26rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000;
				}

				.placeholder {
					color: #999999;
				}

				.box-right {
					width: 440rpx;
				}
			}
		}
	}

	.upload-box {
		// height: 247rpx;
		background: #ffffff;
		border-radius: 27rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx 40rpx 30rpx 0;
		margin: 15rpx auto 30rpx;
		width: 690rpx;
		background: #ffffff;
		border-radius: 10rpx;

		.upload-left {
			padding-left: 20rpx;
			font-weight: 400;
			color: #000;
		}

		.upload-right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			.upload-img {
				width: 160rpx;
				height: 160rpx;
				margin-top: 24rpx;
			}
		}
	}

	.top-box {
		height: 58rpx;
		font-size: 38rpx;
		line-height: 58rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fa7e67;
		text-align: center;
		position: relative;
	
	&::before {
			content: '';
			width: 215rpx;
			height: 17rpx;
			background: #fff;
			opacity: 0.26;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 0 auto;
		}
	}
</style>