<template>
	<view class="g-components-panel-record">
		<view class="ui-list ui-list-text g_mb_10 bgf" style="border-top: 0" v-if="!isResume">
			<block v-for="(group, key) in item" :key="key" class="item-box">
				<view v-if="group" class="item-group" style="padding-top: 0; padding-bottom: 0; padding-right: 32rpx; position: relative; margin-left: 20px">
					<view class="titleMain">
						<view v-if="dateUtil.spliceStr(key) == '1'" class="des" style="position: relative"> <i class="iconfont icon-shenhezhong"></i>报名审核中 </view>
						<view v-if="dateUtil.spliceStr(key) == '2'" class="des" style="position: relative"> <i class="iconfont icon-baomingchenggong"></i>报名成功 </view>
						<view v-if="dateUtil.spliceStr(key) == '3'" class="des" style="position: relative"> <i class="iconfont icon-dairuzhi"></i>待入职 </view>
						<view v-if="dateUtil.spliceStr(key) == '4'" class="des" style="position: relative"> <i class="iconfont icon-ruzhichenggong"></i>在职中 </view>
						<view v-if="dateUtil.spliceStr(key) == '5'" class="des" style="position: relative"> <i class="iconfont icon-yilizhi"></i>已离职 </view>
						<view v-if="dateUtil.spliceStr(key) == '6'" class="des" style="position: relative"> <i class="iconfont icon-baomingchenggong"></i>已完成 </view>
						<view v-if="dateUtil.spliceStr(key) == '9'" class="des" style="position: relative"> <i class="iconfont icon-yuyuelizhi"></i>约离职 </view>
						<view v-if="dateUtil.spliceStr(key) == '11'" class="des" style="position: relative"> <i class="iconfont icon-wei"></i>报名失败 </view>
						<view v-if="dateUtil.spliceStr(key) == '12'" class="des" style="position: relative"> <i class="iconfont icon-yijiedao"></i>已接到 </view>
						<view v-if="dateUtil.spliceStr(key) == '13'" class="des" style="position: relative"> <i class="iconfont icon-wei"></i>未接到 </view>
						<view v-if="dateUtil.spliceStr(key) == '14'" class="des" style="position: relative"> <i class="iconfont icon-wei"></i>面试未通过 </view>
						<view v-if="dateUtil.spliceStr(key) == '15'" class="des" style="position: relative"> <i class="iconfont icon-wei"></i>未入职 </view>
					</view>
					<view style="position: relative" v-for="(itm, inx) in group" class="ui-step-one" :key="inx">
						<view class="cb-cricle"></view>
						<view
							class="ui-list-info"
							:style="{
								'padding-bottom': itm.desp == '' ? '18px' : '24px',
							}"
						>
							<view class="g_fs_12 g_c_3 g_flex_row_start" style="white-space: pre-line">
								<view style="line-height: 20px; color: #666">
									{{ itm.desp }}
								</view>
								<block v-if="itm.policy ">
									<text class="g_ml_8 g_c_main" style="line-height: 20px;" @click="goInfo(itm)">详情</text>
								</block>
							</view>
							<view class="g_fs_12 g_c_9" :class="itm.desp == '' ? '' : 'g_mt_4'">
								<text class>{{ itm.create_time }}</text>
                <!-- {{ itm.creator }}， -->
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="resumeBox g_pt_12 g_pr_12" v-else>
			<block v-for="(itm, inx) in item" :key="inx">
				<view style="position: relative" class="ui-step-one g_pl_24">
					<view class="cb-cricle g_ml_24"></view>
					<view
						class="ui-list-info"
						:style="{
							'padding-bottom': itm.desp == '' ? '18px' : '24px',
						}"
					>
						<view class="g_fs_12 g_c_3 g_flex_row_start" style="white-space: pre-line">
							<view style="line-height: 20px; color: #666">
								{{ itm.desp }}
							</view>
							<!-- <block v-if="itm.policy">
								<text class="g_ml_8 g_c_main g_flex_column_center" @click="goInfo(itm)">详情</text>
							</block> -->
						</view>
						<view class="g_fs_12 g_c_9" :class="itm.desp == '' ? '' : 'g_mt_4'">
							<text class>{{ itm.create_time }}</text>
              <!-- {{ itm.creator }}， -->
						</view>
					</view>
				</view>
			</block>
		</view>
		
		
		<u-popup v-model="infoModal.isShow" mode="center" border-radius="16" width="630" :mask-close-able="true">
			<view class="g_flex_column_center">
				<view class="g_flex_row_center g_pt_12 g_pb_12 g_fs_18 g_fw_600 g_mb_20 g_border_e_b">报名信息</view>
				<scroll-view scroll-y class="g_pb_32 g_flex_row_center g_flex_1" style="max-height: 600px; box-sizing: border-box">
					<view class="g_pb_48 g_pr_16 g_pl_16">
						<view class="item g_flex_row_start g_mb_8">
							<view class="label g_fs_16 g_c_3 g_flex_none g_flex_row_end" style="width: 98px">姓名：</view>
							<view class="label g_fs_16 g_fw_600 g_c_3 g_flex_1 g_ell_1"> {{ orderDetail.userName }}{{ orderDetail.setTitle }} </view>
						</view>
						<view class="item g_flex_row_start g_mb_8">
							<view class="label g_fs_16 g_c_3 g_flex_none g_flex_row_end" style="width: 98px">电话：</view>
							<view class="label g_fs_16 g_c_3 g_flex_1 g_ell_1">
								{{ orderDetail.tel ? orderDetail.tel : "-" }}
							</view>
						</view>
						<view class="item g_flex_row_start g_mb_8">
							<view class="label g_fs_16 g_c_3 g_flex_none g_flex_row_end" style="width: 98px">身份证号：</view>
							<view class="label g_fs_16 g_c_3 g_flex_1 g_ell_1">
								{{ orderDetail.idCard ? orderDetail.idCard : "-" }}
							</view>
						</view>
						<view class="item g_flex_row_start g_mb_8">
							<view class="label g_fs_16 g_c_3 g_flex_none g_flex_row_end" style="width: 98px">家庭住址：</view>
							<view class="label g_fs_16 g_c_3 g_flex_1">
								{{ orderDetail.address ? orderDetail.address : "-" }}
							</view>
						</view>

            <view style="border-top: 1px dashed #eeeeee;margin-top: 10px;margin-bottom: 10px;"></view>

						<view class="item g_flex_row_start g_mb_8">
							<view class="label g_fs_16 g_c_3 g_flex_none g_flex_row_end" style="width: 98px">报名职位：</view>
							<view class="label g_fs_16 g_c_3 g_fw_600 g_flex_1 g_ell_1">
								{{ orderDetail.storeJobName ? orderDetail.storeJobName : "-" }}
							</view>
						</view>
						<view class="item g_flex_row_start g_mb_8">
							<view class="label g_fs_16 g_c_3 g_flex_none g_flex_row_end" style="width: 98px">员工薪资：</view>
							<view class="label g_fs_16 g_c_3 g_flex_1 g_white_p">
								{{ orderDetail.employeeSalary ? orderDetail.employeeSalary : "-" }}
							</view>
						</view>
						<view class="item g_flex_row_start g_mb_8" v-if="isCreator">
							<view class="label g_fs_16 g_c_3 g_flex_none g_flex_row_end" style="width: 98px">代理政策：</view>
							<view class="label g_fs_16 g_c_3 g_flex_1 g_white_p">
								{{ orderDetail.policy ? orderDetail.policy : "-" }}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="g_flex_row_between g_border_e_t g_bg_f" style="position: absolute; bottom: 0; width: 100%">
					<view class="g_c_3 g_fs_18 g_pt_18 g_pb_18 g_flex_c g_fw_700" style="width: 50%; height: 49px" @click="handleCopy">复制文本</view>
					<view class="g_c_main g_fs_18 g_pt_18 g_pb_18 g_flex_c" style="width: 50%; height: 49px; border-left: 1rpx solid #eee" @click="infoModal.isShow = false">知道了</view>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
import timeUtil from "../../utils/dateUtil.js";

export default {
	data() {
		return {
			dateUtil: timeUtil,
			isCreator: false,
			infoModal: {
				isShow: false,
			},
			orderDetail: {},
		};
	},
	props: {
		item: {
			default() {
				return {};
			},
		},
		isResume: {
			default() {
				return false;
			},
		},
	},
	created() {
		console.log("created", this.item);
		// console.log('uni.getStorageSync("IS_CREATOR")', uni.getStorageSync("IS_CREATOR"));
		this.isCreator = uni.getStorageSync("IS_CREATOR") == 1 ? true : false;
	},
	onShow() {
		console.log("onShow", this.item);
	},
	watch: {
		item(val) {
			console.log("watch", this.item);
		},
	},
	methods: {
		goInfo(e) {
			var that = this;
			console.log("跟进记录组件内点击", e);
			// console.log(JSON.parse(e.policy));
			// let that = this,
			// 	params = {};
			// params = {
			// 	info: e.info ? JSON.parse(e.policy) : "-",
			// 	time: e.time,
			// 	title: e.title,
			// 	type: e.type,
			// };
			that.orderDetail = JSON.parse(e.policy);
			that.orderDetail.setTitle = that.G.titleToStr(that.orderDetail);
			that.infoModal.isShow = true;
			// this.$emit("clickInfo", {
			// 	info: e.policy,
			// 	time: e.create_time,
			// 	type: "view",
			// 	title: "查看服务费",
			// });
		},
		handleCopy() {
			let that = this;
			var text = "姓名：" + that.orderDetail.userName + "/" + (that.orderDetail.sex == 1 ? "男" : "女") + "/" + that.orderDetail.age + "岁" + (that.orderDetail.nation == "族" ? "" : "/" + that.orderDetail.nation) + "\n电话：" + (that.orderDetail.tel == "" || that.orderDetail.tel == undefined || that.orderDetail.tel == null ? "-" : that.orderDetail.tel) + "\n身份证号：" + (that.orderDetail.idCard == "" ? "-" : that.orderDetail.idCard) + "\n家庭地址：" + (that.orderDetail.address == "" || that.orderDetail.address == undefined || that.orderDetail.address == null ? "-" : that.orderDetail.address) + "\n报名岗位：" + that.orderDetail.storeJobName + "\n员工薪资：" + (that.orderDetail.employeeSalary || "-") + (that.isCreator ? "\n代理政策：" + that.orderDetail.policy : "");
			uni.setClipboardData({
				data: text,
				success(res) {
					uni.getClipboardData({
						success(res) {
							console.log(res.data); // data
							uni.showToast({
								title: "复制成功",
								icon: "success",
							});
							setTimeout(()=>{
								that.infoModal.isShow = false;
							},500)
						},
					});
				},
			});
		},
	},
};
</script>

<style lang="scss">
.g-components-panel-record {
	.ui-list-info {
		padding-left: 30rpx;
		border-left: 2px solid #ccc;
		padding-bottom: 15px;
		margin-top: -12px;
	}
	.cb-cricle {
		position: absolute;
		left: -4.5px;
		top: 6px;
		background: #ccc;
		width: 10px;
		height: 10px;
		border-radius: 100%;
	}
	.iconfont {
		position: absolute;
		top: 0px;
		left: -10px;
		display: inline-block;
		width: 20px;
		height: 20px;
		font-size: 14px;
		font-weight: normal;
		text-align: center;
		line-height: 20px;
		border-radius: 50%;
		background: #cccccc;
		color: #ffffff;
	}
	.des {
		padding-bottom: 20px;
		padding-left: 26rpx;
		border-left: 2px solid #cccccc;
		left: 0px;
		line-height: 22px;
		height: 50px;
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}
	.item-group {
		&:last-child {
			.ui-step-one {
				&:last-child {
					.ui-list-info {
						border-left: 2px solid transparent;
					}
				}
			}
		}
	}
	.resumeBox {
		.ui-step-one {
			.ui-list-info {
				transform: translateY(-6px);
				border: none;
				&::before {
					content: "";
					position: absolute;
					left: 0px;
					top: 6px;
					width: 2px;
					height: 95%;
					background: #ccc;
				}
			}
			&:last-child {
				.ui-list-info::before {
					display: none;
				}
			}
		}

		.cb-cricle {
			top: 0px;
		}
	}
}

.g-components-panel-record .item-group:first-child .iconfont{
  color: #ffffff;
  background: #1890ff;
}
.g-components-panel-record .item-group:first-child .des{
  color: #1890ff;
}


</style>
