/**
* 投递、收藏、浏览记录
*/
<template>
	<div class="record" style="padding-bottom: 40px;">
		<!-- tabs -->
		<div class="tabs flex align-center justify-center">
			<div class="tabs-box flex align-center">
				<div @click="selectTabs(index)" :class="tabIndex == index?'tabActive':''"
					class="tabs-item flex align-center justify-center" v-for="(item,index) in tabsList" :key="index">
					{{item.name}}
				</div>
			</div>
		</div>
		<!-- 筛选组件 -->
		<filterComp @filterInfo="filterInfo" />
		<!-- 岗位列表主体 -->
		<div class="content flex align-center justify-center">
			<div class="content-box flex justify-between">
				<div v-loading="loading" class="content-l">
					<!-- 浏览过的 -->
					<div v-if="jobDataList.length>0 && tabIndex==0" style="width: 100%;">
						<div class="content-l-item" @click="goDetails(item)" v-for="(item,index) in jobDataList"
							:key="index">
							<div class="content-l-item-top flex align-center justify-between">
								<div class="content-l-item-top-l flex align-center">
									{{item.stationName}}
									<el-divider direction="vertical" />
									<span style="color: red;">
										{{item.salaryRange}}
									</span>

									<el-divider direction="vertical" />
									{{item.education}}
									<el-divider direction="vertical" />
									{{item.experience}}
								</div>
							</div>
							<div class="content-l-item-center flex align-center flex-wrap">
								<div class="content-l-item-center-item">
									{{item.city}}
								</div>
								<div class="content-l-item-center-item">
									{{item.postType}}
								</div>
								<div class="content-l-item-center-item">
									{{item.ruleClassifyName}}
								</div>
								<div class="content-l-item-center-item" v-for="(ite,ind) in item.industry">
									{{ite}}
								</div>
								<div class="content-l-item-center-item" v-for="(ite,ind) in item.positionWelfare">
									{{ite}}
								</div>
							</div>
							<div class="content-l-item-di flex align-center">
								<img :src="item.companyLogo" alt="" />
								<span>
									{{item.companyName}}
								</span>
								<span>
									{{item.companyScope}}
								</span>
								<span>
									{{item.companyPeople}}
								</span>
							</div>
						</div>
						<!-- 分页 -->
						<div class="content-l-item-pag flex align-center justify-center">
							<el-pagination @current-change="currentChange" v-model="page" :page-count="pages"
								:default-page-size="limit" background layout="prev, pager, next" />
						</div>
					</div>
					<!-- 已投递的 -->
					<div v-if="jobDataList.length>0 && tabIndex==1" style="width: 100%;">
						<div class="content-l-item" @click="goDetails(item)" v-for="(item,index) in jobDataList"
							:key="index">
							<div class="content-l-item-top flex align-center justify-between">
								<div class="content-l-item-top-l flex align-center">
									{{item.stationName}}
									<el-divider direction="vertical" />
									<span style="color: red;">
										{{item.salaryRange}}
									</span>

									<el-divider direction="vertical" />
									{{item.education}}
									<el-divider direction="vertical" />
									{{item.experience}}
								</div>
							</div>
							<div class="content-l-item-center flex align-center flex-wrap">
								<div class="content-l-item-center-item">
									{{item.city}}
								</div>
								<div class="content-l-item-center-item">
									{{item.postType}}
								</div>
								<div class="content-l-item-center-item">
									{{item.ruleClassifyName}}
								</div>
								<div class="content-l-item-center-item" v-for="(ite,ind) in item.industry">
									{{ite}}
								</div>
								<div class="content-l-item-center-item" v-for="(ite,ind) in item.positionWelfare">
									{{ite}}
								</div>
							</div>
							<div class="content-l-item-di flex align-center">
								<img :src="item.companyLogo" alt="" />
								<span>
									{{item.companyName}}
								</span>
								<span>
									{{item.companyScope}}
								</span>
								<span>
									{{item.companyPeople}}
								</span>
							</div>
						</div>
						<!-- 分页 -->
						<div class="content-l-item-pag flex align-center justify-center">
							<el-pagination @current-change="currentChange" v-model="page" :page-count="pages"
								:default-page-size="limit" background layout="prev, pager, next" />
						</div>
					</div>
					<!-- 已收藏的 -->
					<div v-if="jobDataList.length>0 && tabIndex==2" style="width: 100%;">
						<div class="content-l-item" @click="goDetails(item)" v-for="(item,index) in jobDataList"
							:key="index">
							<div class="content-l-item-top flex align-center justify-between">
								<div class="content-l-item-top-l flex align-center">
									{{item.stationName}}
									<el-divider direction="vertical" />
									<span style="color: red;">
										{{item.salaryRange}}
									</span>

									<el-divider direction="vertical" />
									{{item.education}}
									<el-divider direction="vertical" />
									{{item.experience}}
								</div>
							</div>
							<div class="content-l-item-center flex align-center flex-wrap">
								<div class="content-l-item-center-item">
									{{item.city}}
								</div>
								<div class="content-l-item-center-item">
									{{item.postType}}
								</div>
								<div class="content-l-item-center-item">
									{{item.ruleClassifyName}}
								</div>
								<div class="content-l-item-center-item" v-for="(ite,ind) in item.industry">
									{{ite}}
								</div>
								<div class="content-l-item-center-item" v-for="(ite,ind) in item.positionWelfare">
									{{ite}}
								</div>
							</div>
							<div class="content-l-item-di flex align-center">
								<img :src="item.companyLogo" alt="" />
								<span>
									{{item.companyName}}
								</span>
								<span>
									{{item.companyScope}}
								</span>
								<span>
									{{item.companyPeople}}
								</span>
							</div>
						</div>
						<!-- 分页 -->
						<div class="content-l-item-pag flex align-center justify-center">
							<el-pagination @current-change="currentChange" v-model="page" :page-count="pages"
								:default-page-size="limit" background layout="prev, pager, next" />
						</div>
					</div>
					<div style="width: 100%;" v-if="jobDataList.length==0">
						<el-empty description="暂无匹配岗位" />
					</div>
				</div>

				<div class="content-r">
					<recommend @goDetails="goDetails" />
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import recommend from '../../components/recommend/recommend.vue'
	import filterComp from '../../components/filterComp/filterComp.vue'
	export default {
		components: {
			recommend,
			filterComp
		},
		data() {
			return {
				jobDataList: [], //岗位列表
				page: 1, //分页
				limit: 10, //每页条数
				pages: 1, //总页数
				tabsList: [{
					name: '浏览过',
					status: 0
				}, {
					name: '已投递',
					status: 1
				}, {
					name: '已收藏',
					status: 2
				}],
				tabIndex: 0,
				loading: false,
				filter: {
					education: '', //学历
					salaryRange: '', //薪资
					experience: '', //经验
					companyPeople: '', //公司规模
					industry: '', //行业
				}
			}
		},
		watch: {
			'$route': 'getTypeList'
		},
		mounted() {
			this.tabIndex = Number(this.$route.query.type)
			this.getLIst()
		},
		methods: {
			//让页面滚动到最顶部
			toTop() {
				document.body.scrollTop = 0;
			},
			//分页
			currentChange(e) {
				this.page = e
				this.getLIst()
				this.toTop()
				console.log(e, '111111')
			},
			filterInfo(data) {
				console.log(data, '222222222')
				this.filter = data
				this.page = 1
				this.getLIst()
			},
			//重新获取数据
			getTypeList() {
				this.tabIndex = Number(this.$route.query.type)
				this.getLIst()
			},
			//获取已投递简历的列表
			getDataList() {
				let data = {
					page: this.page,
					limit: this.limit,
					userId: localStorage.getItem('userId'),
					education: this.filter.education, //学历
					salaryRange: this.filter.salaryRange, //薪资
					experience: this.filter.experience, //经验
					companyPeople: this.filter.companyPeople, //公司规模
					industry: this.filter.industry, //行业
				}
				this.$Request.get('app/sendRecord/getMyRecordListV2', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						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.pages = res.data.pages
						this.jobDataList = res.data.records
						this.loading = false
					}
				})
			},
			/**
			 * 我的收藏记录列表
			 */
			getMyCollectionList() {
				let data = {
					page: this.page,
					limit: this.limit,
					education: this.filter.education, //学历
					salaryRange: this.filter.salaryRange, //薪资
					experience: this.filter.experience, //经验
					companyPeople: this.filter.companyPeople, //公司规模
					industry: this.filter.industry, //行业
				}
				this.$Request.get('/app/myCollection/getMyCollectionListV2', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						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.pages = res.data.pages
						this.jobDataList = res.data.records
						this.loading = false
					}
				})

			},
			//按照类型请求
			getLIst() {
				this.loading = true
				switch (this.tabIndex) {
					case 0:
						this.getLiuList()
						break;
					case 1:
						this.getDataList()
						break;
					case 2:
						this.getMyCollectionList()
						break;
					default:
						break;
				}
			},
			//切换类型
			selectTabs(index) {
				this.tabIndex = index
				this.page = 1
				this.jobDataList = []
				this.getLIst()
			},
			//浏览记录
			getLiuList() {
				let data = {
					page: this.page,
					limit: this.limit,
					education: this.filter.education, //学历
					salaryRange: this.filter.salaryRange, //薪资
					experience: this.filter.experience, //经验
					companyPeople: this.filter.companyPeople, //公司规模
					industry: this.filter.industry, //行业
				}
				this.$Request.get('/app/userBrowse/selectMyBrowseV2', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						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.pages = res.data.pages
						this.jobDataList = res.data.records
					}
					this.loading = false
				})
			},
			/**
			 * @param {Object} item 详情参数
			 * 去详情
			 */
			goDetails(item) {
				this.$router.push({
					name: 'postInfo',
					query: {
						postPushId: item.postPushId
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	$marginTop-60: 120px;

	.tabActive {
		color: #00DD9A !important;
		border-color: #00DD9A !important;
	}

	.tabs {
		width: 100%;
		margin-top: 20px;

		.tabs-box {
			width: calc(100% - $marginTop-60 * 2 - 40px);
			background-color: #ffffff;
			border-radius: 12px;
			padding: 0 20px;
		}

		.tabs-item {
			height: 60px;
			margin-right: 20px;
			color: #666666;
			cursor: pointer;
			border-bottom: 4px solid #ffffff;
		}
	}

	.content {
		width: 100%;
		margin-top: 20px;

		.content-box {
			width: calc(100% - $marginTop-60 * 2);

		}

		.content-l {
			width: 65%;
		}

		.content-l-item:hover {
			box-shadow: 0 10px 10px 0 rgba(153, 153, 153, 0.3);
		}

		.content-l-item {
			width: 100%;
			border-radius: 12px;
			background-color: #ffffff;
			margin-bottom: 20px;
			cursor: pointer;
		}

		.content-l-item-top {
			// width: fit-content;
			padding: 20px;
			background-color: #F7FCFB;
			border-radius: 12px 12px 0 0;

			.content-l-item-top-l {
				font-size: 14px;
				font-weight: 500;
			}

		}

		.content-l-item-center {
			padding: 20px;

			.content-l-item-center-item {
				margin-right: 20px;
				margin-bottom: 20px;
				background-color: #f8f8f8;
				border-radius: 8px;
				padding: 4px 10px;
				font-size: 14px;
			}
		}

		.content-l-item-di {
			padding: 0 20px 20px 20px;
			font-size: 14px;

			img {
				width: 40px;
				height: 40px;
				border-radius: 40px;
			}

			span {
				margin-left: 20px;
			}

			span:nth-of-type(2) {
				color: #999999;
			}

			span:nth-of-type(3) {
				color: #999999;
			}
		}

		.content-r {
			width: calc(35% - 20px);
			height: fit-content;
			background-color: #ffffff;
			border-radius: 12px;
		}


	}

	::-webkit-scrollbar {
		/* Chrome, Safari, Opera */
		width: 4px;
	}

	::-webkit-scrollbar-thumb {
		background-color: #cccccc;
		/* 滚动条颜色 */
	}

	::-webkit-scrollbar-track {
		background-color: #ffffff;
		/* 轨道颜色 */
	}
</style>