<template>
	<div class="interview" 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>
		<!-- 岗位列表主体 -->
		<div class="content flex align-center justify-center">
			<div class="content-box flex justify-between">
				<div v-if="jobDataList.length>0" class="content-l" v-loading="loading">
					<div class="content-l-item" v-for="(item,index) in jobDataList" :key="index">
						<template v-if="tabIndex == 0 || tabIndex == 3 || tabIndex == 4">
							<div class="content-l-item-top flex align-center justify-between">
								<div class="content-l-item-top-l flex align-center">
									{{ item.ruleClassifyName }}
									<el-divider direction="vertical" />
									<span style="color: red;">
										{{ item.salaryRange }}
									</span>
								</div>
							</div>
							<!-- 公司详情 -->
							<div class="content-l-item-di flex align-center">
								<img :src="item.companyLogo ? item.companyLogo : '/default.jpg'" alt="" />
								<span>
									{{ item.companyName }}
								</span>
								<span>
									{{ item.companyPeople }}
								</span>
								<span>
									{{ item.welfareTag }}
								</span>
							</div>
							<div class="content-l-item-di flex  justify-between">
								<div class="list-box-l-item-tag flex">
									{{ item.education }}
									<span>{{ item.salaryTimes }}</span>
									<span>{{ item.address }}</span>
								</div>
								<div class="" style="padding: 0 0 20px 0;">
									<el-button @click="goInfo(item)">查看岗位</el-button>
								</div>
							</div>
						</template>
						<template v-if="tabIndex == 1">
							<div class="content-l-item-top flex align-center justify-between" v-if="item.postPush">
								<div class="content-l-item-top-l flex align-center">
									{{ item.postPush.ruleClassifyName }}
									<el-divider direction="vertical" />
									<span style="color: red;">
										{{ item.postPush.salaryRange }}
									</span>
								</div>
							</div>
							<!-- 公司详情 -->
							<div class="content-l-item-di flex align-center" v-if="item.company">
								<img :src="item.company.companyLogo ? item.company.companyLogo : '/default.jpg'" alt="" />
								<span>
									{{ item.company.companyName || item.company.companyAllName }}
								</span>
								<span>
									{{ item.company.companyPeople }}
								</span>
								<span>
									{{ item.company.workRestTime }}
								</span>
								<span>
									{{ item.postPush.welfareTag }}
								</span>
							</div>
							<div class="content-l-item-di flex  justify-between">
								<div class="list-box-l-item-tag flex">
									{{ item.userEntity?.userName }}·{{ item.hr?.hrPosition }}
									<span>{{ item.postPush?.salaryTimes }}</span>
								</div>
								<div class="" style="padding: 0 0 20px 0;">
									<el-button @click="goInfo(item)">查看岗位</el-button>
								</div>
							</div>
						</template>
						<template v-if="tabIndex == 2">
							<div class="content-l-item-top flex align-center justify-between" v-if="item.postPush">
								<div class="content-l-item-top-l flex align-center">
									{{ item.postPush.ruleClassifyName }}
									<el-divider direction="vertical" />
									<span style="color: red;">
										{{ item.postPush.salaryRange }}
									</span>
								</div>
								<!-- 待接受 -->
								<div class="content-l-item-top-rs" v-if="item.status == 1">
									<el-button @click="coleInterView(item.recordId, 2)">拒绝</el-button>
									<el-button @click="coleInterView(item.recordId, 1)" type="primary">接受</el-button>
								</div>
								<!-- 已接受 -->
								<div class="content-l-item-top-r activeColors" v-if="item.status == 2">
									已接受
								</div>
								<!-- 已拒绝 -->
								<div class="content-l-item-top-r activeColorj" v-if="item.status == 3">
									已拒绝
								</div>
								<!-- 已过期 -->
								<div class="content-l-item-top-r activeColorg" v-if="item.status == 4">
									已过期
								</div>
							</div>
							<div class="content-l-item-bom">
								面试时间：{{ item.interviewDateTime }} {{ item.detailTime }}
							</div>
							<div @click="jumpToTencentMap(item.lat, item.lng, item.detailedAddress)"
								class="content-l-item-bom flex align-center">
								面试地点：
								<div class="content-l-item-boms flex align-center">
									{{ item.address }} {{ item.detailedAddress }}
									<el-icon color="#00DD9A" size="18">
										<LocationFilled />
									</el-icon>
								</div>
							</div>
							<!-- 公司详情 -->
							<div class="content-l-item-di flex align-center" v-if="item.company">
								<img :src="item.company.companyLogo ? item.company.companyLogo : '/default.jpg'" alt="" />
								<span>
									{{ item.company.companyName }}
								</span>
								<span>
									{{ item.company.companyScope }}
								</span>
								<span>
									{{ item.company.companyPeople }}
								</span>
							</div>
							<div class="content-l-item-di flex justify-between">
								<div class="list-box-l-item-tag flex" v-if="item.company">
									{{ item.company.workOverTime }}
									<span>
										{{ item.company.workRestTime }}
									</span>
									<span>
										{{ item.company.welfare }}
									</span>
								</div>
								<div class="" style="padding: 0 0 20px 0;">
									<el-button @click="goInfo(item)">查看岗位</el-button>
								</div>
							</div>
						</template>
					</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 class="content-l" v-else>
					<el-empty description="暂无匹配岗位" />
				</div>
				<div class="content-r">
					<recommend @goDetails="goDetails" />
				</div>
			</div>

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

<script>
	import recommend from '../../components/recommend/recommend.vue'
	import {
		ElMessageBox,
		ElMessage,
	} from 'element-plus'
	export default {
		components: {
			recommend
		},
		data() {
			return {
				loading: false, //加载状态
				jobDataList: [], //岗位列表
				page: 1, //分页
				limit: 10, //每页条数
				pages: 1, //总页数
				tabsList: [
					{
					name: '已投简历',
					index: 0,
					url: '/app/sendRecord/getMyRecordListV2'
				}, {
					name: '沟通过',
					index: 1,
					url: '/app/sendRecord/getConversationList'
				}, {
					name: '我的面试',
					index: 2,
					url: '/app/interviewRecord/interviewList'
				}, {
					name: '收藏',
					index: 3,
					url: '/app/myCollection/getMyCollectionListV2'
				}, {
						name: '浏览记录',
						index: 4,
						url: '/app/userBrowse/selectMyBrowseV2'
					}],
				tabIndex: 0,
				screenHeight: 0, //屏幕高度
				url:''
			}
		},
		mounted() {
			this.tabIndex = this.$route.query.index || 0;
			this.screenHeight = window.innerHeight
			this.getJobList()
		},
		methods: {
			goInfo(item) {
				this.$router.push({
					name: 'postInfo',
					query: {
						postPushId: item.postPushId
					}
				})
			},
			jumpToTencentMap(latitude, longitude, name) {
				var url = 'https://apis.map.qq.com/uri/v1/search?keyword=' + name + '&center=' + latitude + ',' +
					longitude + '&radius=100&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77';
				window.open(url)
			},
			//分页
			currentChange(e) {
				this.page = e
				this.getJobList()
			},
			//拒绝面试邀请
			coleInterView(recordId, type) {
				ElMessageBox.alert(type == 2 ? '确认拒绝该面试邀请吗？' : '确定接受该面试邀请', '提示', {
					confirmButtonText: '确认',
					showCancelButton: true,
					callback: (res) => {
						if (res == 'confirm') { //确认
							let data = {
								recordId: recordId,
								type: type
							}
							this.$Request.get('/app/interviewRecord/userUpdateInter', {
								params: data
							}).then(res => {
								if (res.code == 0) {
									ElMessage({
										message: type == 1 ? '已接受' : '已拒绝',
										type: type == 1 ? 'success' : 'error',
										duration: 1500,
										offset: this.screenHeight / 2
									})
									this.page == 1
									this.getJobList()
								} else {
									ElMessage({
										message: res.msg,
										type: 'error',
										duration: 1500,
										offset: this.screenHeight / 2
									})
								}
							})
						}
					}
				})
			},
			//切换状态
			selectTabs(index) {
				this.tabIndex = index
				this.page = 1
				this.getJobList()
			},
			//获取列表
			getJobList() {
				let data = {
					page: this.page,
					limit: this.limit,
					education: '', //学历
					salaryRange: '', //薪资
					experience: '', //经验
					companyPeople: '', //公司规模
					industry: '', //行业
					// userId: localStorage.getItem('userId')
				}
				this.$Request.get(this.tabsList[this.tabIndex].url, {params: data}).then(res => {
					if (res.code == 0) {
						// res.data.records.forEach(ret => {
						// 	if (ret.status == 1) {
						// 		ret.statusName = '待接受'
						// 	} else if (ret.status == 2) {
						// 		ret.statusName = '已接受'
						// 	} else if (ret.status == 3) {
						// 		ret.statusName = '已拒绝'
						// 	} else if (ret.status == 4) {
						// 		ret.statusName = '已过期'
						// 	}
						// })
						this.jobDataList = res.data.records
						this.pages = res.data.pages

					}
				})
			},
			/**
			 * @param {Object} item 详情参数
			 * 去详情
			 */
			goDetails(item) {
				this.$router.push({
					name: 'postInfo',
					query: {
						postPushId: item.postPushId
					}
				})
			},
		}
	}
</script>

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

	.activeColorj {
		background-color: #FFD7D7 !important;
		color: #F13D3D !important;
	}

	.activeColors {
		background-color: #D0E4F9 !important;
		color: #2650EC !important;
	}

	.activeColorg {
		background-color: #F3F3F3 !important;
		color: #666666 !important;
	}

	.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 {
			width: 100%;
			border-radius: 12px;
			background-color: #ffffff;
			margin-bottom: 20px;

		}

		.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-top-r {
				border-radius: 6px;
				padding: 5px 10px;
				font-size: 14px;
			}
		}

		.content-l-item-boms:hover {
			cursor: pointer;
			color: #00DD9A;
		}

		.content-l-item-bom {
			padding: 10px 20px;
			margin-top: 10px;
			font-size: 14px;
		}

		.content-l-item-di {
			padding: 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;
		}


	}
</style>