<template>
	<view>
		<view class="companyBox">
			<view class="companyInfo">
				<view class="imgBoxsList"><image style="width:100%;height: 100%;" :src="$method.splitImgHost(companyArray.logoUrl)" mode=""></image></view>
				<view class="rigBix">
					<view class="headerTit">{{ companyArray.companyName }}</view>
					<view class="tabbaerLists">
						<view class="lits">{{ companyArray.companyType }}</view>
						<view class="lits">{{ companyArray.companySize }}</view>
						<view class="lits">{{ companyArray.industryTypeName }}</view>
					</view>
				</view>
			</view>
			<view class="bigboxFont" :class="showMsg ? 'showBoxs' : ''">{{ companyArray.companyIntroduce }}</view>
			<view class="text-c" v-if="showMsgIcon">
				<u-icon style="opacity: 0.4;" :name="showMsg ? 'arrow-up' : 'arrow-down'" color="#32467B" size="28" @click="showMsg = !showMsg"></u-icon>
			</view>
		</view>
		<view class="listLs">
			<view class="lisZY" v-for="(item, index) in companyArray.recruitNeedsVoList" :key="index" @click="jumpGY(item.id)" :class="id == item.id ? 'activesZY' : ''">
				{{ item.job }}
			</view>
		</view>
		<view class="GWwaload" v-if="JSON.stringify(GyArray) !== '{}'">
			<view class="headerTis">
				<view class="priceMS">
					{{ GyArray.incomeStart === GyArray.incomeEnd ? GyArray.incomeStart : GyArray.incomeStart + ' - ' + GyArray.incomeEnd }}/{{
						GyArray.incomeType === 1 ? '月' : '年'
					}}
				</view>
				<view class="uploadTimes">{{ $method.timestampToTime(GyArray.pushTime, true) }}发布</view>
			</view>
			<view class="headerTis">
				<view class="liti">{{ GyArray.jobNature }}</view>
				<view class="liti">{{ GyArray.peopleNum === 0 ? '招多人' : '招' + GyArray.peopleNum + '人' }}</view>
				<view class="liti">{{ GyArray.workingYearsDictLabel }}</view>
				<view class="liti">{{ GyArray.minimumEduDictLabel }}</view>
				<view class="liti">{{ GyArray.major }}</view>
			</view>
			<view class="headerJF" style="align-items: center;">
				<view class="leftItit">加分证书</view>
				<view class="lelis">
					<view class="listsITms" v-for="(item, index) in GyArray.bonusCertificate" :key="index">{{ item }}</view>
				</view>
			</view>
			<view class="headerJF">
				<view class="imgSbox"><image style="width: 100%;height: 100%;" src="../../static/fuli@2x.png" mode=""></image></view>
				<view class="lisBxz">
					<view class="liue" v-for="(item, index) in GyArray.welfare" :key="index">{{ item }}</view>
				</view>
			</view>
			<view class="headerJF" style="align-items: center;">
				<view class="imgSbox"><image style="width: 100%;height: 100%;" src="../../static/adress@2x.png" mode=""></image></view>
				<view class="szqq">{{ GyArray.province + GyArray.city + GyArray.district + GyArray.address }}</view>
			</view>
		</view>
		<view class="fotBoxs" v-if="JSON.stringify(GyArray) !== '{}'">
			<view class="lifot">
				<view class="headFot">
					工作职责：
					<view class="pobtom"></view>
				</view>
				<rich-text class="rich-texts" :nodes="GyArray.requirement"></rich-text>
			</view>
			<view class="lifot">
				<view class="headFot">
					任职要求：
					<view class="pobtom"></view>
				</view>
				<rich-text class="rich-texts" :nodes="GyArray.requirement"></rich-text>
			</view>
		</view>
		<view class="fotBtns" @click="openTDPopp">投递简历</view>
		<u-popup v-model="showTD" mode="bottom" border-radius="14">
			<view style="padding: 32rpx;" class="stqq">
				<scroll-view scroll-y="true" style="height: 800rpx;">
					<view v-for="(item, index) in resumeLists" :key="index" class="listSty">
						<view class="iconLeft"><image style="width: 100%;height: 100%;" src="@/static/preview@3x.png" mode="" @click="jumpSee(item)"></image></view>
						<view class="cenSty" @click="activeBtns(item, index)">
							<view class="zwSty">{{ item.resumeName }}</view>
							<view class="timeSty">{{ $method.timestampToTime(item.createTime, false) }}</view>
						</view>
						<view class="rightRadio" @click="activeBtns(item, index)"><view v-if="activeNum === item.resumeId" class="actives"></view></view>
					</view>
				</scroll-view>
			</view>
			<view class="fotBtnBox"><view class="fotBtn" @click="tdjl">投递</view></view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeNum: null,
			showTD: false,
			companyArray: {}, //公司信息内容
			GyArray: {}, //岗位信息内容
			id: null, //岗位ID
			companyId: null, //公司ID
			showMsgIcon: false,
			showMsg: false,
			resumeLists: []
		};
	},
	onLoad(options) {
		this.companyId = options.companyId;
		this.id = options.id;
	},
	onShow() {
		// this.getJLlist();
	},
	mounted() {
		this.init();
		this.jumpGY(this.id);
		this.getYSheight();
	},
	methods: {
		jumpSee(options) {
			this.$navTo.togo('/pages2/resume/addResume', {
				id: options.resumeId
			});
			this.showTD = false;
		},
		getJLlist() {
			var self = this;
			return new Promise((resolve, reject) => {
				self.$api.recruitresumelist().then(res => {
					if (res.data.code === 200) {
						self.resumeLists = res.data.rows;
						resolve();
					}
				});
			});
		},
		activeBtns(options, index) {
			this.activeNum = options.resumeId;
		},
		async openTDPopp() {
			if (this.id === null || this.id == undefined) {
				uni.showToast({
					title: '请选择投递岗位',
					icon: 'none'
				});
				return;
			}
			const snts = await this.getJLlist();
			this.activeNum = null;
			this.showTD = true;
		},
		getYSheight() {
			var self = this;
			uni.getSystemInfo({
				success: function(res) {
					let info = uni.createSelectorQuery().select('.bigboxFont');
					info.boundingClientRect(function(data) {
						if (data.height >= 147) {
							self.showMsgIcon = true;
						} else {
							self.showMsgIcon = false;
						}
					}).exec();
				}
			});
		},
		init() {
			this.$api.recruitcompanyCon(this.companyId).then(res => {
				this.companyArray = res.data.data;
			});
		},
		jumpGY(v) {
			this.id = v;
			if (this.id == undefined || this.id === null) {
				return;
			}
			uni.showLoading({
				title:'加载中'
			})
			this.$api.recruitneedsId(v).then(res => {
				res.data.data.bonusCertificate = res.data.data.bonusCertificate.split(',');
				res.data.data.welfare = res.data.data.welfare.split(',');
				this.GyArray = res.data.data;
				uni.hideLoading()
			});
		},
		tdjl() {
			var self = this;
			if (this.activeNum === null) {
				uni.showToast({
					title: '请选择简历',
					duration: 1500
				});
				return;
			}
			var data = {
				needsId: Number(this.id),
				resumeId: this.activeNum
			};
			this.$api.systemInterview(data).then(res => {
				if (res.data.code === 200) {
					setTimeout(()=>{
						uni.showToast({
							title: '已投递',
							icon: 'success'
						});
					},500);
					self.showTD = false;
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style scope>
.listSty {
	margin-bottom: 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.rich-texts {
	font-size: 24rpx;
	color: #636a75;
	font-weight: bold;
}
.companyBox {
	margin: 16rpx 35rpx;
	padding: 18rpx 20rpx;
	border-radius: 32rpx;
	background-color: #fff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
}
.companyInfo {
	display: flex;
}
.imgBoxsList {
	flex-shrink: 0;
	margin-right: 24rpx;
	width: 101rpx;
	height: 101rpx;
	overflow: hidden;
	border-radius: 24rpx;
	background-color: #fff;
	border: 1rpx solid #eee;
	box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(47, 67, 121, 0.05);
}
.rigBix {
	flex: 1;
}
.headerTit {
	font-size: 30rpx;
	font-weight: bold;
	color: #2a4174;
	margin-bottom: 26rpx;
}
.tabbaerLists {
	display: flex;
	align-items: center;
	overflow: auto;
	max-width: 500rpx;
}
.lits {
	margin-right: 8rpx;
	flex-shrink: 0;
	height: 32rpx;
	line-height: 32rpx;
	padding: 0 22rpx;
	border-radius: 16rpx;
	background-color: #f2f6ff;
	color: #636a75;
	font-weight: 500;
	font-size: 20rpx;
}
.bigboxFont {
	margin-top: 34rpx;
	font-size: 20rpx;
	color: #636a75;
	line-height: 30rpx;
	max-height: 260rpx;
	overflow: hidden;
}
.text-c {
	text-align: center;
}
.showBoxs {
	max-height: 100%;
}
.listLs {
	display: flex;
	align-items: center;
	overflow: auto;
	margin: 24rpx 0rpx;
}
.listLs::-webkit-scrollbar {
	display: none;
}
.lisZY {
	flex-shrink: 0;
	height: 48rpx;
	line-height: 48rpx;
	padding: 0rpx 16rpx;
	background: rgba(50, 70, 123, 0.06);
	box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(47, 67, 121, 0.05);
	border-radius: 16rpx;
	margin-right: 24rpx;
	color: #636a75;
	font-size: 26rpx;
	font-weight: bold;
}
.activesZY {
	background-color: #32467b;
	color: #fff;
}
.lisZY:first-child {
	margin-left: 35rpx;
}
.GWwaload {
	margin: 0 35rpx 23rpx;
	padding: 29rpx 34rpx 32rpx;
	border-radius: 32rpx;
	background-color: #fff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
}
.headerTis {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22rpx;
}
.headerJF {
	display: flex;
	margin-bottom: 23rpx;
}
.priceMS {
	font-size: 30rpx;
	font-weight: 800;
	color: #32467b;
}
.uploadTimes {
	color: #999;
	font-weight: 500;
	font-size: 20rpx;
}
.liti {
	font-size: 26rpx;
	color: #636a75;
	font-weight: bold;
}
.leftItit {
	font-size: 26rpx;
	margin-right: 21rpx;
	color: #636a75;
	font-weight: bold;
	flex-shrink: 0;
}
.lelis {
	display: flex;
	align-items: center;
	width: 500rpx;
	overflow: auto;
}
.lelis::-webkit-scrollbar {
	display: none;
}
.listsITms {
	border-radius: 16rpx;
	background-color: #3fefb7;
	height: 32rpx;
	line-height: 32rpx;
	padding: 0rpx 20rpx;
	flex-shrink: 0;
	color: #fff;
	margin-right: 13rpx;
	font-size: 20rpx;
	font-weight: 500;
}
.imgSbox {
	width: 26rpx;
	height: 26rpx;
	margin-right: 12rpx;
	flex-shrink: 0;
}
.lisBxz {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	flex-shrink: 0;
	width: 580rpx;
}
.liue {
	height: 32rpx;
	line-height: 32rpx;
	padding: 0rpx 21rpx;
	background-color: #f2f6ff;
	border-radius: 16rpx;
	color: #636a75;
	font-size: 20rpx;
	margin-right: 8rpx;
	margin-bottom: 8rpx;
}
.szqq {
	color: #636a75;
	font-size: 26rpx;
	font-weight: bold;
}
.fotBoxs {
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
	border-radius: 32rpx;
	margin: 0rpx 35rpx 105rpx;
	padding: 17rpx 6rpx 17rpx 20rpx;
}
.lifot {
	margin-bottom: 37rpx;
}
.headFot {
	font-size: 26rpx;
	color: #636a75;
	font-weight: bold;
	position: relative;
	margin-bottom: 20rpx;
}
.pobtom {
	position: absolute;
	width: 103rpx;
	height: 16rpx;
	bottom: 0rpx;
	background: rgba(0, 111, 255, 0.4);
}
.fotBtns {
	width: 200rpx;
	height: 64rpx;
	text-align: center;
	line-height: 64rpx;
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
	border-radius: 32rpx;
	background: #32467b;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.15);
	position: fixed;
	bottom: 20rpx;
	left: 50%;
	transform: translateX(-50%);
}
.fotBtnBox {
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fotBtn {
	width: 200rpx;
	height: 65rpx;
	line-height: 65rpx;
	text-align: center;
	color: #fff;
	font-weight: bold;
	background-color: #32467b;
	border-radius: 32rpx;
	border: 1rpx solid #000;
	font-size: 24rpx;
}
.iconLeft {
	width: 32rpx;
	height: 32rpx;
}
.cenSty {
	display: flex;
	height: 80rpx;
	align-items: center;
	justify-content: space-between;
	width: 566rpx;
	border-radius: 32rpx;
	background-color: #e8f4ff;
	padding: 0rpx 24rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
}
.zwSty {
	font-weight: bold;
	font-size: 30rpx;
	color: #2a4174;
}
.timeSty {
	font-size: 24rpx;
	color: #999;
	font-weight: 500;
}
.rightRadio {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42rpx;
	height: 42rpx;
	border-radius: 50%;
	border: 1rpx solid #7f8caf;
}
.actives {
	width: 24rpx;
	height: 24rpx;
	border-radius: 50%;
	background-color: #7f8caf;
	animation: acs 0.4s;
}
@keyframes acs {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
</style>
