/**
* 推荐岗位组件
*/
<template>
	<div class="recommend">
		<div class="content-r-title">
			为你推荐
		</div>
		<div v-if="rightJobList.length>0" @click="goDetails(item)" class="content-r-item"
			v-for="(item,index) in rightJobList" :key="index">
			<div class="content-r-item-name">
				{{ item.ruleClassifyName }} 【{{item.city}} {{item.county}}】
			</div>
			<div class="content-r-item-money flex align-center">
				{{item.salaryRange}}
				<!-- <div class="content-r-item-money-label">
					{{item.postType}}
				</div> -->
				<div class="content-r-item-money-label">
					{{item.education}}
				</div>
				<div class="content-r-item-money-label">
					{{item.experience}}
				</div>
			</div>
			<div class="content-r-item-address">
				{{ item.company?.companyName || item.company?.companyAllName }}
			</div>
			<div class="content-r-item-line">
				<el-divider />
			</div>
		</div>
		<el-empty v-else description="暂无推荐" />

		<!-- 暂无简历提示框 -->
		<el-dialog v-model="shoModal" style="border-radius: 12px;" width="50%" align-center>
			<div class="showModal-img flex align-center justify-center">
				<img src="/images/index/noJl.png" alt="" srcset="">
			</div>
			<div class="showModal-title">
				尚未填写求职简历
			</div>
			<div class="showModal-content flex align-center justify-center">
				<div class="showModal-content-c">
					您还未展示您的求职简历，展示简历以后可以让更多的企业快速又准确的找到你，
					了解你，并且也会更高效的推荐您想了解的岗位和企业。
				</div>
			</div>
			<div class="showModal-btn flex align-center justify-center">
				<div @click="addResume()" class="showModal-btn-c flex align-center justify-center">
					立即填写
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: {
			city: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isResume: false,
				shoModal: false,
				rightJobList: [], //右侧推荐岗位列表
			}
		},
		watch: {
			city() {
				this.getRightJobList()
			},
		},
		created() {
			//获取右侧推荐岗位列表
			this.getRightJobList()
			this.getJlInfo()
		},
		methods: {
			//获取简历
			getJlInfo() {
				this.$Request.get("/app/userFirst/getUserResumes").then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.isResume = true
							//缓存简历id
							localStorage.setItem('resumeId', res.data.resumeList.resumesId)
						} else {
							this.isResume = false
						}

					} else {
						this.isResume = false
					}
				})
			},
			//去添加简历
			addResume() {
				this.shoModal = false
				this.$router.push({
					name: 'addResume'
				})
			},
			goDetails(item) {
				if (this.isResume) { //有简历
					this.$emit('goDetails', item)
				} else { //无简历
					this.shoModal = true
				}

			},
			//获取右侧推荐岗位列表
			getRightJobList() {
				let data = {
					page: 1,
					limit: 5,
					postType: '', //求职类型
					ruleClassifyName: '', //岗位名称
					screen: 1, //1推荐 2最新
					city: this.city ? this.city : localStorage.getItem('city'), //城市
					salaryRange: '', //薪资范围
					education: '', //学历
					experience: '', //经验
					industry: '', //行业
					companyPeople: '', //公司规模
					userId: localStorage.getItem('userId')
				}
				this.$Request.get('/app/postPush/userGetPostPushList', {
					params: data
				}).then(res => {
					this.loading = false
					if (res.code == 0) {
						this.pages = res.data.pages
						res.data.records.map(item => {
							if (item.positionWelfare) {
								item.positionWelfare = item.positionWelfare.split(',')
							} else {
								item.positionWelfare = []
							}
							if (item.industry) {
								item.industry = item.industry.split(',')
							} else {
								item.industry = []
							}
						})
						this.rightJobList = res.data.records
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-r-title {
		width: calc(100% - 40px);
		color: #333333;
		font-size: 18px;
		font-weight: bold;
		padding: 20px;

	}

	.content-r-item {
		width: calc(100% - 40px);
		padding: 0 20px;
		cursor: pointer;

		.content-r-item-name {
			color: #333333;
			font-size: 16px;
			font-weight: 500;

		}

		.content-r-item-money {
			color: #fe574a;
			font-size: 16px;
			font-weight: 500;
			margin-top: 10px;

			.content-r-item-money-label {
				padding: 4px 10px;
				border-radius: 4px;
				background-color: #f8f8f8;
				color: #666666;
				font-size: 13px;
				margin-left: 10px;
			}
		}

		.content-r-item-address {
			color: #999999;
			font-size: 13px;
			margin-top: 10px;
		}
	}

	.showModal-img {
		width: 100%;
		height: 300px;

		img {
			width: 400px;
			height: 300px;

		}
	}

	.showModal-title {
		width: 100%;
		text-align: center;
		color: #333333;
		font-size: 20px;
		font-weight: 500;
		margin-top: 5px;
	}

	.showModal-content {
		width: 100%;
		height: auto;
		margin-top: 10px;

		.showModal-content-c {
			width: 80%;
			height: 100%;
			color: #999999;
			font-size: 16px;
		}
	}

	.showModal-btn {
		width: 100%;
		height: 44px;
		margin: 30px 0;

		.showModal-btn-c {
			width: 200px;
			height: 100%;
			background-color: #00DD9A;
			border-radius: 10px;
			color: #ffffff;
			cursor: pointer;
		}
	}
</style>