<template>
	<view >
		<far-bottom></far-bottom>
		<loadlogo v-if="!loadlogo" />
		<view class="recruitmentDetails" v-else>
			<view class="Details-title">
				<view class="dis-il-block Details">{{ recruitmentDetails.title }}</view>
				<view class="sticky" v-if="recruitmentDetails.is_top == 1">顶</view>
				<view class="dis-il-block salary">{{ recruitmentDetails.salary }}</view>
			</view>
			<view class="Details-tags">
				<view class="tags-item">
					<image :src="imgfixUrls + 'gongzuo.png'" mode=""></image>
					<view class="dis-il-block text">{{ recruitmentDetails.experience }}</view>
				</view>
				<view class="tags-item">
					<image :src="imgfixUrls + 'xueli.png'" mode=""></image>
					<view class="dis-il-block text">{{ recruitmentDetails.education }}</view>
				</view>
				<view class="tags-item">
					<image :src="imgfixUrls + 'cksl.png'" mode=""></image>
					<view class="dis-il-block text">{{ recruitmentDetails.pv }}</view>
				</view>
				<view class="tags-item">
					<image :src="imgfixUrls + 'shengri.png'" mode=""></image>
					<view class="dis-il-block text">{{ recruitmentDetails.age }}</view>
				</view>
				<view class="tags-item">
					<image :src="imgfixUrls + 'xingbie.png'" mode=""></image>
					<view class="dis-il-block text">{{ recruitmentDetails.gender_text }}</view>
				</view>
				<view class="tags-item">
					<image :src="imgfixUrls + 'dingwei.png'" mode=""></image>
					<view class="dis-il-block text">{{ recruitmentDetails.region }}</view>
				</view>
				<view class="tags-item" v-if="recruitmentDetails.people_number && recruitmentDetails.people_number != '0'">
					<view class="dis-il-block iconfont icon-friend_light" style="line-height: 30upx;">
						
					</view>
					<view class="dis-il-block text">{{ recruitmentDetails.people_number }}人</view>
				</view>
			</view>
			<view class="psition-details">
				<view class="psition-title">
					<view class="title dis-il-block" style="display: inline-block;">职位详情</view>
					<view class="date dis-il-block" style="display: inline-block;">发布于{{ recruitmentDetails.release_time }}</view>
				</view>
				<view class="psition-tag">
					<view class="dis-il-block tag-item" v-for="(item, index) in recruitmentDetails.welfare_list" :key="index">{{ item }}</view>
				</view>
				<view class="qualification" v-if="recruitmentDetails.job_description">
					<view class="qualification-title">任职资格:</view>
					<view class="qualification-entry">
						<view class="entry-item" :style="{height: lookindex == 6?'30rpx':'auto'}">
							<!-- <jyf-parser
								domain="https://6874-html-foe72-1259071903.tcb.qcloud.la"
								gesture-zoom
								lazy-load
								ref="article"
								selectable
								show-with-animation
								use-anchor
								:html="recruitmentDetails.job_description"
							></jyf-parser> -->
							<text class="entry-text">{{recruitmentDetails.job_description}}</text>
						</view>
					</view>
					<view class="lookall" @click="lookalls" v-if="recruitmentDetails.job_description && dataHeight > 50">
						<!-- <text style="color: #666666;">...</text> -->
						<text>{{ lookindex == 6 ? '查看全部' : '收起' }}</text>
					</view>
				</view>
			</view>
			<view class="information">
				<view class="dis-flex" @click="nvgeing">
					<view class="information-img"><image :src="recruitmentDetails.release.logo" mode=""></image></view>
					<view class="information-content">
						<view class="content-name">
							<view class="dis-il-block" style="display: inline-block;font-size: 32upx;">{{ recruitmentDetails.release.name }}</view>
							<view class="dis-il-block authentication" v-if="recruitmentDetails.release.is_authentication == 1">已认证</view>
						</view>
						<view class="content-tag" v-if="recruitmentDetails.release.nature || recruitmentDetails.release.scale || recruitmentDetails.release.industry">
							{{ recruitmentDetails.release.nature }} · {{ recruitmentDetails.release.scale }} · {{ recruitmentDetails.release.industry }}
						</view>
					</view>
					<view class="iconfont icon-right t-r f-24" style="flex: 0.05;line-height: 100upx;" v-if="recruitmentDetails.recruitment_type != '1'"></view>
				</view>
			</view>
			<view class="orientation">
				<view class="f-32 f-w t-l">所在地址</view>
				<view class="dis-flex p-top-bom-30">
					<view class="orientation-loc">{{ recruitmentDetails.work_address }}</view>
					<view class="locBnt t-c" @click="openNavigation">
						<text class="iconfont icon-daohang1"></text>
						<text style="padding-left: 10upx;">导航</text>
					</view>
				</view>
			</view>
			<view class="orientation">
				<view class="f-32 f-w t-l">
					免责声明
					<!-- <text class="iconfont icon-tishi" style="color: #FF4444;padding-left: 20upx;"></text> -->
				</view>
				<view class="dis-flex p-top-bom-30">
					<view class="f-28 col-3" style="max-height: 300upx;overflow: auto;"><text>{{ recruitmentDetails.desc_disclaimers }}</text></view>
				</view>
			</view>
			<view class="position-title" v-if="recruitmentDetails.recommend.length > 0">为您推荐</view>
			<view class="recommend-position" v-if="recruitmentDetails.recommend.length > 0"><workList :inviteList="recruitmentDetails.recommend"></workList></view>
			<view class="btn-box dis-flex">
				<view class="playcall" @click="playcall">电话沟通</view>
				<view class="candidate" v-if="recruitmentDetails.is_delivery == 0" @click="applicant">我要应聘</view>
				<view class="candidate" v-else style="background-color: #999999;border: 1upx solid #999999;">我要应聘</view>
			</view>
		</view>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import workList from '@/components/template/workList.vue';
import Loadlogo from '@/components/template/loadlogo.vue';
// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif
import jyfParser from '@/components/jyf-parser/jyf-parser.vue';
import Map from '@/common/js/ms-openMap/openMap.js'
export default {
	data() {
		return {
			lookindex: 6,
			pageId: '',
			recruitmentDetails: {},
			loadlogo: false,
			dataHeight:0
		};
	},
	onLoad(e) {
		this.pageId = e.id;
		this.getRecruitmentDetails();
	},
	components: {
		workList,
		Loadlogo,
		jyfParser
	},
	methods: {
		openNavigation() {
			let detailsData = this.recruitmentDetails;
			detailsData.location = {
				lat: detailsData.work_lat,
				lng: detailsData.work_lng
			};
			detailsData.lat = detailsData.work_lat;
			detailsData.lng = detailsData.work_lng;
			detailsData.address = detailsData.work_address;
			detailsData.storename = detailsData.title;
			// #ifdef H5
			console.log(detailsData);
			wxApi.WxopenLocation(detailsData['lat'], detailsData['lng'], detailsData['storename'], detailsData['address']);
			// #endif
			// #ifdef MP-WEIXIN
			App.openLocation(detailsData);
			// #endif
			//#ifdef APP-PLUS
			Map.openMap(Number(detailsData['lat']),Number(detailsData['lng']),detailsData['storename'],'gcj02')
			 //#endif
		},
		playcall() {
			uni.makePhoneCall({
				phoneNumber: this.recruitmentDetails.contact_phone //仅为示例
			});
		},
		applicant() {
			App.showError(
				`是否向该职位投递简历?`,
				data => {
					if (data.confirm) {
						App._post_form(
							`&p=recruit&do=submitResume`,
							{ id: this.pageId },
							res => {
								uni.showToast({
									title: res.message
								});
								this.getRecruitmentDetails();
							},
							fail => {
								// debugger
								if (fail.data.message == '请先完善简历信息！') {
									App.navigationTo({
										url: 'pages/subPages2/hirePlatform/addResume/addResume'
									});
								}
							}
						);
					}
				},
				true
			);
		},
		nvgeing() {
			if (this.recruitmentDetails.recruitment_type == 1) return;
			App.navigationTo({
				url: 'pages/subPages2/hirePlatform/companyDetails/companyDetails?id=' + this.recruitmentDetails.release_sid
			});
		},
		getRecruitmentDetails() {
			let _this = this;
			App._post_form(
				`&p=recruit&do=recruitDesc`,
				{ id: this.pageId },
				res => {
					this.recruitmentDetails = res.data;
					this.$nextTick(function(){
						setTimeout(()=>{
							uni.createSelectorQuery().in(_this).select('.entry-text').boundingClientRect(data => {
								_this.dataHeight = data.height;
								console.log(data,_this.dataHeight,2333333)
							}).exec();
						})
					})
				},
				false,
				() => {
					this.loadlogo = true;
				}
			);
		},
		lookalls() {
			if (this.lookindex == 6) {
				this.lookindex = 9999;
			} else {
				this.lookindex = 6;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.dis-flex{
		display: flex;
	}
.recruitmentDetails {
	padding: 50upx 0upx 150upx;
	.Details-title {
		padding: 0 30upx;
		.Details {
			font-size: 48upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.sticky {
			font-size: 22upx;
			background: #f1c426;
			border-radius: 4upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			padding: 3upx 5upx;
			display: inline-block;
			margin-left: 20upx;
		}
		.salary {
			font-size: 36upx;
			font-family: DINPro;
			font-weight: 500;
			color: #ff4444;
			text-align: right;
			float: right;
			line-height: 60upx;
		}
	}
	.Details-tags {
		padding: 0 30upx;
		display: flex;
		flex-wrap: wrap;
		width: 80%;
		padding-top: 30upx;
		justify-content: space-between;
		padding-bottom: 10upx;
		.tags-item {
			flex: 0 0 30%;
			// height:210upx;
			display: flex;
			padding-bottom: 20upx;

			image {
				height: 30upx;
				width: 30upx;
			}
			.text {
				width: 130upx;
				overflow: hidden;/*超出部分隐藏*/
				white-space: nowrap;/*不换行*/
				text-overflow:ellipsis;/*超出部分文字以...显示*/
				padding-left: 20upx;
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				vertical-align: top;
				
			}
		}
	}
	.Details-tags:after {
		content: ' ';
		flex: 0 0 30%;
	}
	.psition-details {
		padding: 0 30upx;
		.psition-title {
			padding-top: 40upx;
			border-top: 1upx solid #eeeeee;

			.title {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.date {
				float: right;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 52upx;
			}
		}
		.psition-tag {
			padding: 40upx 0 0;
			.tag-item {
				background: #f4f4f4;
				border-radius: 4upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				padding: 10upx 20upx;
				margin: 0 10upx 10upx 0;
			}
		}
		.qualification {
			.qualification-title {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 96upx;
			}
			.qualification-entry {
				.entry-item {
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 48upx;
					padding: 20upx 0;
					overflow: hidden;
				}
			}
			.lookall {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #3388ff;
				line-height: 48upx;
			}
		}
	}
	.information {
		border-top: 20upx solid #f8f8f8;
		border-bottom: 20upx solid #f8f8f8;
		padding: 30upx;
		.information-img {
			flex: 0.2;
			image {
				width: 100upx;
				height: 100upx;
				border-radius: 10upx;
			}
		}
		.information-content {
			flex: 0.75;
			.content-name {
				font-size: 22upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				.authentication {
					// font-size: 22upx;
					// font-weight: 500;
					// color: #FFFFFF;
					background: #3388ff;
					border-radius: 4upx;
					color: #ffffff;
					padding: 3upx 7upx;
					margin-left: 20upx;
				}
			}
			.content-tag {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				padding-top: 25upx;
			}
		}
	}
	.orientation {
		border-bottom: 20upx solid #f8f8f8;
		padding: 30upx;
		.orientation-loc {
			flex: 0.8;
			font-size: 26upx;
			color: #666666;
			padding-top: 10upx;
		}
		.locBnt {
			flex: 0.2;
			font-size: 28upx;
			color: #3388ff;
			border-radius: 60upx;
			border: 1upx solid #3388ff;
			padding: 10upx 30upx;
		}
	}
	.position-title {
		font-size: 32upx;
		padding: 30upx 30upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		// border-bottom: 1upx solid #EEEEEE;
	}
	.recommend-position {
	}
	.btn-box {
		padding: 25upx 30upx;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		width: 92vw;
		border-top: 1upx solid #eeeeee;
		.playcall {
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3388ff;
			padding: 30upx 65upx;
			margin-right: 20upx;
			border: 1upx solid #3388ff;
			border-radius: 4upx;
			line-height: 32upx;
		}
		.candidate {
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			padding: 30upx 140upx;
			border: 1upx solid #3388ff;
			border-radius: 4upx;
			line-height: 32upx;
			background-color: #3388ff;
		}
	}
}
</style>
