<template>
	<view data-remark='报名' class="g-rh-apply g_w_all g_bg_f_5 g_kuaishou">
		<rh-ai-super-input class="" @outputInfo="getTownsManInfo" ref="AiApplyRef" />
		<view class="">
			<view class="card-tip g_pt_12 g_pb_8 g_pl_20 g_c_6">工友信息</view>
			<view>
				<view class="g_bg_f g_pl_15 g_pr_15 g_pt_10 g_ml_10 g_mr_10 g_radius_8 g_mb_12" v-for="(item, index) in persenInfo" :key="index" style="margin-bottom: 12px">
					<view class="g_pb_2 g_flex_row_between">
						<view class="g_flex_1 g_flex_column_center g_mr_10">
							<view class="g_flex_row_start g_fs_16 g_fw_bold">
								<view> {{ item.userName ? item.userName + "/" : "姓名/" }} </view>
								<view v-if="!item.sex">性别/</view>
								<view v-if="item.sex == 1">男/</view>
								<view v-if="item.sex == 2">女/</view>
								<view> {{ item.age ? item.age + "岁/" : "年龄/" }} </view>
								<view> {{ item.nation ? item.nation : "民族" }} </view>
							</view>
						</view>
						<view class="g_flex_none g_flex_row_end">
							<view class="g_flex_row_end g_pl_16 g_pr_16 g_pt_9 g_pb_9" style="background-color: #f0fff8; border-radius: 17px">
								<view class="g_flex_row_end" @click="goFellow(item, index)">
									<view class="g_flex_column_center">
										<i class="iconfont icon-bianji g_c_3"></i>
									</view>
									<view class="g_fs_12 g_c_3 g_ml_8">编辑</view>
								</view>
							</view>
						</view>
					</view>
					<view class="g_pb_4 g_fs_16 g_c_6">{{ item.address ? item.address : "家庭住址" }}</view>
					<view class="g_flex_row_start g_pb_15">
						<view class="g_flex_row_start g_mr_14">
							<view class="g_flex_none g_mr_4 g_w_28 g_h_28 g_radius_50 g_flex_c">
								<image :src="cdnBaseImg + 'order_idcard.svg'" class="g_w_28 g_h_28"></image>
							</view>
							<view class="g_flex_column_center g_c_6">{{ item.idCard ? item.idCard : "身份证号" }}</view>
						</view>
						<view class="g_flex_row_start">
							<view class="g_flex_none g_mr_4 g_w_28 g_h_28 g_radius_50 g_flex_c">
								<image :src="cdnBaseImg + 'order_tel.svg'" class="g_w_28 g_h_28"></image>
							</view>
							<view class="g_flex_column_center g_c_6">{{ item.tel ? item.tel : "手机号" }}</view>
						</view>
					</view>
					<view class="g_pb_17 g_flex_row_start">
						<rh-image :url="item.idCardImageUrl" v-if="item.idCardImageUrl" radius="4" size="112" @clickItem="handleClickIDcard" />
						<view v-if="item.imgs" class="g_flex_row_start">
							<view v-for="i in item.imgs" class="g_ml_10">
								<rh-image :url="i" radius="4" size="112" @clickItem="handleClickIDcard" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="g_flex_row_center flex_center g_flex_1 g_h_48 g_bg_f g_fs_16 g_c_main g_ml_10 g_mr_10 g_radius_8" @click="goFellow('')" v-if="persenInfo.length <= 5">
				<view class="g_flex_column_center">
					<i class="iconfont icon-jia1 g_c_min g_mr_6" style="font-size: 18px"></i>
				</view>
				<view class="">添加工友</view>
			</view>
			<view>
				<view class="card-tip g_pt_24 g_pb_8 g_pl_20 g_c_6">职位信息</view>
				<view class="fs_top text-wrap">
					<rh-form-slot :list="jobData" @clickResult="changePage" @changeTime="getInviteTime" @changeAddress="changeAddress" @chooseAddress="chooseAddress"> </rh-form-slot>
				</view>
			</view>
			<view>
				<view class="card-tip g_pt_24 g_pb_8 g_pl_20 g_c_6">报名备注</view>
				<view class="g_flex_row_center g_p_10 g_pt_16 g_ml_10 g_mr_10 g_bg_f g_radius_8" style="width: calc(100vw- 20px)">
					<textarea class="weui-input g_flex_1 g_fs_16" placeholder="请输入报名备注" v-model="updateInfo.desp" placeholder-style="color:#999" :maxlength="-1" auto-height style="min-height: 137px; width: 100%; z-index: 0"></textarea>
				</view>
			</view>
			<view class="g_mt_12">
				<view class="g_flex_row_center g_mb_12" style="color: rgba(0, 0, 0, 0.45)">
					<u-checkbox-group @change="radioGroupChange" shape="circle">
						<u-checkbox v-model="agreeRadio" name="agree" :active-color="activeColor">
							<view class="g_flex_row_center g_fs_12">
								<view>我已阅读并同意</view>
								<view @click.stop="goPage('/root/person/agreeUser')" style="color: #576b95">;">《用户协议》</view>
								<view>及</view>
								<view @click.stop="goPage('/root/person/agreePrive')" style="color: #576b95">;">《隐私政策》</view>
							</view>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="g_h_84" v-if="useform == 'root'"></view>
				<rh-fixed v-if="useform == 'root'">
					<slot>
						<view class="g_flex_row_between g_pl_16 g_pr_16" style="z-index: 99">
							<div class="" style="width:82px">
								<rh-button btnText="取消" size="small_auto" type="default" @clickBtn="goReturn" />
							</div>
							<div class="g_flex_1 g_flex_row_end">
								<rh-button btnText="立即报名" type="primary" :loading="btnLoading" @clickBtn="submitForm" />
							</div>
						</view>
					</slot>
				</rh-fixed>
				<view v-if="useform == 'pages'">
					<view class="g_flex_row_center g_pl_16 g_pr_16" style="z-index: 99">
						<rh-button btnText="立即报名" type="primary" :loading="btnLoading" @clickBtn="submitForm" />
					</view>
				</view>
				<view v-if="useform == 'pages'" style="height: 32px;"></view>
			</view>
		</view>
	</view>
</template>
<script>
import { nationlist } from "../../libs/utils/nation.js";
import dateUtil from "../../libs/utils/dateUtil.js";
import rhJS from '../../libs/utils/base.js';
export default {
	onReady() {
		rhJS.setNavStyle();
		let that = this;
	},
	onShareAppMessage() {
		return rhJS.shareFun();
	},
	props:{
		dataoptions:{
			default:()=>{
				return {}
			}
		},
		useform:{
			default:()=>{
				return 'root'
			}
		}
	},
	mounted() {
		let that = this;
		let options = this.dataoptions;
		let params = options.params ? JSON.parse(options.params) : {};
		if (params.jobId) {
			that.currentJobInfo = JSON.parse(JSON.stringify(params));
			this.updateInfo.jobId = params.jobId;
			this.updateInfo.jobName = params.jobName;
		}
		uni.setNavigationBarTitle({
			title: params.title ? params.title : "报名",
		});
		if (params.type == 1 || params.type == 2) that.jobType = params.type;
		if (params.agencyId) that.updateInfo.upAgencyId = params.agencyId;

		(params.isFans === 0 || params.isFans) && (that.isFans = params.isFans);
		params.agencyUserId && (that.updateInfo.agencyUserId = params.agencyUserId); // 分享人id
		params.shareUserAgencyId && (that.updateInfo.agencyId = params.shareUserAgencyId); // 分享人团队id
		this.updateInfo.interviewTimeStr = "";
		setTimeout(() => {
			that.IS_CREATOR = uni.getStorageSync("IS_CREATOR") == 1 ? true : false;
			that.updateInfo.interviewTimeStr = "";
			// 设置默认时间
			let hour = new Date().getHours();
			if (hour < 20 && hour >= 6) {
				this.updateInfo.interviewTimeStr = dateUtil.formatDateYMD(new Date().toLocaleDateString()) + " " + (hour + 1) + ":00";
			} else if (hour >= 20) {
				this.updateInfo.interviewTimeStr = dateUtil.formatDateYMD(new Date().toLocaleDateString()) + " 19:30";
			} else if (hour < 6) {
				this.updateInfo.interviewTimeStr = dateUtil.formatDateYMD(new Date().toLocaleDateString()) + " 6:00";
			}
			that.$forceUpdate();
			if (that.updateInfo.jobId) {
				that.setFormList();
				that.getJobDetail({
					leafCateId: that.updateInfo.jobId,
				});
			} else {
				that.setFormList();
			}
		}, 1);
		uni.$on("getTownsman", (data) => {
			// 前端本地处理根据身份证号获取年龄
			if (data.info.idCard && (data.info.idCard.length == 15 || data.info.idCard.length == 18)) {
				let infoByIDcard = rhJS.getInfoByIDcard(data.info.idCard);
				data.info.age = infoByIDcard.age;
			}
		
			if (that.persenInfo.length == 0) {
				that.persenInfo[0] = {
					...data.info,
					index: that.persenInfo.length,
				};
			} else if (data.info.index || data.info.index === 0) {
				that.persenInfo[data.info.index] = data.info;
			} else {
				that.persenInfo[that.persenInfo.length] = {
					...data.info,
					index: that.persenInfo.length,
				};
			}
			that.$forceUpdate();
		});
		uni.$on("changeJobInfo", function (data) {
			that.updateInfo.jobId = data.info.leafCateId;
			that.updateInfo.jobName = data.info.title;
			that.currentJobInfo = data.info;
		
			that.jobType = data.info.jobType;
			console.log("data.info", data.info);
			that.getJobDetail(data.info);
			that.$forceUpdate();
		});
		uni.$on("resetTownsman", function (data) {
			if (data.reset) {
				that.persenInfo = [];
			}
			that.$forceUpdate();
		});
	},
	data() {
		return {
			activeColor:getApp().globalData.themeColor,
			detailRes: {},
			IS_CREATOR: false,
			jobType: 2,
			isFans: 2,
			currentJobInfo: {},
			cdnBaseImg: 'https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/dailibaoming/',
			nation: nationlist.map((item, index) => {
				return item.name;
			}),
			nationIndex: 0,
			userTel: "",
			info: {
				name: "",
				sex: "男",
				age: "",
				nation: "",
				idCard: "",
				address: "",
			},
			updateInfo: {
				jobId: 0,
				jobName: "请选择报名职位",
				desp: "",
				interviewTimeStr: "",
			},
			persenInfo: [],
			agreeRadio: ["agree"],
			jobData: [],
			zhengceTextList: [],
			btnLoading: false,
		};
	},
	onShow() {
		let that = this;
		that.pageSpeed = -1;
	},
	methods: {
		getTownsManInfo(info) {
			console.log("info", info);
			uni.$emit("getTownsman", {
				info,
			});
		},
		getJobDetail($data) {
			let that = this;
			that.G.Get(
				"/yishoudan/custom/job/detail/" + $data.leafCateId,
				{
					id: $data.leafCateId,
				},
				(res) => {
					that.detailRes = res.record;
					let policyStr;
					if (that.isFans == 2) {
						policyStr = "1. 佣金：" + (res.record.returnFeeType !== "" ? rhJS.setReturnFee(res.record.returnFee, res.record.returnFeeType) : "费用待定") + " \n\n" + "2. 佣金详情：" + (res.record.returnFeeDesp || "费用待定") + " \n\n" + "3. 薪资待遇：" + (res.record.salaryDetail || "-") + "\n\n";
					} else {
						policyStr = "薪资待遇：" + (res.record.salaryDetail || "-") + "\n\n";
					}
					console.log("政策列表：", res);
					that.setFormList(policyStr);
				}
			);
		},
		setFormList(policyStr) {
			let that = this;
			if (that.isFans == 2) {
				that.jobData = [
					{
						icon: "",
						label: "报名职位",
						result: that.updateInfo.jobName,
						path: "/root/other/search?from=record",
						placeholder: "请选择报名职位",
						fontColor: that.updateInfo.jobName == "请选择报名职位" ? "g_c_9" : "g_c_3",
						tip: "applia-job",
						require: true,
						customRequire: true,
						pColumn: 12,
					},
					{
						icon: "",
						label: "面试时间",
						result: "",
						path: "",
						value: that.updateInfo.interviewTimeStr,
						tip: "slot-time",
						require: true,
						customRequire: true,
						type: "slot",
						pColumn: 12,
						from: "reservation-time",
					},
					that.updateInfo["interviewAddress"]
						? {
								icon: "",
								label: "面试地址",
								result: "",
								value: that.updateInfo["interviewAddress"],
								path: "",
								addressDetail: {
									latitude: that.updateInfo["interviewLat"],
									longitude: that.updateInfo["interviewLng"],
								},
								tip: "slot-choose&input-address",
								uneditable: that.currentJobInfo.agencyId == uni.getStorageSync("apply-userinfo").agencyId ? false : true,
								placeholder: "请选择面试地址",
								type: "slot",
								fontSize: "16px",
								pColumn: 5,
								pRow: 12,
								require: false,
								suffix: "icon-dizhi1",
						  }
						: null,

					that.updateInfo.jobId
						? {
								icon: "",
								label: "项目政策",
								result: "",
								path: "",
								value: policyStr || "-",
								tip: "slot-caiwu",
								require: false,
								customRequire: false,
								type: "slot",
								pColumn: 12,
								from: "slot-caiwu",
						  }
						: null,
				];
			} else {
				that.jobData = [
					{
						icon: "",
						label: "报名职位",
						result: that.updateInfo.jobName,
						path: "",
						placeholder: "请选择报名职位",
						fontColor: that.updateInfo.jobName == "请选择报名职位" ? "g_c_9" : "g_c_3",
						tip: "applia-job",
						require: true,
						customRequire: true,
						pColumn: 12,
					},
					{
						icon: "",
						label: "面试时间",
						result: "",
						path: "",
						value: that.updateInfo.interviewTimeStr,
						tip: "slot-time",
						require: true,
						customRequire: true,
						type: "slot",
						pColumn: 12,
						from: "reservation-time",
					},
					that.updateInfo.jobId
						? {
								icon: "",
								label: "项目政策",
								result: "",
								path: "",
								value: policyStr || "-",
								tip: "slot-caiwu",
								require: false,
								customRequire: false,
								type: "slot",
								pColumn: 12,
								from: "slot-caiwu",
						  }
						: null,
				];
			}
			that.$forceUpdate();
		},
		handleClickIDcard(e) {
			this.info.idCard = e;
		},
		clickDesp(e) {
			this.updateInfo.desp = e.value;
		},
		changePage(e) {
			uni.navigateTo({
				url: e.path,
			});
		},
		getInviteTime(e) {
			console.log("获取预约面试时间：", e);
			this.updateInfo.interviewTimeStr = e;
		},
		updateDom() {},
		chooseAddress(e) {
			let that = this;
			console.log(e);
			this.updateInfo.interviewLat = e.lat;
			this.updateInfo.interviewLng = e.lng;
			this.updateInfo.interviewAddress = e.address;
			this.jobData[1].value = this.updateInfo.interviewAddress;
			this.$forceUpdate();
		},
		changeAddress(e) {
			this.updateInfo.interviewAddress = e;
			this.$forceUpdate();
		},
		radioGroupChange(e) {},
		goReturn() {
			uni.navigateBack();
		},
		goPage($path) {
			uni.navigateTo({
				url: $path,
			});
		},
		goFellow($item, $index) {
			let that = this,
				params = {},
				info = null;
			if ($item) {
				info = $item;
				params = {
					name: info.userName || "",
					sex: info.sex,
					age: info.age || "",
					nation: info.nation || "",
					tel: info.tel ? info.tel : "" || "",
					idCard: info.idCard ? info.idCard : "" || "",
					idCardImageUrl: info.idCardImageUrl ? info.idCardImageUrl : "",
					address: info.address ? info.address : "",
					imgs: info.imgs || "",
					userName: info.userName || "",
					index: $index,
				};
			}
			if (info) {
				uni.navigateTo({
					url: "/root/home/editTownsman?" + rhJS.objToStr(params),
				});
			} else {
				uni.navigateTo({
					url: "/root/home/editTownsman",
				});
			}
		},
		handleClickMobile() {},
		submitForm() {
			let that = this;
			if (!that.agreeRadio) {
				uni.showToast({
					icon: "none",
					title: "请阅读协议",
				});
				return false;
			}
			if (!that.updateInfo.jobId) {
				uni.showToast({
					icon: "none",
					title: "请选择职位",
				});
				return false;
			}
			if (that.persenInfo.length == 0) {
				uni.showToast({
					icon: "none",
					title: "请输入工友信息",
				});
				return false;
			}
			if (that.btnLoading) {
				return false;
			}
			that.btnLoading = true;

			let submitInfo = {
				...that.updateInfo,
			};
			submitInfo.applyUserJson = JSON.stringify(
				that.persenInfo.map((item) => {
					return {
						idCard: item.idCard,
						idCardImageUrl: item.idCardImageUrl,
						userName: item.userName,
						sex: item.sex,
						age: item.age,
						nation: item.nation,
						tel: item.tel,
						address: item.address,
						userApplyOrderFiles:
							item.imgs && item.imgs.length > 0
								? item.imgs
										.map((itm) => {
											return itm;
										})
										.join(",")
								: "",
					};
				})
			);
			that.G.Post("/yishoudan/common/order/addBatch", submitInfo, (res) => {
				uni.showToast({
					icon: "success",
					title: "报名成功",
					duration: 2000,
				});
				that.btnLoading = false;
				that.$refs.AiApplyRef.ressetAitext();
				setTimeout(() => {
					uni.navigateTo({
						url: "/root/home/applicationSuccess?jobId=" + that.updateInfo.jobId,
					});
				}, 1500);
			});
		},
		submitFormSub($item) {
			let that = this;
			let submitInfo = {
				...that.updateInfo,
				...$item,
			};
			if (!submitInfo.userName) {
				uni.showToast({
					icon: "none",
					title: "请编辑用户信息",
				});
				return false;
			}
			uni.showLoading({
				title: "提交中",
			});
			if (submitInfo.imgs && submitInfo.imgs.length > 0) {
				submitInfo.imgs = submitInfo.imgs.join(",");
			}
			that.G.Post('/assistant/apply/handler/add', submitInfo, (res) => {
				uni.showToast({
					icon: "success",
					title: "报名成功",
					duration: 2000,
				});
				that.$refs.AiApplyRef.ressetAitext();
				setTimeout(() => {
					uni.navigateTo({
						url: "/root/home/applicationSuccess",
					});
				}, 1500);
			});
		},
	},
};
</script>

<style lang="scss">
.g-rh-apply {
	min-height: 100%;
	.fs_top {
		.m-set {
		}
	}
	.fs_bottom {
		.m-set {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			.item {
				position: relative;
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 10px;
					border-top: 1rpx solid #eee;
					height: 1rpx solid #eee;
					width: calc(100% - 20px);
				}
			}
		}
	}
	.text-wrap {
		white-space: pre-wrap;
	}
}
</style>
