<!-- 筛选组件 -->
<template>
	<div>
		<div class="filter flex align-center justify-center">
			<div class="filter-box">
				<div class="filter-box-title-filter flex align-center justify-between">
					<div class="filter-box-title-filter-l flex align-center">
						<div class="flex align-center" v-on:mouseover="mouseovermy(item)"
							v-on:mouseout="mouseoutmy(item)" v-for="(item,index) in searchCondizione" :key="index">
							<el-popover placement="bottom-start" width="auto" trigger="hover" hide-after="0">
								<template #reference>
									<div class="filter-box-title-filter-l-i flex align-center">
										{{item.name}}
										<el-icon :size="14" style="margin-left: 4px;" v-if="item.isUp==false">
											<CaretBottom />
										</el-icon>
										<el-icon :size="14" style="margin-left: 4px;" v-else>
											<CaretTop />
										</el-icon>
									</div>
								</template>
								<!-- 行业选择 -->
								<!-- <div class="hangye" v-if="index==0">
									<div v-if="industryList.length>0" class="hangye-item flex justify-between"
										v-for="(item,index) in industryList" :key="index">
										<div class="hangye-l">
											{{item.industryName}}
										</div>
										<div class="hangye-r flex flex-wrap">
											<div @click="selectHy(ite.industryName)"
												:style="isSelectHy(ite.industryName)?'color:#00DD9A':''"
												class="hangye-r-item" v-for="(ite,ind) in item.childrenList">
												{{ite.industryName}}
											</div>
										</div>
									</div>
									<el-empty v-else description="暂无数据" />
								</div> -->
								<!-- 工作经验 -->
								<div class="jobType" v-if="index==0">
									<div class="jobType-item" :style="experience==item.value?'color:#00DD9A':''"
										@click="selectCondition(item.value,0)" v-for="(item,index) in jyList"
										:key="index">
										{{item.value}}
									</div>
								</div>
								<!-- 薪资 -->
								<div class="jobType" v-if="index==1">
									<div class="jobType-item" :style="salaryRange==item.value?'color:#00DD9A':''"
										@click="selectCondition(item.value,1)" v-for="(item,index) in moneyList"
										:key="index">
										{{item.value}}
									</div>
								</div>
								<!-- 学历 -->
								<div class="jobType" v-if="index==2">
									<div class="jobType-item" :style="education==item.value?'color:#00DD9A':''"
										@click="selectCondition(item.value,2)" v-for="(item,index) in schoolList"
										:key="index">
										{{item.value}}
									</div>
								</div>
								<!-- 公司规模 -->
								<div class="jobType" v-if="index==3">
									<div class="jobType-item" :style="companyPeople==item.value?'color:#00DD9A':''"
										@click="selectCondition(item.value,3)" v-for="(item,index) in compList"
										:key="index">
										{{item.value}}
									</div>
								</div>



							</el-popover>


						</div>
						<el-popover v-if="isShowIsSee" placement="bottom-start" width="auto" trigger="hover"
							hide-after="0">
							<template #reference>
								<div class="filter-box-title-filter-l-i flex align-center">
									<text v-if="Number(isSee)== -1">
										已读状态
									</text>
									<text v-if="Number(isSee)==0">
										未读
									</text>
									<text v-if="Number(isSee)==1">
										已读
									</text>
									<el-icon :size="14" style="margin-left: 4px;" v-if="isUp==false">
										<CaretBottom />
									</el-icon>
									<el-icon :size="14" style="margin-left: 4px;" v-else>
										<CaretTop />
									</el-icon>
								</div>
							</template>
							<!-- 公司规模 -->
							<div class="jobType">
								<div class="jobType-item" :style="Number(isSee)==item.isSee?'color:#00DD9A':''"
									@click="selectIsSee(item.isSee)" v-for="(item,index) in tabsIsSee" :key="index">
									{{item.name}}
								</div>
							</div>
						</el-popover>
					</div>
					<div class="filter-box-title-filter-r" @click="cleanSecect()">
						清空筛选条件
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			//是否显示公司规模
			isCompanyPeople: {
				type: Boolean,
				default: true
			},
			//是否显示已读未读状态筛选
			isShowIsSee: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				tabsIsSee: [{
					name: '已读',
					isSee: 1,
				}, {
					name: '未读',
					isSee: 0,
				}],
				isSee: -1,
				isUp: false,
				searchCondizione: [
					// {
					// 	name: '期望行业',
					// 	num: 0,
					// 	isUp: false
					// },
					{
						name: '工作经验',
						num: 0,
						isUp: false
					},
					{
						name: '薪资待遇',
						num: 0,
						isUp: false
					},
					{
						name: '学历要求',
						num: 0,
						isUp: false
					},
					{
						name: '公司规模',
						num: 0,
						isUp: false
					}
				], //筛选条件
				// industryList: [], //行业
				// industry: [], //选中的行业
				jyList: [], //经验
				experience: '', //选中的经验
				moneyList: [], //薪资
				salaryRange: '', //选中的薪资
				schoolList: [], //学历
				education: '', //选中的学历
				compList: [], //公司规模
				companyPeople: '', //选中的公司规模
			}
		},
		mounted() {
			if (this.isCompanyPeople == false) {
				this.searchCondizione = [
				// 	{
				// 	name: '期望行业',
				// 	num: 0,
				// 	isUp: false
				// }, 
				{
					name: '工作经验',
					num: 0,
					isUp: false
				}, {
					name: '薪资待遇',
					num: 0,
					isUp: false
				}, {
					name: '学历要求',
					num: 0,
					isUp: false
				}] //筛选条件
			}
			// this.getIndustryList()
			this.getjyList()
			this.getMoneyList()
			this.getschoolList()
			this.getscompList()
		},
		methods: {
			selectIsSee(isSee) {
				this.isSee = isSee
				this.filterInfo()
			},
			//清空筛选条件
			cleanSecect() {
				// this.industry = [] //行业
				this.experience = '' //工作经验
				this.salaryRange = '' //薪资范围
				this.education = '' //学历
				this.companyPeople = '' //公司规模
				// this.searchCondizione[0].name = '公司行业'
				this.searchCondizione[0].name = '工作经验'
				this.searchCondizione[1].name = '薪资待遇'
				this.searchCondizione[2].name = '学历要求'
				if (this.isCompanyPeople) {
					this.searchCondizione[3].name = '公司规模'
				}
				if (this.isShowIsSee) {
					this.isSee = -1
				}


				this.filterInfo()
			},
			//通知父组件进行筛选并携带筛选参数
			filterInfo() {
				let data = {
					// industry: this.industry.join(','), //行业
					experience: this.experience, //工作经验
					salaryRange: this.salaryRange, //薪资范围
					education: this.education, //学历
				}
				if (this.isCompanyPeople) {
					data.companyPeople = this.companyPeople //公司规模
				}
				if (this.isShowIsSee) {
					data.isSee = this.isSee
				}
				this.$emit('filterInfo', data)
			},
			//选择筛选条件
			selectCondition(ite, type) {
				switch (type) {
					case 0: //工作经验
						this.experience = ite
						this.searchCondizione[0].name = ite
						break;
					case 1: //薪资
						this.salaryRange = ite
						this.searchCondizione[1].name = ite
						break;
					case 2: //选择学历
						this.education = ite
						this.searchCondizione[2].name = ite
						break;
					case 3: //公司规模
						this.companyPeople = ite
						this.searchCondizione[3].name = ite
						break;
					default:
						break;
				}
				this.filterInfo()
			},
			/**
			 * 公司规模
			 */
			getscompList() {
				let data = {
					type: '公司规模'
				}
				this.$Request.get('/app/dict/list', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.compList = res.data
					}
				})
			},
			/**
			 * schoolList
			 * 学历列表
			 */
			getschoolList() {
				let data = {
					type: '学历'
				}
				this.$Request.get('/app/dict/list', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.schoolList = res.data
					}
				})
			},
			/**
			 * 薪资
			 */
			getMoneyList() {
				let data = {
					type: '薪资'
				}
				this.$Request.get('/app/dict/list', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.moneyList = res.data
					}
				})
			},
			//选中行业
			// selectHy(ite) {
			// 	let index = this.industry.findIndex(item => item == ite)
			// 	if (index == -1) { //没有则加入
			// 		this.industry.push(ite)
			// 		this.searchCondizione[0].name = this.industry[0]
			// 	} else { //有则取消
			// 		this.industry.splice(index, 1)
			// 		if (this.industry.length == 0) {
			// 			this.searchCondizione[0].name = '公司行业'
			// 		} else {
			// 			this.searchCondizione[0].name = this.industry[0]
			// 		}

			// 	}
			// 	this.filterInfo()
			// 	// this.page = 1
			// 	// this.getUserList()
			// },
			/**
			 * jyList
			 * 工作经验
			 */
			getjyList() {
				let data = {
					type: '工作经验'
				}
				this.$Request.get('/app/dict/list', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.jyList = res.data
					}
				})
			},
			//判断是否选中行业
			// isSelectHy(ite) {
			// 	let index = this.industry.findIndex(item => item == ite)
			// 	return index == -1 ? false : true
			// },
			//获取行业
			// getIndustryList() {
			// 	this.$Request.get('/app/industry/getIndustryList').then(res => {
			// 		if (res.code == 0) {
			// 			this.industryList = res.data
			// 		}
			// 	})
			// },
			mouseovermy(item) {
				this.mouseoutmy()
				item.isUp = true
			},
			mouseoutmy() {
				this.searchCondizione.map(item => {
					item.isUp = false
				})
			},
		}
	}
</script>

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

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

		.filter-box {
			width: calc(100% - $marginTop-60 * 2 - 40px);
			height: 100%;
			background-color: #ffffff;
			border-radius: 12px;
			padding: 10px 20px;
			font-size: 16px;
		}

		.filter-box-title-filter-r {
			color: #999999;
			cursor: pointer;
		}

		.filter-box-title-filter-l-i {
			background-color: #f8f8f8;
			color: #222222;
			font-size: 14px;
			padding: 6px 12px;
			border-radius: 4px;
			margin-right: 18px;
			cursor: pointer;
		}

		.filter-box-title-filter-l-i:hover {
			color: #00DD9A;
		}
	}

	.hangye {
		width: 400px;
		max-height: 400px;
		overflow: hidden;
		overflow-y: scroll;


		.hangye-item {

			.hangye-l {
				width: 40%;
				font-weight: 500;
			}

			.hangye-r {
				width: 60%;

				.hangye-r-item {
					margin-right: 10px;
					cursor: pointer;
					margin-bottom: 10px;
				}

				.hangye-r-item:hover {
					color: #00DD9A;
				}
			}
		}
	}

	.jobType {
		.jobType-item {
			// width: 100%;
			text-align: center;
			line-height: 38px;
			cursor: pointer;
		}

		.jobType-item:hover {
			background-color: #f8f8f8;
			border-radius: 4px;
			color: #00DD9A;
		}
	}
</style>