/**
* 推荐岗位组件
*/
<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 flex align-center">
				<img style="width: 50px;height: 50px;border-radius: 50%;margin-right: 10px;"
					:src="item.userAvatar ? item.userAvatar :'/default.jpg'" alt="" srcset="" />
				{{ item.userName }} 【{{item.city}}】
			</div>
			<div class="content-r-item-money flex align-center">
				<div class="content-r-item-money-label">
					{{ item.userAge }}岁
				</div>
				<div class="content-r-item-money-label">
					{{ item.resumesWorkExperience || 0 }}年
				</div>
				<div class="content-r-item-money-label">
					{{ item.resumesSex == 1 ? '男' : '女' }}
				</div>
				<div class="content-r-item-money-label">
					{{ item.degree }}
				</div>
			</div>
			<div class="content-r-item-line">
				<el-divider />
			</div>
		</div>
		<el-empty v-else description="暂无推荐" />
	</div>
</template>

<script>
	export default {
		props: {
			city: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				rightJobList: [], //右侧推荐岗位列表
			}
		},
		watch: {
			city() {
				console.log(this.city)
				this.getRightJobList()
			},
		},
		created() {
			//获取右侧推荐岗位列表
			this.getRightJobList()
		},
		methods: {
			goDetails(item) {
				this.$emit('goDetails', item)
			},
			//获取右侧推荐岗位列表
			getRightJobList() {
				let data = {
					page: 1,
					limit: 5,
					postType: '', //求职类型
					expectedPosition: '', //岗位名称
					screen: 1, //1推荐 2最新
					city: this.city ? this.city : localStorage.getItem('city'), //城市
					salaryRange: '', //薪资范围
					eduRange: '', //学历
					expRange: '', //经验
					companyId: localStorage.getItem('companyId'),
					userId: localStorage.getItem('userId') ? localStorage.getItem('userId') : ''
				}
				this.$Request.post('/app/resumes/selectResumesList', data,{type: 'json'}).then(res => {
					this.loading = false
					if (res.code == 0) {
						this.pages = res.data.pages
						this.rightJobList = res.data?.records || []
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-r-title {
		width: calc(100% - 40px);
		color: #333333;
		font-size: 16px;
		font-weight: 500;
		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>