<template>
	<view class="p-root-home-quick g_w_all g_bg_f_5 g_kuaishou">
		<AiApply class="" @outputInfo="getTownsManInfo" />

		<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">
						<g-panel-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">
								<g-panel-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_ml_10 g_mr_10 g_radius_8" :style="{color: themeColor}" @click="goFellow('')" v-if="persenInfo.length <= 5">
				<!-- <view class="g_w_18 g_h_18 g_mr_6 g_text_c g_radius_20 g_border_main g_fsi_18" style="line-height: 13px">+</view> -->
				<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">
					<g-panel-form-slot :list="jobData" @clickResult="changePage" @changeTime="getInviteTime" @changeAddress="changeAddress" @chooseAddress="chooseAddress"> </g-panel-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="#00b666">
							<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"></view>
				<g-panel-fixed>
					<slot>
						<view class="g_flex_row_between g_pl_16 g_pr_16" style="z-index: 99">
							<view class="g_fs_16 g_c_6 g_flex_c g_pl_8 g_pr_8 g_radius_6 g_ml_16" hover-class="thover" @click="goReturn">取消</view>
							<rh-button  btnText="立即报名" type="primary" :loading="btnLoading" @clickBtn="submitForm" />
						</view>
					</slot>
				</g-panel-fixed>
			</view>
		</view>
	</view>
</template>
<script>
import { nationlist } from "../utils/nation.js";
import dateUtil from "../utils/dateUtil.js";
import AiApply from "./components/AiApply.vue";
export default {
	components: {
		AiApply,
	},
	onReady() {
		this.G.setNavStyle();
		let that = this;
		uni.$on("getTownsman", function (data) {
			console.log("getTownsman", data);
			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,
				};
			}
			console.log("that.persenInfo", that.persenInfo);
			that.$forceUpdate();
		});
		uni.$on("changeJobInfo", function (data) {
			that.updateInfo.jobId = data.info.leafCateId;
			that.updateInfo.jobName = data.info.jobName;
			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();
		});
	},
	onShareAppMessage() {
		return this.G.shareFun();
	},
	onLoad(options) {
		let that = this;
		console.log("options", options);
		console.log("options.jobId", options.jobId);
		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;
		}
		if (options.resumeInfo) {
			let resumeInfo = JSON.parse(options.resumeInfo);
			console.log("resumeInforesumeInforesumeInfo", resumeInfo);
			resumeInfo.jobName && (this.updateInfo.jobName = resumeInfo.jobName);
			resumeInfo.jobId && (this.updateInfo.jobId = resumeInfo.jobId);
			setTimeout(() => {
				let info = {
					sex: resumeInfo.sex || "",
					age: resumeInfo.age || "",
					userName: resumeInfo.userName,
					tel: resumeInfo.tel,
					address: resumeInfo.address,
					idCard: resumeInfo.idCard,
				};
				uni.$emit("getTownsman", { info });
			}, 1000);
			this.updateInfo.userApplyClueId = resumeInfo.id;
		}
		uni.setNavigationBarTitle({
			title: params.title ? params.title : "报名",
		});

		this.updateInfo.interviewTimeStr = "";
		setTimeout(() => {
			that.IS_CREATOR = uni.getStorageSync("IS_CREATOR") == 1 ? true : false;
			that.updateInfo.interviewTimeStr = "";
			console.log("获取面试时间：", 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.updateInfo.interviewTimeStr = dateUtil.formatDateYMD(new Date().toLocaleDateString()) + " 06:00";
			console.log("获取面试时间：", that.updateInfo.interviewTimeStr);

			that.$forceUpdate();
			if (that.updateInfo.jobId) {
				that.setFormList();
				that.getJobDetail({
					leafCateId: that.updateInfo.jobId,
				});
			} else {
				that.setFormList();
			}
		}, 1);
	},
	data() {
		return {
			themeColor: getApp().globalData.themeColor,
			detailRes: {},
			IS_CREATOR: false,
			jobType: 2,
			currentJobInfo: {},
			cdnBaseImg: this.G.store().cdnBaseImg,
			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(
				that.api.job_personDetail + "/" + $data.leafCateId,
				{
					id: $data.leafCateId,
				},
				(res) => {
					that.detailRes = res.record;
					let policyStr;
					policyStr = "薪资待遇：" + (res.record.salaryDetail || "-") + "\n\n";
					console.log("政策列表：", res);
					that.setFormList(policyStr);
				}
			);
		},
		setFormList(policyStr) {
			let that = this;
			console.log("that.updateInfo", that.updateInfo);
			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.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;
			// billForm.value.storeAddr = e.address;
			console.log("this.updateInfo", this.updateInfo);
			console.log("e", e);
			this.$forceUpdate();
		},
		changeAddress(e) {
			this.updateInfo.interviewAddress = e;
			console.log("this.updateInfo", this.updateInfo);
			console.log("e", e);
			// this.info.address = e;
			this.$forceUpdate();
		},
		radioGroupChange(e) {},
		goReturn() {
			uni.navigateBack();
		},
		goPage($path) {
			uni.navigateTo({
				url: $path,
			});
		},
		goFellow($item, $index) {
			let that = this,
				params = {},
				info = null;
			// 如果第一个工友信息没有编辑, 则进行提示
			// if (!that.persenInfo[0].userName && $item === "") {
			// 	uni.showToast({
			// 		title: "请先编辑第一个工友信息",
			// 		icon: "none",
			// 	});
			// 	return;
			// }
			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,
				};
			}
			console.log("params", params);
			if (info) {
				uni.navigateTo({
					url: "/root/home/editTownsman?" + that.G.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,
			};
			console.log("submitInfosubmitInfosubmitInfo", submitInfo);
			submitInfo.applyUserJson = JSON.stringify(
				that.persenInfo.map((item) => {
					return {
						// interviewTime: dayjs(item.interviewTime).format("YYYY-MM-DD HH:mm"),
						// receptionTime: item.receptionTime ? dayjs(item.receptionTime).format("YYYY-MM-DD HH:mm") : dayjs(item.interviewTime).format("YYYY-MM-DD HH:mm"),
						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(",")
								: "",
						// desp: item.desp,
						// policyIdx: item.policyIdx,
						// pickerStr: item.pickerStr,
					};
				})
			);
			// let _upAgencyName = '';
			// if (that.detailRes.status == 0) {
			// 	_upAgencyName = that.detailRes.fullName;
			// } else if (that.detailRes.status == 1) {
			// 	if (that.detailRes.providerNameAll) {
			// 		_upAgencyName = `${that.detailRes.providerName}（${that.detailRes.providerNameAll}）`;
			// 	} else {
			// 		_upAgencyName = that.detailRes.providerName;
			// 	}
			// } else {
			// 	_upAgencyName = that.detailRes.userName;
			// }
			// submitInfo.upAgencyName = _upAgencyName ? _upAgencyName : '';
			console.log("submitInfo", submitInfo);
			that.G.Post("/yishoudan/common/order/addBatch", submitInfo, (res) => {
				// uni.hideLoading();
				uni.showToast({
					icon: "success",
					title: "报名成功",
					duration: 2000,
				});
				// that.persenInfo = [];

				// that.$forceUpdate();
				setTimeout(() => {
					that.btnLoading = false;
					uni.navigateTo({
						url: "/root/home/applicationSuccess",
					});
				}, 1500);
			});
		},
		submitFormSub($item) {
			let that = this;
			// uni.navigateTo({
			// 	url: "/root/home/applicationSuccess",
			// });
			// return;
			let submitInfo = {
				...that.updateInfo,
				...$item,
			};
			if (!submitInfo.userName) {
				uni.showToast({
					icon: "none",
					title: "请编辑用户信息",
				});
				return false;
			}
			uni.showLoading({
				title: "提交中",
			});
			// submitInfo.sex = submitInfo.sex == "男" ? 1 : 2;
			if (submitInfo.imgs && submitInfo.imgs.length > 0) {
				submitInfo.imgs = submitInfo.imgs.join(",");
			}
			that.G.Post(that.api.job_recordJob, submitInfo, (res) => {
				// uni.hideLoading();
				uni.showToast({
					icon: "success",
					title: "报名成功",
					duration: 2000,
				});
				// that.persenInfo = [];

				// that.$forceUpdate();
				setTimeout(() => {
					uni.navigateTo({
						url: "/root/home/applicationSuccess",
					});
				}, 1500);
			});
			// setTimeout(() => {
			// 	uni.navigateTo({
			// 		url: "/root/home/applicationSuccess",
			// 	});
			// }, 500);
		},
	},
};
</script>

<style lang="scss">
.p-root-home-quick {
	min-height: 100%;

	.fs_top {
		.m-set {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}
	}

	.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>
