<template>
	<div class="myPostPush">
		<!-- tbas -->
		<div class="tab flex align-center justify-center">
			<div class="tab-box flex align-center">
				<div @click="selectTab(index)" :class="tabIndex==index?'active':''" class="tab-box-item"
					v-for="(item,index) in tabs" :key="index">
					{{item.name}}
				</div>
			</div>
		</div>
		<!-- 列表 -->
		<div class="list flex align-center justify-center">
			<div class="list-box flex justify-between">
				<div class="list-box-l" v-if="postPushList.length>0">
					<div class="list-box-l-item" v-for="(item,index) in postPushList" :key="index">
						<div class="list-box-l-item-top flex align-center justify-between">
							<div class="list-box-l-item-top-l flex align-center">
								<img :src="item.company.companyLogo?item.company.companyLogo:'/default.jpg'" alt="" />
								<span style="font-weight: 500;margin-left: 20px;">
									{{item.company.companyName || item.company.companyAllName}}
								</span>
							</div>
							<div class="list-box-l-item-top-r flex align-center justify-center "
								:class="item.status==1?'shz':(item.status==2?'zpz':(item.status==3?'yjj':'yxx'))">
								{{ item.status == 1 ? '待接受' : (item.status == 2 ? '已同意' : (item.status == 3 ? '已拒绝' :
								'已过期')) }}
							</div>
						</div>
						<div class="list-box-l-item-title">
							面试人：{{item.userEntity.userName}}
						</div>
						<div class="list-box-l-item-con">
							面试职位：{{ item.postPush.ruleClassifyName }}<el-divider direction="vertical" />
							{{ item.postPush.salaryRange }}<el-divider direction="vertical" />
							{{ item.postPush.salaryTimes }}
						</div>
						<div class="list-box-l-item-con">
							面试时间：{{item.interviewDateTime}}
						</div>
						<div class="list-box-l-item-con">
							面试地点：{{ item.address }}<el-divider direction="vertical" />{{item.detailedAddress}}
						</div>
						<!-- <div class="list-box-l-item-con">
							面试备注：{{item.remarks}}
						</div> -->
						<div class="list-box-l-item-bom flex align-center justify-between">
							<div class="list-box-l-item-tag flex algin-center">
								<span style="margin-left: 10px;color: #00DD9A;">{{ item.resumesListDto[0]?.minSalary
									}}-{{ item.resumesListDto[0]?.maxSalary || '面议'}}</span>
							</div>
							<div class="" style="padding: 0 0 20px 0;">
								<el-button @click="goInfo(item)">查看简历</el-button>
								<!-- <el-button v-if="item.status == 1 || item.status==2"
									@click="updataServeType(item)">修改内容</el-button> -->
							</div>
						</div>

					</div>
					<div class=" flex align-center justify-end" style="width: 100%;">
						<el-pagination background layout="prev, pager, next" v-model="page" :default-page-size="limit"
							:page-count="pages" @current-change="currentChange" />
					</div>
				</div>
				<div class="list-box-l" style="height: 200px;" v-else>
					<el-empty description="暂无面试记录" />
				</div>
				<div class="list-box-r">
					<resume @goDetails="goDetails" />
				</div>
			</div>
		</div>
		<el-dialog v-model="dialogms" title="面试邀请" width="30%">
			<div style="padding: 20px;">
				<el-form label-position="right" ref="formms" :model="miamshi" class="">
					<el-form-item prop="interviewDateTime"
						:rules="[{required: true,message: '请选择面试时间',trigger: 'blur',},]" label="面试时间">
						<el-date-picker style="width: 100%;" v-model="miamshi.interviewDateTime" type="datetime"
							placeholder="请选择面试时间" format="YYYY-MM-DD HH:mm" date-format="MMM DD, YYYY"
							time-format="HH:mm" />
					</el-form-item>
					<el-form-item prop="detailedAddress"
						:rules="[{required: true,message: '请选择面试地点',trigger: 'blur',},]" label="面试地点">
						<el-autocomplete style="width: 100%;" v-model="miamshi.detailedAddress"
							:fetch-suggestions="querySearchAsync" placeholder="请输入面试地点" @select="handleSelect" />
					</el-form-item>
					<el-form-item prop="remarks" :rules="[{required: true,message: '请输入备注',trigger: 'blur',},]"
						label="面试备注">
						<el-input v-model="miamshi.remarks" placeholder="请输入备注" clearable />
					</el-form-item>
				</el-form>
			</div>


			<template #footer>
				<span class="dialog-footer flex align-center justify-end">
					<el-button @click="dialogms = false">取消</el-button>
					<el-button type="primary" @click="submitMs()">
						确认
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import resume from '../../components/resume/resume.vue'
	import {
		ElMessageBox,
		ElMessage,
	} from 'element-plus'
	import axios from 'axios';
	import jsonp from 'axios-jsonp'
	export default {
		components: {
			resume,
		},
		data() {
			return {
				tabs: [{
					name: '全部',
					status: 0
				}, {
					name: '待反馈',
					status: 1
				}, {
					name: '已反馈',
					status: 2
				}],
				tabIndex: 0, // tab下标
				postPushList: [], //岗位列表
				page: 1,
				pages: 1,
				limit: 10,
				screenHeight: 0,
				miamshi: {
					interviewDateTime: '', //面试时间
					companyId: '', //公司id
					remarks: '', //面试备注
					userId: '', //面试者id
					postPushId: '', //岗位id
					province: '', //省
					city: '', //市
					county: '', //区
					lng: '', //经度
					lat: '', //纬度
					detailedAddress: '', //详细地址
				},
				dialogms: false, //面试邀请弹窗
				allInterviews:[], //全部
				pendingFeedback:[], //待反馈
				feedbackReceived:[] //已反馈
			}
		},
		mounted() {
			this.screenHeight = window.innerHeight
			this.getlist()
		},
		methods: {
			goInfo(item) {
				this.$router.push({
					name: 'resumeInfo',
					query: {
						resumesId: item.resumesId
					}
				})
			},
			formatDate(dates) {
				let date = new Date(dates)
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var day = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				return year + "-" + month + "-" + day + " " + hour + ":" + minute + ':00';
			},
			updataServeType(item) {
				this.miamshi = {
					recordId: item.recordId,
					interviewDateTime: item.interviewDateTime, //面试时间
					companyId: item.companyId, //公司id
					remarks: item.remarks, //面试备注
					userId: item.userId, //面试者id
					postPushId: item.postPushId, //岗位id
					province: item.province, //省
					city: item.city, //市
					county: item.county, //区
					lng: item.lng, //经度
					lat: item.lat, //纬度
					detailedAddress: item.detailedAddress, //详细地址
				}
				this.dialogms = true
			},
			//修改面试邀请
			submitMs() {
				let obj = JSON.parse(JSON.stringify(this.miamshi))
				obj.interviewDateTime = this.formatDate(obj.interviewDateTime)
				let formms = this.$refs.formms
				formms.validate((valid) => {
					if (valid) {
						if (!obj.lng || !obj.lat) {
							ElMessage({
								message: '请选择搜索出来的地址',
								type: 'info',
								duration: 1500,
								offset: this.screenHeight / 2
							})
							return
						}
						ElMessageBox.confirm(
								'确定修改面试邀请吗？',
								'提示', {
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning',
								}
							)
							.then(() => {
								this.$Request.post("/app/interviewRecord/saveInterview", obj, {
									type: 'json'
								}).then(res => {
									if (res.code == 0) {
										ElMessage({
											message: '面试邀请已修改',
											type: 'success',
											duration: 1500,
											offset: this.screenHeight / 2
										})
										this.dialogms = false
										this.getlist()
									} else {
										ElMessage({
											message: res.msg,
											type: 'error',
											duration: 1500,
											offset: this.screenHeight / 2
										})
									}
								})
							}).catch(() => {

							})
					}
				})
			},
			//分页
			currentChange(e) {
				this.page = e
				this.getlist()
			},
			//切换状态
			selectTab(index) {
				this.tabIndex = index
				this.updateDisplayList()
			},
			
			//根据当前选中的标签页更新显示列表
			updateDisplayList() {
				switch (this.tabIndex) {
					case 0: // 全部
						this.postPushList = this.allInterviews
						break
					case 1: // 待反馈
						this.postPushList = this.pendingFeedback
						break
					case 2: // 已反馈
						this.postPushList = this.feedbackReceived
						break
					default:
						this.postPushList = this.allInterviews
				}
			},
			//岗位列表
			getlist() {
				let data = {
					// status: this.tabIndex == 0 ? '' : this.tabIndex,
					page: this.page,
					limit: this.limit,
					// companyId: localStorage.getItem('companyId') ? localStorage.getItem('companyId') : this.$store
					// 	.state.companyId
				}
				this.$Request.get('/app/interviewRecord/getHrInterviewList',{params:data}).then(res => {
					if (res.code == 0) {
						this.pages = res.data.pages
						// 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.allInterviews = res.data.records //全部
						this.pendingFeedback = res.data.records.filter(item => item.interviewProcesses === 3)
						this.feedbackReceived = res.data.records.filter(item => item.interviewProcesses === 4)
						this.tabs[1].name = '待反馈 (' + this.pendingFeedback.length + ')'
						this.tabs[2].name = '已反馈 (' + this.feedbackReceived.length + ')'
						
						// 根据当前选中的标签页更新显示列表
						this.updateDisplayList()
					}
				})

			},
			/**
			 * @param {Object} item 详情参数
			 * 去详情
			 */
			goDetails(item) {
				if (localStorage.getItem('token')) {
					this.$router.push({
						name: 'resumeInfo',
						query: {
							resumesId: item.resumesId
						}
					})
				} else {
					this.$router.push({
						name: 'login'
					})
				}

			},
		}
	}
</script>

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

	.shz {
		background-color: #00DD9A;
		color: #ffffff;
	}

	.zpz {
		background-color: #D0E4F9;
		color: #2650EC;
	}

	.yjj {
		background-color: #FFD7D7;
		color: #F13D3D;
	}

	.yxx {
		background-color: #F3F3F3;
		color: #666666;
	}

	.myPostPush {
		padding-bottom: 40px;
	}

	.active {
		border-bottom: 4px solid #00DD9A !important;
		color: #00DD9A !important;
	}

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

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

		.tab-box-item {
			border-bottom: 4px solid #ffffff;
			margin-left: 40px;
			padding: 20px 0;
			cursor: pointer;
			color: #666666;
		}
	}

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

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

		.list-box-l {
			width: 65%;

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

			.list-box-l-item {
				margin-bottom: 20px;
				background-color: #ffffff;
				border-radius: 12px;
				cursor: pointer;
			}

			.list-box-l-item-top {
				background-color: #F7FCFB;
				padding: 10px 20px;
				border-radius: 12px 12px 0 0;

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

				.list-box-l-item-top-l {}

				.list-box-l-item-top-r {
					font-size: 14px;
					width: 70px;
					height: 30px;
					border-radius: 4px;
				}
			}

			.list-box-l-item-title {
				font-weight: 500;
				padding: 10px 20px;
			}

			.list-box-l-item-con {
				font-size: 13px;
				color: #999999;
				padding: 0 20px 10px 20px;
			}

			.list-box-l-item-bom {
				padding: 0 20px;
			}

			.list-box-l-item-tag {
				.list-box-l-item-tag-i {
					font-size: 13px;
					padding: 4px 8px;
					border-radius: 8px;
					background-color: #F8F8F8;
					margin-right: 20px;
					margin-bottom: 20px;
				}
			}
		}

		.list-box-r {
			width: calc(35% - 20px);
			height: fit-content;
			border-radius: 13px;
			background-color: #ffffff;
		}
	}
</style>