<template>
	<view >
		<far-bottom></far-bottom>
		<loadlogo v-if="!loadlogo" />
		<view class="recruitmentDetails" v-else>
			<view class="media_wrapper" v-if="recruitmentDetails.video_link || recruitmentDetails.img.length>0">
				<video id="myvideo" class="videoPlay" :src="recruitmentDetails.video_link" v-if="showVideo&&recruitmentDetails.video_link" :poster="recruitmentDetails.video_img_link"></video>
				<!-- <view class="videoPlay" style="position: absolute;left: 0;top: 35px;" -->
				 <!-- @click.stop="playing(recruitmentDetails.video_link)"></view> -->
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				 v-if="!showVideo&&recruitmentDetails.img.length>0" indicator-active-color="#ffffff">
					<swiper-item v-for="(item, index) in recruitmentDetails.img" :key="index">
						<view class="swiper-item">
							<image :src="item" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="type_indicator" v-if="recruitmentDetails.video_link || recruitmentDetails.img.length>0">
					<view class="indicator-item" :class="showVideo?'active':''" v-if="recruitmentDetails.video_link" @click="changeMedia(true)">视频</view>
					<view class="indicator-item" :class="!showVideo?'active':''" v-if="recruitmentDetails.img.length>0" @click="changeMedia(false)">图集</view>
				</view>
			</view>
			<!-- <view class="dis-flex" style="margin-bottom: 20upx;">
				<view class="page_tab" :class="detail_page==1?'active':''" @click="changePage(1)">岗位信息</view>
				<view class="page_tab" :class="detail_page==2?'active':''" @click="changePage(2)" v-if="recruitmentDetails.recruit_long_img.length>0">企业长图</view>
			</view> -->
			<view class="detail_page" v-if="detail_page==1">
				<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="psition-tag">
						<view class="dis-il-block tag-item">{{ recruitmentDetails.release.nature }}</view>
						<view class="dis-il-block tag-item">{{ recruitmentDetails.release.scale }}</view>
						<view class="dis-il-block tag-item">{{ recruitmentDetails.release.industry }}</view>
					</view> -->
					<view class="qualification" v-if="0">
						<view class="qualification-entry">
							{{recruitmentDetails.release.nature}} · {{recruitmentDetails.release.scale}} · {{recruitmentDetails.release.industry}}
						</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: '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 class="psition-title" v-if="recruitmentDetails.recruit_long_img.length>0">
						<view class="title dis-il-block" style="display: inline-block;">企业简介</view>
					</view>
					<view class="psition-tag" v-if="recruitmentDetails.recruit_long_img.length>0">
						<image class="longpic" :src="item" mode="widthFix" v-for="(item, index) in recruitmentDetails.recruit_long_img" :key="index"></image>
					</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="recommendList.length > 0">职位推荐</view>
				<view class="recommend-position" v-if="recommendList.length > 0">
					<!-- <workList :inviteList="recruitmentDetails.recommend"></workList> -->
					<view v-for="(item,index) in recommendList" :key="index" class="recommend-item" @click="toNewDetail(item)">
						<image :src="item.release.logo" mode=""></image>
						<view style="font-size: 14px;" class="leave_out">{{item.title}}</view>
						<view style="color: #f00;font-size: 13px;">{{item.salary}}</view>
					</view>
				</view>
				
			</view>
			<view class="detail_page" v-if="detail_page==2">
				
			</view>
			<view class="btn-box dis-flex">
				<view class="left-btn-group">
					<button class="collectBtn" open-type="contact" hover-class="none"
					 style="background: none;">
						<view style="font-size: 21px;margin-bottom: 3px;" class="iconfont icon-service"></view>
						联系客服
					</button>
					<view class="collectBtn" @click="collect(pageId)">
						<view style="font-size: 21px;margin-bottom: 3px;" v-if="!recruitmentDetails.is_collect" class="iconfont icon-favor"></view>
						<view style="font-size: 21px;margin-bottom: 3px;color: #f00;" v-else class="iconfont icon-favorfill"></view>
						收藏
					</view>
				</view>
				<view class="right-btn-group">
					<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>
		<!-- 全屏视频 -->
		<!-- <PopManager :show="videoshow" @clickmask="videoshow = false" type="center">
			<view v-if="videoshow" class="videoshow">
				<video id="myvideo" :src="videolint" @fullscreenchange="videoControl"  style="width: 100%;height: 100%;"
				  @click.stop="" :show-fullscreen-btn="false" autoplay ></video>
				<view  style="position: absolute;left: 30upx;top: 80upx;color: #ffffff;padding: 10upx 20upx;border-radius: 60upx;background-color: rgba(255,255,255,0.3);" @click.stop="videoshow = false">
				 	<text class="iconfont icon-roundleftfill" style="font-size: 36upx;"></text>
					<text class="f-36">返回</text>
				</view>
			</view>
		</PopManager> -->
	</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'
import PopManager from '@/components/template/PopManager';
export default {
	data() {
		return {
			lookindex: 6,
			pageId: '',
			recruitmentDetails: {},
			loadlogo: false,
			dataHeight:0,
			showVideo: true,
			album: [1, 2],
			detail_page: 1,
			videoshow: '',
			videolint: '',
			recommendList: [],
			scrollTimer: null,
			scrollLock: null,
			videoContext: '',
			query: ''
		};
	},
	components:{
		PopManager
	},
	onLoad(e) {
		this.pageId = e.id;
		this.getRecruitmentDetails();
		this.getPositionRecommendList();
		// 页面初次渲染！  createVideoContext uni video自带 上下文 如果不懂可以去百度
		this.videoContext = uni.createVideoContext('myvideo');
		// this.videoContext.requestFullScreen();
	},
	components: {
		workList,
		Loadlogo,
		jyfParser
	},
	methods: {
		changeMedia(type){
			if(this.showVideo==type) return;
			this.showVideo = type;
		},
		changePage(page){
			if(this.detail_page==page) return;
			this.detail_page = page;
		},
		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;
					if(!this.recruitmentDetails.video_link){
						this.showVideo = false;
					}
					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;
				}
			);
		},
		getPositionRecommendList(){
			let _this = this;
			App._post_form(
				`&p=recruit&do=getPositionRecommendList`,
				{ recruit_id: this.pageId },
				res => {
					this.recommendList = res.data;
				},
				false,
				() => {
					this.loadlogo = true;
				}
			);
		},
		lookalls() {
			if (this.lookindex == 6) {
				this.lookindex = 9999;
			} else {
				this.lookindex = 6;
			}
		},
		videoControl(e){
			console.log(e)
			if(e.detail.fullScreen){  //e.detail.fullScreen是否为全屏
				this.videoContext.play();
			}else{
				//停止播放
				// this.videoContext.stop();   各位老板不要选择stop 选择了stop 缩小视频还会自动播放
				this.videoContext.pause();
			}
		},
		playing(lint) {
			this.videoshow = true;
			this.videolint = lint;
			// 获取当前视频id
			// let currentId = e.currentTarget.dataset.id
			// uni.createVideoContext获取视频上下文对象
			this.videoContext.requestFullScreen({
				direction:0
			})
		 },
		 collect(recruit_id){
			 let type = !this.recruitmentDetails.is_collect ? 'collect' : 'cancel';
			 let id = !this.recruitmentDetails.is_collect ? '' : this.recruitmentDetails.collect_id.id;
			 App._post_form(
			 	`&p=recruit&do=recruitCollect`,
			 	{
					type: type,
					recruit_id: recruit_id,
					id: id
				},
			 	res => {
					if(res.errno==0){
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						this.recruitmentDetails.is_collect = !this.recruitmentDetails.is_collect;
						this.getRecruitmentDetails();
					}
			 	},
			 	false,
			 	() => {
			 		
			 	}
			 );
		 },
		 toNewDetail(item){
			 App.navigationTo({
			 	url: "pages/subPages2/hirePlatform/recruitmentDetails/recruitmentDetails?id=" + item.id
			 });
		 },
		 handlerScroll(){
		 	this.scrollLock = false;
		 	this.query.select('.media_wrapper').boundingClientRect(data=>{
		 		if(data){
		 			console.log(data.top,'视频在屏幕的高度');
		 			if(data.top==0 || data.top<0){
		 				console.log('视频暂停');
		 				this.videoContext.stop();
		 			}
		 		}
		 	}).exec();
		 },
	},
	onReady() {
		this.videoContext = wx.createVideoContext('myvideo', this);
		this.query = uni.createSelectorQuery().in(this);
	},
	onPageScroll(){
		//页面滚动，视频暂停
		this.scrollLock = true;
		// this.handlerScroll();
		clearTimeout(this.scrollTimer);
		this.scrollTimer = setTimeout(()=>{
			this.handlerScroll();
		}, 300)
	},
};
</script>

<style lang="scss" scoped>
	.dis-flex{
		display: flex;
	}
.recruitmentDetails {
	// padding: 50upx 0upx 190upx;
	padding: 0upx 0upx 190upx;
	.media_wrapper{
		width: 100vw;
		height: 422rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #00000d;
		.videoPlay{
			width: 100vw;
			height: 422rpx;
		}
		swiper, image{
			width: 100vw;
			height: 422rpx;
		}
	}
	.type_indicator{
		width: 90px;
		height: 26px;
		line-height: 26px;
		position: absolute;
		top: 6px;
		left: 10px;
		display: flex;
		justify-content: space-around;
		color: #ffffff;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 15px;
		font-size: 12px;
		.indicator-item{
			padding: 0 10px;
			line-height: 26px;
		}
		.indicator-item.active{
			color: #333;
			background-color: #fff;
			border-radius: 15px;
		}
	}
	.page_tab{
		padding: 10upx 30upx;
		line-height: 30px;
		color: #666;
		font-size: 15px;
		&.active{
			color: #f00;
			position: relative;
		}
		&.active::after{
			content: '';
			position: absolute;
			width: 16px;
			height: 4px;
			background-color: #f00;
			border-radius: 3px;
			bottom: 0px;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.Details-title {
		padding: 20upx 30upx;
		.Details {
			font-size: 40upx;
			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: PingFang SC;
			font-weight: 600;
			color: #ff4444;
			text-align: right;
			float: right;
		}
	}
	.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: 30upx;
				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;
			line-height: 28px;
		}
		.locBnt {
			flex: 0.2;
			font-size: 28upx;
			color: #3388ff;
			border-radius: 60upx;
			border: 1upx solid #3388ff;
			padding: 10upx 20upx;
			align-self: center;
			line-height: 20px;
		}
	}
	.position-title {
		font-size: 32upx;
		padding: 30upx 30upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		// border-bottom: 1upx solid #EEEEEE;
	}
	.recommend-position {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.recommend-item{
			width: 29vw;
			margin: 0 0 10upx;
			
			image{
				width: 29vw;
				height: 29vw;
			}
		}
	}
	.btn-box {
		justify-content: space-around;
		align-items: center;
		padding: 20upx 10upx 40upx;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		width: 100vw;
		box-sizing: border-box;
		border-top: 1upx solid #eeeeee;
		.left-btn-group{
			display: flex;
		}
		.right-btn-group{
			width: 460upx;
			height: 80upx;
			border-radius: 40upx;
			overflow: hidden;
			display: flex;
		}
		.collectBtn{
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #a3a3a3;
			padding: 0upx 24upx;
			line-height: 40upx;
			text-align: center;
		}
		.playcall {
			width: 50%;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: center;
			line-height: 80upx;
			color: #fff;
			background-color: #ff8d30;
		}
		.candidate {
			width: 50%;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: center;
			line-height: 80upx;
			color: #ffffff;
			background-color: #f00;
		}
	}
	.detail_page{
		width: 100vw;
		.longpic{
			width: 90vw;
			// margin: 0upx 5vw;
			margin: 0upx auto;
			display: block;//解决图片之间的缝隙
		}
	}

}
.videoshow{
	width: 100vw;
	height: 100vh;
	position: relative;
}
.leave_out{
		// 省略号样式
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;//设置显示多少行
		overflow: hidden;
	}
</style>
