<template>
	<div class="p-home-child-apply">
		<view class="g_h_40"></view>
		<div class="container" style="width: calc(100vw - 60px)">
			<div class="sub">
				<div class="title">您的姓名<span class="g_c_f40">*</span></div>
				<div class="content g_flex_row_between">
					<view class="g_flex_none g_w_160">
						<input type="nickname" name="name" class="g_fs_16" v-model="subInfo.name" @change="changeName" placeholder="请输入您的姓名" placeholder-style="color:#ccc;font-size:16px" />
					</view>
					<div class="g_flex_row_end g_flex_1">
						<div class="ageBtn g_mr_6" @click="activeAge = 1" :class="activeAge == 1 ? 'ageBtnActive' : ''">先生</div>
						<div class="ageBtn" @click="activeAge = 2" :class="activeAge == 2 ? 'ageBtnActive' : ''">女士</div>
					</div>
				</div>
			</div>
			<div class="sub" v-if="false">
				<div class="title">您的身份证号<span class="g_c_f40">*</span></div>
				<div class="content">
					<u-input type="idcard" name="idcard" v-model="subInfo.idcard" :maxlength="18" placeholder="请输入您的身份证号" placeholder-style="color:#ccc;" />
					<view class="form-new-why g_flex_column_center" style="" @click="updateImg">
						<image class="g_ml_4 g_w_24 g_h_22" :src="cdnBaseImg + 'mock_photo.svg'"></image>
					</view>
					<!-- img: info.idCardImageUrl, -->
					<!-- <g-panel-form-slot
					:list="[
						{
							icon: '',
							label: '',
							result: '',
							value: subInfo.idcard,
							path: '',
							tip: 'slot-upID',

							placeholder: '请输入您的身份证号',
							type: 'slot',
							pColumn: 1,
							require: false,
						},
					]"
					@updateIDInfo="handleClickIDcard"
					@changeName="changeIDcard"
				></g-panel-form-slot> -->
				</div>
			</div>
			<div class="sub" v-if="false">
				<div class="title">您的年龄<span class="g_c_f40">*</span></div>
				<div class="content">
					<u-input type="number" name="age" v-model="subInfo.age" placeholder="请输入您的年龄" placeholder-style="color:#ccc;" />
				</div>
			</div>
			<div class="sub">
				<div class="title">您的手机号<span class="g_c_f40">*</span></div>
				<div class="content g_flex_row_between g_position_rela">
					<view class="g_flex_1">
						<u-input type="number" name="tel" v-model="subInfo.tel" :maxlength="11" placeholder="请输入您的手机号" placeholder-style="color:#ccc;" />
					</view>
					<!-- <div class="g_flex_row_end g_flex_1 g_position_rela"> -->
					<!-- <div class="ageBtn ageBtnActive" style="width: 76px;">快速获取</div> -->
					<!-- <button v-if="showBtn" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0;z-index: 9999;" open-type="getPhoneNumber" @getphonenumber="getphonenumber"></button> -->
					<!-- </div> -->
				</div>
			</div>
			<view class="g_mt_24 g_pb_12">
				<rh-button  btnText="立即报名" type="primary" @clickBtn="submitForm"></rh-button>
			</view>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			cdnBaseImg: this.G.store().cdnBaseImg,
			userInfo: uni.getStorageSync("apply-userinfo").user,
			activeAge: 0,
			currentDate: "2024-08-29",
			subInfo: {},
			bindTel: "",
			showBtn: true,
			subLoading: false,
		};
	},
	props: {
		jid: {
			default: 0,
		},
	},
	mounted() {
		if (this.userInfo) {
			this.subInfo = {
				name: this.userInfo.realName || this.userInfo.userName,
				tel: this.userInfo.tel,
			};
		}
	},
	onShow() {
		this.subInfo = {
			name: "",
			tel: "",
		};
	},
	methods: {
		submitForm() {
			let that = this;
			if (that.subInfo.name == "") {
				uni.showToast({
					title: "请输入您的姓名",
					icon: "none",
				});
				return false;
			}
			if (that.subInfo.tel == "") {
				uni.showToast({
					title: "请输入手机号",
					icon: "none",
				});
				return false;
			}
			if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(that.subInfo.tel)) {
				uni.showToast({
					title: "请输入正确的手机号",
					icon: "none",
				});
				return false;
			}
			if (that.subLoading) {
				return false;
			}
			that.subLoading = true;
			that.$emit("exportForm", that.subInfo, (res) => {
				// console.log("res", res);
				that.subLoading = false;
			});
		},
		getChooseTime(e) {
			// console.log(e);
		},

		// 上传图片
		updateImg() {
			let that = this;
			// console.log("updateImg");
			this.G.uploadImg((res) => {
				// console.log("身份证信息：", res);
				if (res.status == "上传成功") {
					// console.log(res);
					that.subInfo.name = res.indo.name;
					that.subInfo.sex = res.indo.sex;
					that.subInfo.age = res.indo.age;
					that.subInfo.sex = res.indo.num;
				} else {
					that.showToast({
						title: "上传失败请重试",
						icon: "none",
					});
				}
				uni.hideLoading();
			}, "idcard");
		},

		getphonenumber(e) {
			// console.log(e);
			let that = this;
			this.showBtn = false;
			if (this.bindTel) {
				that.subInfo.tel = this.bindTel;
				return;
			}
			if (e.detail.code) {
				that.G.Get(
					that.api.login_getWxInfo,
					{
						code: uni.getStorageSync("apply-code"),
						// code: e.detail.code,
						btnCode: e.detail.code,
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData,
					},
					(wxRes) => {
						// console.log("获取微信手机号：", wxRes);
						that.subInfo.tel = wxRes.phoneNumber;
						that.bindTel = wxRes.phoneNumber;
						that.$forceUpdate();
					}
				);
			}
		},
		changeName(e) {
			// console.log(e);
			this.subInfo.name = e.detail.value;
		},
	},
};
</script>

<style lang="scss">
.p-home-child-apply {
	height: 100%;
	background: url("https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/quicklyRecord.png");
	background-repeat: no-repeat;
	background-size: cover;
	// background-position: center;
	.container {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 20px);
		margin-top: 0px;
		padding: 0 16px 16px;
		// background-color: #fff;
		box-sizing: border-box;
		border-radius: 16px;
		overflow: hidden;
		.sub {
			margin-top: 16px;
			border-bottom: 0.5px solid #eee;
			.title {
				color: #999;
			}
			.content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 8px 0;
				.ageBtn {
					padding: 6px 10px;
					font-size: 14px;
					border-radius: 16px;
					color: #999;
					background-color: #eeeeee55;
				}
				.ageBtnActive {
					color: #3578f6;
					background-color: #ebfff9;
					justify-content: space-between;
				}
			}
		}
	}
}
</style>
