<template>
	<div class="index" style="padding-bottom: 40px;">
		<!-- 搜索 -->
		<el-affix @change="change" :offset="60" z-index="2000" style="width: 100%;">
			<div :style="isTop==true?'background:#ffffff;box-shadow: 0 10px 8px rgba(153, 153, 153, 0.1);':''"
				class="search flex align-center justify-center flex-direction">
				<!-- 搜索 -->
				<div class="search-box flex align-center justify-between">
					<div class="search-box-l flex align-center" @click="openCityDialog">
						<el-image style="width: 16px; height: 18px;margin-right: 5px;"
							src="/images/index/addressIcon.png" fit="cover" />
						<el-text style="color: #00DD9A;font-size: 16px;margin-right: 10px;">{{city}}</el-text>
						[切换城市]
					</div>
					<div class="search-box-c flex align-center justify-between">
						<div class="search-box-c-l flex align-center justify-center">
							<el-input @keyup.enter="goSearch()" v-model="keyWord" placeholder="通过职位关键词搜索" />
						</div>
						<div @click="goSearch()" class="search-box-c-r flex align-center justify-center">
							<el-image style="width: 20px; height: 20px;margin-right: 8px;"
								src="/images/index/search.png" fit="cover" />
							搜索
						</div>
					</div>
					<div class="search-box-r flex align-center justify-center">
						<el-image style="width: 20px; height: 30px;margin-right: 10px;" src="/images/index/phone.png"
							fit="cover" />
						<div class="search-box-r-c">
							<div class="search-box-r-c-t">
								扫描二维码
							</div>
							<div class="search-box-r-c-b">
								不错过每条消息
							</div>
						</div>
						<div class="search-box-r-rq">
							<div class="search-box-r-rq-img">
								<img :src="options" style="width: 160px;height: auto;" />
							</div>

							<div class="search-box-r-rq-txt">
								微信扫描二维码
							</div>
						</div>
					</div>
				</div>
				
				<div class="flex justify-between align-center width-style" style="padding: 20px 0 10px;">
					<!-- 岗位 -->
					<div class="tabs flex align-center justify-center">
						<div class="tabs-box">
							<div @click="selectTabs(index)" :class="tabsCurr == index ? 'tabs-box-item-active' : ''"
								class="tabs-box-item" v-for="(item, index) in tabs" :key="index">
								{{ item?.ruleClassifyName }}
							</div>
						</div>
					</div>
					<!-- 筛选 -->
					<div class="filter">
						<div class="searchCondizione flex align-center">
							<div v-on:mouseover="mouseovermy(item)" v-on:mouseout="mouseoutmy(item)"
								 v-for="(item, index) in searchCondizione" :key="index" class="searchCondizione-item">
								<el-popover placement="bottom-start" width="auto" trigger="hover" hide-after="0">
									<template #reference>
										<div class="searchCondizione-itemt flex align-center">
											<span>{{ item.name }}</span>
											<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 v-if="index === 0">
										<div class="searchCondizione-item-c-list" 
										:style="experience == item.value ? 'color:#00DD9A' : ''" @click="selectCondition(item, '工作经验')"
										v-for="item in experienceList" :key="item">
											{{ item.value }}
										</div>
									</div>
									<div v-if="index === 1">
										<div class="searchCondizione-item-c-list" @click="selectCondition(item, '薪资待遇')" v-for="item in moneyList" :key="item">
											{{ item.value }}
										</div>
									</div>
									<div  v-if="index === 2">
										<div @click="selectCondition(item, '学历要求')"
											class="searchCondizione-item-c-list" v-for="item in schoolList"
											:key="item">
											{{ item.value }}
										</div>
									</div>
								</el-popover>
							</div>
						</div>
					</div>
				</div>
				<!-- 跨境标签 -->
				<div class="width-style">
					<div class="flex" style="gap:16px;margin-bottom: 10px;">
						<div class="label-box" :class="activeIndex == 1?'label-active':''" @click="changeLabelBox(1)">跨境标签</div>
						<div class="label-box" :class="activeIndex == 2 ? 'label-active' : ''" @click="changeLabelBox(2)">最新</div>
					</div>
					<div class="flex align-center text-item">
						<div style="color: rgba(51, 51, 51, 1);font-size: 16px;margin-right: 16px;">请筛选牛人的跨境标签</div>
						<div>跨境标签将用于为您推荐更匹配的牛人</div>
					</div>
					<!-- 岗位对应的跨境标签 -->
					<div class="flex align-center" style="margin-top: 16px;">
						<div class="tag-list flex" v-if="tabs.length">
							<span v-for="(tag, i) in ['不限', ...parseSkills(tabs[tabsCurr]?.positionTag)]" :key="i"
								class="tag-item" :class="{ 'tag-item-active': selectedTags.includes(tag) }"
								@click="selectTag(tag)">
								{{ tag }}
							</span>
						</div>
						<div style="margin-left: 16px;" @click="openIndustryDialog">
							<el-icon>
								<Plus />
							</el-icon>
						</div>
					</div>
				</div>
			</div>
		</el-affix>
		<!-- banner/类型 -->
		<div v-if="bannerType.length>0" class="typeBanner flex align-center justify-center">
			<div class="typeBanner-box-r">
				<el-carousel :interval="6000" trigger="click" style="height: 400px;" autoplay>
					<el-carousel-item v-for="item in bannerListuser" style="height: 400px;" :key="item">
						<el-image style="width: 100%; height: 400px;border-radius: 24px;" :src="item.imageUrl"
							fit="fill" />
					</el-carousel-item>
				</el-carousel>
			</div>
			<!-- <div @mouseleave="mouseLeave" class="typeBanner-box flex align-center justify-center"> -->
				<!-- <div class="typeBanner-box-l ">
					<div :class="shotypeCurr == index && isShoType ?'typeBanner-box-l-item-active':''"
						@mouseenter="mouseEnter(index)" class="typeBanner-box-l-item flex align-center justify-between"
						v-for="(item,index) in bannerType" :key="index">
						<div class="typeBanner-box-l-item-l flex align-center">
							{{item?.ruleClassifyName}}
							<div v-if="item.childrens.length>0" v-for="(ite,ind) in item.childrens" :key="ind">
								<div class="typeBanner-box-l-item-l-i" v-if="ind<3">
									<div>
										{{ite.title}}
									</div>
								</div>
							</div>

						</div>
						<div class="typeBanner-box-l-item-r">
							<el-icon :size="15" color="#333333">
								<CaretRight />
							</el-icon>
						</div>
					</div>
				</div> -->
				
				<!-- <div class="typeBanner-box-r typeBanner-box-c">
					<div class="typeBanner-box-c-title">
						{{bannerType[shotypeCurr]?.ruleClassifyName}}
					</div>
					<div class="typeBanner-box-c-item flex justify-between flex-wrap"
						v-for="(ite,ind) in bannerType[shotypeCurr].childrens" :key="ind">
						<div class="typeBanner-box-c-item-l">
							{{ite.title}}
						</div>
						<div v-if="ite.childrens.length>0" class="typeBanner-box-c-item-r flex align-center flex-wrap">
							<div @click="selectLabel(it.ruleClassifyName)" class="typeBanner-box-c-item-r-i"
								v-for="(it,ins) in ite.childrens" :key="ins">
								{{it?.ruleClassifyName}}
							</div>
						</div>
					</div>
				</div> -->
			<!-- </div> -->
		</div>
		<div class="list flex align-center justify-center">
			<div v-loading="loading" class="list-box flex justify-between flex-wrap">
				<div v-if="recommendList.length!=0" class="list-box-item" @click="goDetails(item)"
					v-for="(item,index) in recommendList" :key="index">
					<div class="list-box-item-title flex align-center justify-between">
						<div class="list-box-item-title-name">
							{{ item.userName }}
							<!-- <el-divider direction="vertical" />
							{{ item.onlineStatus == 'ONLINE' ? '在线' : '离线' }} -->
							<el-divider direction="vertical" />
							{{ item.userSex==2?'女':'男'}}
							<el-divider direction="vertical" />
							{{ item.school }}
						</div>
						<div class="list-box-item-title-price">
							<img :src="item.userAvatar ? item.userAvatar :'/default.jpg'" alt="" />
						</div>
					</div>
					<div class="list-box-item-label flex align-center flex-wrap">
						<div class="list-box-item-label-item">
							{{ item.userAge }}岁
						</div>
						<div class="list-box-item-label-item">
							{{ item.resumesWorkExperience || 0 }}年
						</div>
						<div class="list-box-item-label-item">
							{{ item.degree }}
						</div>
						<div class="list-box-item-label-item">
							期望{{ item.minSalary }}-{{ item.maxSalary }}元
						</div>
					</div>
					<div class="list-box-item-label" style="line-height: 40px;font-size: 13px;color: #999999;">
						{{ item.companyName || '暂无公司'}}&nbsp;&nbsp;
						{{ item.lastWorkStartTime ? item.lastWorkStartTime.slice(0,10): ''}}--{{item.lastWorkEndTime ?
						item.lastWorkEndTime.slice(0, 10) : '' }}
					</div>
					<div class="list-box-item-label flex align-center flex-wrap" style="height: 80px;">
						<div class="list-box-item-label-item"
							v-for="skillname in parseSkills(item.intentPostSkill)"
							:key="skillname">
							{{ skillname }}
						</div>
					</div>
					<div class="list-box-item-info flex align-center justify-between">
						<div class="list-box-item-info-name">
							期望岗位：{{ item.expectedPosition }}
						</div>
						<!-- <div class="list-box-item-info-price">
							{{item.company.companyPeople}}
						</div> -->
					</div>
				</div>
				<div class="list-box-item" style="height: 0;padding: 0;"></div>
			</div>
		</div>
		<el-empty v-if="recommendList.length==0" description="暂无推荐" />
		<!-- 查看更多 -->
		<div v-if="recommendList.length!=0" class="moreData flex align-center justify-center">
			<div @click="selectLabel('')" class="moreData-box flex align-center justify-center">
				查看更多
			</div>
		</div>
		<!-- 切换城市 -->
		<el-dialog v-model="allCitys" :draggable="true" destroy-on-close align-center center>
			<template #header>
				<div class="my-header flex align-center">
					<div class="my-header-title" style="font-weight: bold">
						城市选择
					</div>
					<div class="my-header-title flex" style="margin-left: 40px; width: 300px">
						<el-input v-model="search" prefix-icon="Search" size="default" placeholder="请输入城市名称"
							@keyup.enter="handleSearch()" class="inputClass">
						</el-input>
						<el-button @click="handleSearch" style="margin-left: 10px" type="primary">搜索</el-button>
					</div>
				</div>
			</template>
			<div class="city flex align-center justify-center">
				<div class="city-box">
					<div class="city-box-city">
						<div class="city-box-cityt flex align-center justify-between">
							定位城市
							<div @click="getLocation()" class="city-box-cityt-r flex align-center">
								<el-icon :size="14" name="RefreshRight" />
								重新定位
							</div>
						</div>
						<div @click="selectCity(citys)" class="city-box-citys">{{ citys }}</div>
					</div>
					<div class="city-box-list">
						<ul class="city-box-lists" style="overflow: auto">
							<li class="city-box-lists-title">热门城市</li>
							<li class="city-box-lists-title-cs flex align-center flex-wrap">
								<div @click="selectCity(item)" class="city-box-lists-title-css"
									v-for="(item, index) in rmCity" :key="index">
									{{ item }}
								</div>
							</li>
							<li v-for="(item, index) in cityGroupList" :key="index" class="city-box-lists-item">
								<div v-if="item.city.length > 0">
									<div class="city-box-lists-item-title">
										{{ item.letter }}
									</div>
									<div class="flex align-center flex-wrap">
										<div class="city-box-lists-item-titles flex align-center"
											v-for="(ite, ind) in item.city" :key="ind">
											<div @click="selectCity(ite)">
												{{ ite }}
											</div>
										</div>
									</div>
								</div>
							</li>
							<el-empty v-if="cityGroupList.length == 0" description="暂无城市" />
						</ul>
					</div>
				</div>
			</div>
		</el-dialog>
		<!-- 跨境标签选择 -->
		<el-dialog class="workDialog" v-model="industryDialog" title="选择跨境标签" :draggable="true" destroy-on-close
			align-center center>
			<template #header>
				<div class="my-header flex align-center">
					<div class="my-header-title" style="font-weight: bold">
						选择跨境标签
					</div>
					<div class="my-header-title flex align-center" style="margin-left: 40px; width: 600px">
						<el-select :collapse-tags="true" :max-collapse-tags="5"
							class="my-header-title-se" multiple-limit="20" v-model="selectedIndustryTags" multiple
							placeholder="请选择跨境标签">
							<el-option v-for="item in industryArrList" :key="item.postSkillName"
								:label="item.postSkillName" :value="item.postSkillName" />
						</el-select>
						<span style="margin-left: 10px;font-size: 13px;color: #999999;">
							{{ selectedIndustryTags.length }}/20
						</span>
						<el-button @click="addHangye" style="margin-left: 10px" type="primary">确定</el-button>
					</div>
				</div>
			</template>

			<div class="preference-grid">
				<div v-for="(parent, pIndex) in industryList" :key="pIndex" class="preference-group">
					<div class="preference-title">
						<span>{{ parent.postSkillName }}</span>
					</div>

					<div class="preference-children">
						<div v-for="(child, cIndex) in parent.childrenList" :key="cIndex" class="preference-tag"
							:class="{ active: selectedIndustryTags.includes(child.postSkillName) }"
							@click="togglePreference(child.postSkillName)">
							<span>{{ child.postSkillName }}</span>
						</div>
					</div>
				</div>

				<!-- 自定义标签 -->
				<div v-for="(item, index) in customTags" :key="index"
					style="margin-right: 10px; display: inline-block;">
					<el-tag size="large" closable :disable-transitions="false" @close="handleClose(index)">
						{{ item }}
					</el-tag>
				</div>

				<el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" style="width: fit-content;"
					size="default" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
				<el-button v-else class="button-new-tag ml-1" size="default" @click="inputVisible = true">
					+ 新增
				</el-button>

				<el-empty v-if="industryList.length == 0" description="暂无从事方向" />
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {ElMessage} from 'element-plus'
	import cityJs from '../../publicJs/city.js'
	import citySelect from '../../publicJs/citySelect.js'
	import axios from 'axios';
	import jsonp from 'axios-jsonp'
	import VueQrcode from 'vue-qrcode'
	import { CaretBottom, Delete } from '@element-plus/icons-vue'
	export default {
		components: {
			VueQrcode
		},
		data() {
			return {
				industryDialog: false, // 控制弹窗
				industryList: [], // 后端返回的完整行业树
				industryArrList: [],
				selectedIndustryTags: [], // ✅ 用这个数组代替 postPushForm.positionTag
				customTags: [], // 自定义标签
				inputVisible: false,
				inputValue: '',
				selectedTags: ['不限'], // 默认选中“不限”
				activeIndex:1,
				size: 160, //二维码大小
				qrColor: {
					'background': '#ffffff'
				},
				options: '', //生成二维码的内容
				allCitys: false, //是否显示全部城市弹框
				keyWord: '', //搜索内容
				isTop: false,
				searchBg: 'background:#ffffff',
				tabsCurr: 0,
				tabs: [],
				bannerType: [], //岗位分类
				recommendList: [], //推荐岗位
				recommendLists: [], //最新岗位
				isShoType: false,
				shotypeCurr: 0,
				city: '', //当前选择的城市
				citys: '', //定位的城市
				longitude: '',
				latitude: '',
				cityList: cityJs, //所有的城市
				loading: false,
				loadings: false,
				bannerListuser: [], //企业端轮播图
				//城市选择弹框相关
				search: '', //城市搜索关键字
				cityGroupList: [], //按字母分组的城市列表
				rmCity: [], //热门城市列表
				companyId:'',//企业id
				//筛选条件相关
				experience: '', //工作经验
				salaryRange: '', //薪资范围
				education: '', //学历
				experienceList: [],
				moneyList: [],
				schoolList: [],
				searchCondizione: [
					{name: '工作经验', isUp: false},
					{name: '薪资待遇', isUp: false},
					{name: '学历要求', isUp: false}
				],
				intentPostSkill: '', //跨境标签
			}
		},
		mounted() {
			this.companyId = this.$store.state.companyId ? this.$store.state.companyId : localStorage.getItem('companyId');
			if(!this.companyId){
				this.getCompany();
			}else{
				//tbas
				this.getTabsList();
			}
			let inviterCode = this.$route.query.inviterCode
			if (inviterCode) {
				localStorage.setItem('inviterCode', inviterCode)
			}
			if (localStorage.getItem('city')) {
				this.city = localStorage.getItem('city')
			}
			//app下载地址
			this.getAppDown()
			//岗位分类
			this.getJobTypeList();
			//banner
			this.getBannerList();
			this.getschoolList();
			this.getjyList();
			this.getMoneyList();

		},
		methods: {
			getCompany() {
				this.$Request.get("/app/company/selectCompanyByUserId").then(res => {
					if (res.code == 0) {
						this.$store.commit('SET_COMPANY_ID', res.data.companyId)
						localStorage.setItem('companyId', res.data.companyId);
						this.getTabsList();
					}
				})
			},
			// 点击“+”打开行业标签弹窗
			openIndustryDialog() {
				// 打开弹窗
				this.industryDialog = true;
				// 获取当前岗位的 positionTag 字符串
				const tagString = this.tabs[this.tabsCurr]?.positionTag || '';
				// 调用回显方法，渲染出选中的系统标签和自定义标签
				this.handleTagDisplay(tagString);
			},
			handleTagDisplay(tagString) {
				const tagArray = tagString
					.split(',')
					.map(tag => tag.trim())
					.filter(tag => tag && tag !== '不限');

				const allSystemTags = [];
				this.industryList.forEach(category => {
					if (category.childrenList) {
						category.childrenList.forEach(item => {
							allSystemTags.push(item.postSkillName);
						});
					}
				});

				// 清空当前选中
				this.selectedIndustryTags = [];
				this.customTags = [];

				tagArray.forEach(tag => {
					if (allSystemTags.includes(tag)) {
						// 系统标签
						if (
							!this.selectedIndustryTags.includes(tag) &&
							this.selectedIndustryTags.length < 20
						) {
							this.selectedIndustryTags.push(tag);
						}
					} else {
						// 自定义标签
						if (
							this.customTags.length < 5 &&
							this.customTags.length + this.selectedIndustryTags.length < 20
						) {
							this.customTags.push(tag);
						}
					}
				});
			},
			togglePreference(name) {
				const index = this.selectedIndustryTags.indexOf(name);
				if (index === -1) {
					if (this.selectedIndustryTags.length >= 20) {
						this.$message.warning('最多选择20个跨境标签');
						return;
					}
					this.selectedIndustryTags.push(name);
				} else {
					this.selectedIndustryTags.splice(index, 1);
				}
			},
			handleClose(index) {
				this.customTags.splice(index, 1);
			},
			handleInputConfirm() {
				const val = this.inputValue.trim();
				if (val) {
					if (
						this.customTags.length < 5 &&
						this.customTags.length + this.selectedIndustryTags.length < 20 &&
						!this.customTags.includes(val)
					) {
						this.customTags.push(val);
					} else {
						this.$message.warning('最多可添加5个自定义标签，总数不超过20个');
					}
				}
				this.inputVisible = false;
				this.inputValue = '';
			},
			addHangye() {
				// 合并系统 + 自定义标签
				const mergedTags = [...this.selectedIndustryTags, ...this.customTags];
				// 更新岗位标签数据
				this.tabs[this.tabsCurr].positionTag = mergedTags.join(',');
				// 关闭弹窗
				this.industryDialog = false;
			},
			getIndustryList() {
				let data = {
					ruleClassifyId: this.tabs[this.tabsCurr]?.ruleClassifyId
				};
				this.$Request.get('/app/userFirst/getPostSkill', { params: data }).then(res => {
					if (res.code === 0) {
						this.industryList = res.data || [];
						this.industryArrList = [];
						this.flattenIndustryList(this.industryList);
					}
				});
			},
			flattenIndustryList(list) {
				for (const item of list) {
					// 添加当前节点
					this.industryArrList.push(item);
					// 递归处理子节点
					if (item.childrenList && item.childrenList.length > 0) {
						this.flattenIndustryList(item.childrenList);
					}
				}
			},
			selectTag(tag) {
				// 1. 如果点击的是“不限”
				if (tag === '不限') {
					this.selectedTags = ['不限'];
				} else {
					// 2. 否则处理多选逻辑
					const index = this.selectedTags.indexOf(tag);
					if (index === -1) {
						// 新增选中
						this.selectedTags.push(tag);
						// 移除“不限”
						this.selectedTags = this.selectedTags.filter(t => t !== '不限');
					} else {
						// 取消选中
						this.selectedTags.splice(index, 1);
					}

					// 3. 如果全都取消了 → 默认选中“不限”
					if (this.selectedTags.length === 0) {
						this.selectedTags = ['不限'];
					}
				}

				// 更新选择
				this.intentPostSkill = this.selectedTags.join(',');
				this.getRecommendJob();
			},
			changeLabelBox(val){
				this.activeIndex = val;
				this.getRecommendJob()
			},
			mouseovermy(item) {
				this.mouseoutmy()
				item.isUp = true
			},
			mouseoutmy() {
				this.searchCondizione.map(item => {
					item.isUp = false
				})
			},
			/**
			 * schoolList
			 * 学历列表
			 */
			getschoolList() {
				let data = {
					type: '学历'
				}
				this.$Request.get('/app/dict/list', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.schoolList = [{ value: '不限', code: '不限' }, ...res.data]
					}
				})
			},
			/**
			 * experienceList
			 * 工作经验
			 */
			getjyList() {
				let data = {
					type: '工作经验'
				}
				this.$Request.get('/app/dict/list', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.experienceList = [{ value: '不限', code: '不限' }, ...res.data]
					}
				})
			},
			/**
			 * 薪资
			 */
			getMoneyList() {
				let data = {
					type: '薪资'
				}
				this.$Request.get('/app/dict/list', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.moneyList = [{ value: '不限', code: '不限' }, ...res.data]
					}
				})
			},
			parseSkills(str) {
				if (!str) return [];
				try {
					const parsed = JSON.parse(str);
					if (Array.isArray(parsed)) {
						return parsed;
					}
				} catch (e) {

				}
				str = str.replace(/，/g, ',');
				// 判断分隔符
				if (str.includes('/')) {
					return str.split('/').filter(Boolean);
				} else if (str.includes(',')) {
					return str.split(',').filter(Boolean);
				}
				return [str];
			},
			//获取app下载地址
		getAppDown() {
			this.$Request.get('/app/common/type/423').then(res => {
				if (res.code == 0) {
					this.options = res.data.value
				}
			})

		},
		//选择筛选条件
		selectCondition(item, type) {
			switch (type) {
				case '工作经验':
					this.experience = item.value
					this.searchCondizione[0].name = item.value
					break;
				case '薪资待遇':
					this.salaryRange = item.value
					this.searchCondizione[1].name = item.value
					break;
				case '学历要求':
					this.education = item.value
					this.searchCondizione[2].name = item.value
					break;
				default:
					break;
			}
			//重新获取简历
			this.getRecommendJob()
		},
			//选择热门搜索并跳转
			selectLabel(item) {
				this.keyWord = item
				this.goSearch()
			},
			//去搜索页面
			goSearch() {
				this.$router.push({
					name: 'searchCom',
					query: {
						keyWord: this.keyWord
					}
				})
			},
			//获取banner
			getBannerList() {
				this.$Request.get('/app/banner/selectBannerList?classify=3').then(res => {
					if (res.code == 0) {
						this.bannerListuser = res.data
					} else {
						this.bannerListuser = [
							'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2007-11-7%2F200711072147151187.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674883340&t=4b9cbb7796600699ac28f75cd138ba04'
						]
					}
				})
			},
			//获取岗位分类
			getJobTypeList() {
				this.$Request.get('/app/rule/getClassifyList').then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.bannerType = res.data
						}

					}
				})
			},
			//获取简历
			getRecommendJob() {
				this.loading = true
				let data = {
					page: 1,
					limit: 9,
					postType: '', //工作性质
					expectedPosition: this.tabs[this.tabsCurr]?.ruleClassifyName, //岗位名称
					intentPostSkill:this.intentPostSkill == '不限' ? '' : this.intentPostSkill, //跨境标签
					screen: this.activeIndex, //1推荐 2最新
					city: this.city == '全国' ? '' : this.city, //城市
					salaryRange: this.salaryRange == '不限' ? '' : this.salaryRange, //薪资范围
					eduRange: this.education == '不限' ? '' : this.education, //学历
					expRange: this.experience == '不限' ? '' : this.experience, //经验
					// industryName: '', //行业
					lng: this.longitude,
					lat: this.latitude,
					companyId: this.companyId
				}
			// if (Number(type) === 1) {
				
			// } else {
			// 	this.loadings = true
			// 	data = {
			// 		page: 1,
			// 		limit: 9,
			// 		postType: '', //工作性质
			// 		expectedPosition: this.tabs[this.tabsCurr]?.ruleClassifyName, //岗位名称
			// 		screen: 2, //1推荐 2最新
			// 		city: this.city == '全国' ? '' : this.city, //城市
			// 		salaryRange: this.salaryRange == '不限' ? '' : this.salaryRange, //薪资范围
			// 		eduRange: this.education == '不限' ? '' : this.education, //学历
			// 		expRange: this.experience == '不限' ? '' : this.experience, //经验
			// 		lng: this.longitude,
			// 		lat: this.latitude,
			// 		companyId: this.companyId
			// 	}
			// }
				this.$Request.post('/app/resumes/selectResumesList', data,{type: 'json'}).then(res => {
					if (res.code == 0) {
						if (res.data && res.data.records) {
							this.recommendList = res.data.records
							this.loading = false
							// if (Number(type) == 1) {
								
							// } else {
							// 	this.recommendLists = res.data.records
							// 	this.loadings = false
							// }
						} else {
							this.loading = false
							this.loadings = false
						}
						console.log(this.recommendList, 'cccccccc')
					}
				})
			},
			//获取发布的岗位
			getTabsList() {
				let data = {
					companyId: (this.$store.state.companyId ? this.$store.state.companyId : localStorage.getItem('companyId'))  || this.companyId
				}
				this.$Request.get('/app/postPush/getCompanyClassify', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.tabs = res.data;
						this.getIndustryList();
						localStorage.setItem('postPushId', this.tabs[this.tabsCurr].postPushId)
						//定位
						this.getLocation();
					}
				})
			},
			//选择城市
			selectCity(city) {
				this.city = city
				this.allCitys = false
				localStorage.setItem('city', this.city)
				//重新获取岗位
				this.getRecommendJob()
			},
			//打开城市选择弹框
			openCityDialog() {
				this.allCitys = true;
				// 确保在打开弹框时获取热门城市列表和按字母分组的城市列表
				// 这里可以添加相应的API调用或数据处理逻辑
			},
			//打开城市选择弹框
			openCityDialog() {
				this.allCitys = true;
				this.search = '';
				//获取热门城市列表
				this.getRmCityList();
				//获取按字母分组的城市列表
				this.getCityGroupList();
			},
			//获取热门城市列表
			getRmCityList() {
				let data = {
					limitCount: 10
				};
				this.$Request
					.get('/app/postPush/getHotCity', { params: data })
					.then(res => {
						if (res.code == 0) {
							this.rmCity = res.data;
						}
					});
			},
			//获取按字母分组的城市列表
			getCityGroupList(keyword = '') {
				const grouped = {};
				// 过滤：如果有关键字，就按城市名模糊匹配
				const filtered = keyword
					? cityJs.filter(item => item.label.includes(keyword))
					: cityJs;

				// 遍历城市数据
				filtered.forEach(item => {
					// 按字母分组
					const letterObj = citySelect.getFirstLetter(item.label);
					const letter = letterObj.firstletter.toUpperCase();
					if (!grouped[letter]) grouped[letter] = [];
					grouped[letter].push(item.label);
				});

				// 生成按字母分组的城市列表
				const sortedLetters = Object.keys(grouped).sort();
				this.cityGroupList = sortedLetters.map(letter => ({
					letter,
					city: grouped[letter]
				}));
			},
			//搜索城市
			handleSearch() {
				this.getCityGroupList(this.search.trim());
			},
			//使用jsonp请求从腾讯地图获取经纬度
			getLocation() {
				let data = {
					key: 'ZBABZ-ZWECU-UQTVV-4LYDR-COK3F-5SF75', //申请的密钥
					output: 'jsonp'
				};
				let url = 'https://apis.map.qq.com/ws/location/v1/ip';
				axios
					.get(url, {
						params: data,
						adapter: jsonp
					})
					.then(res => {
						this.longitude = res.data.result.location.lng;
						this.latitude = res.data.result.location.lat;
						this.getSelectCity(this.longitude, this.latitude);
					})
					.catch(err => {
						console.log('获取位置失败');
					});
			},
			//使用经纬度获取城市
			getSelectCity(longitude, latitude) {
				let data = {
					lat: latitude,
					lng: longitude
				};
				this.$Request
					.get('/app/Login/selectCity', { params: data })
					.then(res => {
						if (res.code == 0) {
							this.citys = res.data.city ? res.data.city : '未知';
							//获取简历
							this.getRecommendJob()
							localStorage.setItem('city', this.city)
						}
					});
			},
			/**
			 * @param {Object} item 详情参数
			 * 去详情
			 */
			goDetails(item) {
				if (this.tabs.length == 0){
					ElMessage({
						message: '请先发布职位！',
						type: 'warning',
					})
					return;
				}
				if (localStorage.getItem('token')) {
					localStorage.setItem('postPushId', this.tabs[this.tabsCurr].postPushId)
					this.$router.push({
						name: 'resumeInfo',
						query: {
							resumesId: item.resumesId,
							postPushId: this.tabs[this.tabsCurr].postPushId
						}
					})
				} else {
					this.$router.push({
						name: 'login'
					})
				}

			},
			//鼠标移入事件
			mouseEnter(index) {
				this.shotypeCurr = index;
				this.isShoType = true
			},
			//鼠标移出事件
			mouseLeave() {
				this.shotypeCurr = 0;
				this.isShoType = false
			},
			/**
			 * @param {Number} index 选择的索引
			 * 切换类型
			 */
			selectTabs(index) {
				this.tabsCurr = index;
				console.log(this.tabsCurr)
				this.getIndustryList();
				//重新获取岗位
				this.getRecommendJob()
			},
			/**
			 * @param {Boolean} e 
			 * 是否触顶
			 */
			change(e) {
				this.isTop = e
			},
		},
	}
</script>

<style lang="scss" scoped>
	$marginTop-60: 120px;
	:deep(.el-affix--fixed) {
		width: 100% !important;
		right: 0;
		left: 0;
	}
	.tag-list{
		flex-wrap: wrap;
		gap: 10px;
		.tag-item{
			padding: 4px;
			border-radius: 4px;
			background: rgba(198, 198, 198, 0.1);
			color: rgba(153, 153, 153, 1);
			font-family: DM Sans;
			font-size: 14px;
			font-weight: 400;
			cursor: pointer;
		}
		.tag-item-active {
			color: rgba(6, 225, 171, 1);
			background: rgba(6, 225, 171, 0.1);
		}
	}
	.searchLabel {
		width: 100%;

		.searchLabel-item {
			cursor: pointer;
			margin-right: 10px;
			margin-top: 10px;
		}

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

	.my-header {
		padding: 10px 10px 0 10px;
	}
	.search-box-c-l{
		:deep(.el-input__wrapper) {
			box-shadow: none;
			border: none;
		}
	}

	:deep(.el-dialog) {
		border-radius: 14px !important;
		padding: 0;
	}

	:deep(.el-dialog__body) {
		padding-top: 10px !important;

	}

	:deep(.el-dialog__header) {
		background: linear-gradient(45deg, #f2fffa, #FFFFFF);
		border-radius: 14px 14px 0 0;
	}

	.citys {
		width: calc(100% - 20px);
		height: 300px;
		overflow: hidden;
		overflow-y: scroll;
		padding: 0 10px 10px 10px;

	}

	.citys-item {
		display: flex;
		flex-wrap: wrap;

		.citys-item-citys {
			background-color: #F2F2F7;
			width: fit-content;
			padding: 4px 10px;
			cursor: pointer;
			border-radius: 4px;
			margin-top: 20px;
			margin-right: 20px;
		}

		.citys-item-citys:hover {
			background-color: #00DD9A;
			color: #FFFFFF;
		}
	}


	.citys-top {
		width: 100%;


		.citys-top-cityt {
			font-weight: bold;
			color: #333333;
		}

		.citys-top-cityt-r {
			font-weight: 500;
			color: #999999;
			font-size: 12px;
			cursor: pointer;
		}


		.citys-top-citys {
			background-color: #F2F2F7;
			width: fit-content;
			padding: 4px 10px;
			margin-top: 10px;
			cursor: pointer;
			border-radius: 4px;
			margin-right: 20px;
			margin-bottom: 20px;
		}

		.citys-top-citys:hover {
			background-color: #00DD9A;
			color: #FFFFFF;
		}
	}

	.search {
		width: 100%;
		padding: 30px 0;
		background-color: #F5F5F5;


		.search-box {
			width: calc(1600px - $marginTop-60 * 2);
			height: 50px;

			.search-box-l {
				font-size: 16px;
				color: #333333;
				cursor: pointer;
				flex-shrink: 0;
			}

			.search-box-c {
				flex: 1;
				margin: 0 30px;
				height: 100%;
				background-color: #00DD9A;
				border-radius: 12px;
			}

			.search-box-c-l {
				width: calc(100% - 100px);
				height: calc(100% - 2px);
				background-color: #ffffff;
				border-radius: 12px;
				border: 1px solid #00DD9A;
			}

			.search-box-c-r {
				width: 100px;
				height: 100%;
				color: #ffffff;
				font-size: 16px;
				cursor: pointer;
			}

			.search-box-r {
				width: 200px;
				height: 100%;
				background-color: #ffffff;
				border-radius: 12px;
				cursor: pointer;
				position: relative;
			}

			.search-box-r:hover {
				.search-box-r-rq {
					display: inline-block;
				}
			}

			.search-box-r-rq {
				display: none;
				position: absolute;
				width: 200px;
				// height: 280px;
				background-color: #ffffff;
				border-radius: 8px;
				border: 1px solid #F0F0F0;
				top: 55px;
				right: 0px;
				z-index: 999;
				align-content: center;
				padding: 20px 0;

				.search-box-r-rq-img {
					width: 160px;
					height: 160px;
					margin-left: 20px;
				}

				img {
					width: 100%;
					height: 100%;
				}

				.search-box-r-rq-txt {
					width: 100%;
					text-align: center;
					color: #00DD9A;
					font-size: 16px;
					margin-top: 20px;
				}
			}

			.search-box-r-c-t {
				color: #333333;
				font-size: 16px;
				font-weight: 400;
			}

			.search-box-r-c-b {
				color: #999999;
				font-size: 14px;
				font-weight: 400;
			}
		}
	}
	.width-style{
		width: calc(1600px - $marginTop-60 * 2);
	}

	.tabs {
		width: 100%;
		height: 40px;
		.tabs-box {
			width: 100%;
			height: 100%;
			overflow-x: auto;
			white-space: nowrap;
			position: relative;
		}

		.tabs-box::-webkit-scrollbar {
			/* Chrome, Safari, Opera */
			height: 0px !important;
		}

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

		.tabs-box::-webkit-scrollbar-track {
			background-color: #ffffff;
			/* 轨道颜色 */
		}

		.tabs-box-item {
			display: inline-block;
			min-width: 80px;
			padding: 0 5px;
			height: 100%;
			text-align: center;
			line-height: 40px;
			font-size: 16px;
			color: #333333;
			font-weight: 400;
			margin-right: 10px;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			z-index: 1;
		}

		.tabs-box-item:hover {
			color: #06E1AB;
		}

		.tabs-box-item-active {
			color: #FFFFFF !important;
			background-color: #06E1AB !important;
			transition: background-color color 0.5s; // 添加过渡效果
		}
	}

	.typeBanner {
		width: 100%;
		height: auto;

		// .typeBanner-box {
		// 	height: 450px;
		// 	background-color: #ffffff;
		// 	border-radius: 24px;
		// }

		// .typeBanner-box-l {
		// 	width: 550px;
		// 	height: 100%;
		// 	background-color: #ffffff;
		// 	border-radius: 24px 0 0 24px;
		// 	align-content: space-around;
		// 	padding: 10px 0;
		// 	overflow: hidden;
		// 	overflow-y: scroll;
		// }

		.typeBanner-box-r {
			width: calc(1600px - $marginTop-60 * 2);
			// width: calc(100% - 550px);
			height: calc(100% + 20px);
			background-color: #ffffff;
			border-radius: 24px;
		}

		.typeBanner-box-c::-webkit-scrollbar {
			/* Chrome, Safari, Opera */
			width: 0px;
		}

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

		.typeBanner-box-c::-webkit-scrollbar-track {
			background-color: #ffffff;
			/* 轨道颜色 */
		}

		.typeBanner-box-c {
			// padding: 20px;
			overflow: hidden;
			overflow-y: scroll;

			.typeBanner-box-c-title {
				font-size: 16px;
				padding: 20px;
			}

			.typeBanner-box-c-item {
				padding: 0 20px;
				margin-bottom: 10px;
			}

			.typeBanner-box-c-item-l {
				font-size: 14px;
				color: #666666;
			}

			.typeBanner-box-c-item-r {
				width: 80%;
				border-bottom: 1px solid #F5F5F5;
			}

			.typeBanner-box-c-item-r-i:hover {
				color: #00DD9A;
				cursor: pointer;
			}

			.typeBanner-box-c-item-r-i {

				margin-right: 20px;
				margin-bottom: 20px;
			}

		}

		.typeBanner-box-l-item-active {
			box-shadow: 0 0 10px 0 rgba(153, 153, 153, 0.3);

			.typeBanner-box-l-item-r {
				.el-icon {
					color: #00DD9A;
				}
			}
		}

		.typeBanner-box-l-item-l-i:hover {
			color: #00DD9A;
		}

		.typeBanner-box-l-item-l {
			width: 100%;
			padding-left: 20px;
			font-size: 16px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;

		}

		.typeBanner-box-l-item-l-i {
			font-size: 14px;
			margin-left: 20px;
			color: #666666;
		}

		.typeBanner-box-l-item-r {
			padding-right: 20px;
		}

		.typeBanner-box-l-item {
			width: calc(100% - 10px);
			height: calc(100% / 7);
			border-radius: 14px;
			cursor: pointer;
		}
	}

	.tuijian {
		width: 100%;
		margin-top: 65px;

		.tuijian-box {
			width: calc(100% - $marginTop-60 * 2);
			color: #333333;
			font-size: 18px;
		}

		.tuijian-box-line {
			width: 24px;
			height: 2px;
			background-color: #00DD9A;
			margin-top: 4px;
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.tuijian-r {
			font-size: 14px;
			color: #666666;
		}
	}

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

		.list-box {
			width: calc(100% - $marginTop-60 * 2);
			// height: 100%;
			min-height: 100px;
			border-radius: 10px;
		}

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

			.list-box-item-title-name {
				color: #00DD9A;
			}
		}

		.list-box-item {
			width: calc((100% - 40px) / 3);
			height: 100%;
			background-color: #ffffff;
			border-radius: 10px;
			padding: 20px 0;
			cursor: pointer;
			margin-bottom: 20px;
		}

		.list-box-item-title {
			font-size: 16px;
			padding: 0 20px;

			.list-box-item-title-name {
				color: #333333;
			}

			.list-box-item-title-price {
				font-size: 18px;
				color: #FF0000;

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

		.list-box-item-label {
			width: calc(100% - 40px);
			height: 40px;
			padding: 0 20px;
			overflow: hidden;

			.list-box-item-label-item {
				padding: 4px 10px;
				border-radius: 5px;
				background-color: #F5F5F5;
				color: #666666;
				font-size: 14px;
				margin-right: 10px;
				margin-top: 10px;
			}
		}

		.list-box-item-info {
			margin-top: 20px;
			border-top: 1px solid #F5F5F5;
			padding: 0 20px;
			padding-top: 20px;

			.list-box-item-info-name:hover {
				color: #00DD9A;
			}

			.list-box-item-info-name {
				font-size: 14px;
				color: #333333;
			}

			.list-box-item-info-price {
				font-size: 16px;
				color: #999999;
			}
		}
	}

	.moreData {
		width: 100%;
		height: auto;
		margin-top: 10px;

		.moreData-box:hover {
			background-color: #00DD9A;
			color: #ffffff;
		}

		.moreData-box {
			width: 180px;
			height: 40px;
			border-radius: 35px;
			background-color: rgba(0, 221, 154, 0.1);
			color: #00DD9A;
			font-size: 14px;
			cursor: pointer;
			transition: background-color 0.5s;
		}
	}

	.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;
		}
	}
	.city {
		width: 100%;
		height: 500px;

		.city-box {
			width: 100%;
			padding: 0 20px;
			height: 100%;
		}

		.city-box-city {
			.city-box-cityt {
				width: 100%;
				font-weight: bold;

				.city-box-cityt-r {
					font-weight: 500;
					color: #999999;
					font-size: 12px;
					cursor: pointer;
				}
			}

			.city-box-citys {
				background-color: #F2F2F7;
				width: fit-content;
				padding: 4px 10px;
				margin-top: 10px;
				cursor: pointer;
				border-radius: 4px;
			}

			.city-box-citys:hover {
				background-color: #00DD9A;
				color: #FFFFFF;
			}
		}

		.city-box-list {
			width: 100%;
			height: 420px;
			margin-top: 20px;
			overflow-y: scroll;
		}

		.city-box-lists {
			width: 100%;
			height: 100%;
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.city-box-lists-title {
			font-weight: bold;

		}

		.city-box-lists-title-css {
			background-color: #F2F2F7;
			width: fit-content;
			padding: 4px 10px;
			margin-top: 10px;
			cursor: pointer;
			border-radius: 4px;
			margin-right: 20px;
			margin-bottom: 20px;
		}

		.city-box-lists-title-css:hover {
			background-color: #00DD9A;
			color: #FFFFFF;
		}

		.city-box-lists-item-title {
			font-weight: bold;
		}

		.city-box-lists-item-titles {
			background-color: #F2F2F7;
			width: fit-content;
			padding: 4px 10px;
			margin-top: 10px;
			cursor: pointer;
			border-radius: 4px;
			margin-right: 20px;
			margin-bottom: 20px;
		}

		.city-box-lists-item-titles:hover {
			background-color: #00DD9A;
			color: #FFFFFF;
		}
	}
	/* 筛选条件样式 */
	.filter {
		flex-shrink: 0;
		border-radius: 8px;
		// margin-top: 10px;
		// padding: 0 20px;
	}

	.searchCondizione {
		display: flex;
		align-items: center;
		// padding: 10px 0;
	}

	.searchCondizione-item {
		position: relative;
		// margin-right: 40px;
		cursor: pointer;
	}

	.searchCondizione-itemt {
		padding: 6px 12px;
		// background-color: #f8f8f8;
		font-weight: 400;
		font-size: 14px;
		color: #222222;
		cursor: pointer;
		border-radius: 4px;
		// margin-bottom: 10px;
	}
	.searchCondizione-itemt:hover {
		color: #00DD9A;
	}

	.transform-180 {
		transform: rotate(180deg);
		transition: transform 0.3s;
	}


	.searchCondizione-item-c-list {
		text-align: center;
		line-height: 38px;
		cursor: pointer;
	}
	.searchCondizione-item-c-list:hover {
		background-color: #f8f8f8;
		border-radius: 4px;
		color: #00DD9A;
	}

	.searchCondizione-item-c-list-i {
		padding: 5px 15px;
		font-size: 14px;
		color: #606266;
		transition: all 0.3s;
	}
	.clean {
		margin-left: auto;
		padding: 5px 10px;
		cursor: pointer;
		color: #909399;
		transition: all 0.3s;
		font-size: 14px;
	}

	.clean:hover {
		color: #00DD9A;
	}
	.label-box{
		padding: 5px;
		color: rgba(153, 153, 153, 1);
		font-family: DM Sans;
		font-size: 16px;
		font-weight: 400;
		box-sizing: border-box;
		border-radius: 4px;
		background: rgba(198, 198, 198, 0.1);
		cursor: pointer;
	}
	.label-active{
		color: rgba(6, 225, 171, 1);
		background: rgba(6, 225, 171, 0.1);
	}
	.text-item{
		color: rgba(153, 153, 153, 1);
		font-family: DM Sans;
		font-size: 14px;
		font-weight: 400;
	}
	/* 从事方向选择样式 */
	.preference-grid {
		padding: 20px;
		max-height: 400px;
		overflow-y: auto;
	}

	.preference-group {
		margin-bottom: 20px;
	}

	.preference-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #333;
	}

	.preference-children {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.preference-tag {
		padding: 8px 16px;
		border: 1px solid #dcdfe6;
		border-radius: 20px;
		cursor: pointer;
		transition: all 0.3s ease;
		background-color: #fff;
		font-size: 14px;
		color: #606266;
	}

	.preference-tag:hover {
		border-color: #00DD9A;
		color: #00DD9A;
	}

	.preference-tag.active {
		background-color: #00DD9A;
		border-color: #00DD9A;
		color: #fff;
	}
</style>