<template>
	<div style="padding-bottom: 40px;">
		<!-- 条件筛选区域 -->
		<el-affix @change="change" z-index="10" :offset="60" style="width: 100%;">
			<div :style="isTop?'background-color:#ffffff;':'margin-top: 20px;'"
				class="condizione flex align-center justify-center">
				<div class="condizione-box flex align-center justify-center">
					<div class="condizione-box-c">
						<!-- 搜索框 -->
						<div class="condizione-box-c-searchc flex align-center justify-between">
							<div class="condizione-box-c-search flex justify-between">
								<div class="condizione-box-c-search-in flex align-center justify-center">
									<div class="condizione-box-c-search-ins flex align-center justify-center">
										<el-input @keyup.enter="startSearch()" v-model="companyName"
											placeholder="搜索公司名称" />
									</div>

								</div>
								<div @click="startSearch()" class="condizione-box-c-search-btn flex justify-center">
									<el-image style="width: 20px; height: 20px;margin-right: 8px;"
										src="/images/index/search.png" fit="cover" />
									搜索
								</div>
							</div>
						</div>
						<!-- 地区选择 -->
						<div class="condizione-box-c-city flex align-center" @click="openCityDialog">
							<div class="condizione-box-c-city-title">
								公司地址:
							</div>
							<el-text style="margin-left: 20px;margin-right: 10px;">
								<span style="color: #00DD9A;">{{ city }}</span>[切换城市]
							</el-text>
						</div>
						<div class=" condizione-box-c-city flex" style="margin-bottom: 20px;">
									<div class="condizione-box-c-city-title">
										公司规模:
									</div>
									<div class="condizione-box-c-city-s flex flex-wrap">
										<div class="condizione-box-c-city-s-i"
											:style="{color:companyPeopleIndex == index?'#00DD9A':''}"
											@click="selectCompanyPeople(index)"
											v-for="(item,index) in companyPeopleList" :key="index">
											{{item.value}}
										</div>
									</div>
						</div>

					</div>
				</div>
			</div>
		</el-affix>
		<!-- 标题 -->
		<div class="title flex align-center justify-center">
			<div class="title-box">
				推荐企业
			</div>
		</div>
		<div class="list flex algin-center justify-center">
			<div class="list-box flex justify-between flex-wrap">
				<div class="list-box-item" @click="goInfo(item.companyId)" v-for="(item,index) in companyList"
					:key="index">
					<div class="list-box-item-top flex align-center justify-between">
						<el-image style="width: 56px; height: 56px;border-radius: 10px;" loading="lazy"
							:src="item.companyLogo?item.companyLogo:'/default.jpg'" fit="cover" />
						<div class="list-box-item-top-r">
							<div class="list-box-item-top-r-name">
								{{item.companyName || item.companyAllName}}
							</div>
							<div class="list-box-item-top-r-label flex flex-wrap align-center">
								<div style="color: #666666;font-size: 13px;">{{ item.companyPeople }} ·</div>
								<div v-if="item.companyScope">
									<span v-for="item in item.companyScope" :key="index"
										class="list-box-item-top-r-label-i">
										{{ item }}
									</span>
								</div>
							</div>
							<div style="color: #9ca4ab;font-size: 12px;margin-top: 5px;">{{ item.workTime }} · {{
								item.welfare }}</div>
						</div>
					</div>
					<div v-if="item.postPushList.length>0" class="list-box-item-bottom flex align-center">
						<div class="list-box-item-bottom-l">
							热招
						</div>
						<div class="list-box-item-bottom-line"></div>
						<div class="list-box-item-bottom-c">
							{{item.postPushList[0].stationName}}
						</div>
						<div class="list-box-item-bottom-r">
							{{item.postPushList[0].salaryRange}}
						</div>
					</div>


				</div>
				<div class="list-box-item" style="height: 0;padding: 0;"></div>
				<div class="list-box-item" style="height: 0;padding: 0;"></div>
			</div>
		</div>
		<div class="content-l" v-if="companyList.length==0">
			<el-empty description="暂无匹配企业" />
		</div>
		<div class="paginationBox flex algin-center justify-center" v-if="companyList.length>0">
			<el-pagination v-model:current-page="page" :page-size="limit" background layout="prev, pager, next"
				:total="total" @prev-click="prevClick" @next-click="nextClick" @change="changeSize" />
		</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>
</template>

<script>
	import cityJs from '../../publicJs/city.js'
	import citySelect from '../../publicJs/citySelect.js'
	import axios from 'axios';
	import jsonp from 'axios-jsonp'
	export default {
		data() {
			return {
				bannerListuser: [], //轮播图
				companyList: [], //企业列表
				cityList: cityJs, //所有的城市
				cityIndex: 0,
				isTop: false,
				county: '', //区域
				companyPeopleList: [], //公司规模
				companyPeopleIndex: 0,
				page: 1,
				pages: 1,
				total: 1, //总条数
				limit: 20,
				companyName: '', //搜索内容
				allCitys: false, //是否显示全部城市弹框
				city: '', //当前选中的城市
				citys: '', //定位的城市
				longitude: '',
				latitude: '',
				//城市选择弹框相关
				search: '', //城市搜索关键字
				cityGroupList: [], //按字母分组的城市列表
				rmCity: [], //热门城市列表
			}
		},
		mounted() {
			this.getCompanyPeopleList()
			// this.getBannerList()
			// this.getCompanyList()
			if (localStorage.getItem('city')) {
				this.city = localStorage.getItem('city')
			}
			// 获取城市列表
			this.getCityList()
			// 定位城市
			this.getLocation()
			//获取热门城市列表
			this.getRmCityList();
		},
		methods: {
			selectCitys(index) {
				this.cityIndex = index
				this.page = 1
				this.getCompanyList()
			},
			//选择城市
			selectCity(city) {
				this.city = city
				this.allCitys = false
				// 保存到localStorage
				localStorage.setItem('city', city)
				// 重新获取企业列表
				this.page = 1
				this.getCompanyList()
			},
			//打开城市选择弹框
			openCityDialog() {
				this.allCitys = true;
				this.search = '';
				//获取按字母分组的城市列表
				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.citys = res.data.result.ad_info.city
					if (!localStorage.getItem('city')) {
						this.city = this.citys
					}
					this.getCompanyList()
					localStorage.setItem('city', this.city)
				}).catch(err => {
					console.log(err)
					// 默认使用'全国'作为城市
					this.citys = '全国'
					if (!localStorage.getItem('city')) {
						this.city = this.citys
					}
					this.getCompanyList()
				})
			},
			//获取城市列表
			getCityList() {
				// 默认使用'全国'作为城市
				if (!localStorage.getItem('city')) {
					this.city = '全国'
					localStorage.setItem('city', this.city)
				} else {
					this.city = localStorage.getItem('city')
				}
			},
			changeSize() {
				this.getCompanyList()
			},
			prevClick(e) {
				this.getCompanyList()
			},
			nextClick() {
				this.getCompanyList()
			},
			//搜索
			startSearch() {
				this.page = 1
				this.getCompanyList()
			},
			getCompanyPeopleList() {
				let data = {
					type: '公司规模'
				}
				this.$Request.get('/app/dict/list', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						let obj = {
							value: '不限'
						}
						this.companyPeopleList = [obj, ...res.data]
					}
				})
			},
			//筛选规模
			selectCompanyPeople(index) {
				this.companyPeopleIndex = index
				this.page = 1
				this.getCompanyList()
			},
			/**
			 * @param {Boolean} e 
			 * 是否触顶
			 */
			change(e) {
				this.isTop = e
			},


			//去公司详情
			goInfo(companyId) {
				this.$router.push({
					name: 'enterpriseInfo',
					query: {
						companyId: companyId
					}
				})
			},
			//获取banner
			getBannerList() {
				this.$Request.get('/app/banner/selectBannerList?classify=10').then(res => {
					if (res.code == 0) {
						this.bannerListuser = res.data
					} else {
						this.bannerListuser = []
					}
				})
			},
			//获取公司列表
			getCompanyList() {
				let data = {
					page: this.page,
					limit: this.limit,
					postType:'',
					key: this.companyName,
					screen:1,
					county:'',//区域
					city: this.city,
					companyPeople: this.companyPeopleIndex == 0 ? '' : this.companyPeopleList[this.companyPeopleIndex]
						.value
				}
				this.$Request.get('/app/company/getCompanyPostPush', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.total = res.data.total
						this.pages = res.data.pages
						res.data.records.map(item => {
							if (item.companyScope) {
								item.companyScope = item.companyScope.split(',')
							} else {
								item.companyScope = []
							}
						})
						this.companyList = res.data.records
					}
				})
			}
		}

	}
</script>
<style lang="scss" scoped>
	$marginTop-60: 120px;
	$boxWidth: calc(100% - $marginTop-60 * 2);

	:deep(.el-input__wrapper) {
		box-shadow: none;
		border: none;
	}
	:deep(.el-affix--fixed) {
		width: 100% !important;
		right: 0;
		left: 0;
	}

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


		.condizione-box {
			width: calc(1600px - $marginTop-60 * 2);
			height: 100%;
			background-color: #ffffff;
			border-radius: 13px;

			.condizione-box-c {
				width: calc(100% - 60px);
			}

			.condizione-box-c-searchc {
				width: 100%;
				height: 48px;
				margin-top: 30px;
			}

			.condizione-box-c-search {
				width: 80%;
				height: 100%;
				background-color: #00DD9A;
				border-radius: 13px;
				align-items: center;
			}

			.condizione-box-c-search-in {
				width: calc(90% - 2px);
				height: 44px;
				background-color: #ffffff;
				margin-left: 2px;
				border-radius: 13px;
			}

			.condizione-box-c-search-ins {
				width: calc(100% - 4px);
			}

			.condizione-box-c-search-btn {
				width: 10%;
				height: 48px;
				align-items: center;
				color: #ffffff;
				cursor: pointer;
			}
		}

		.condizione-box-c-city {
			width: 100%;
			height: auto;
			margin-top: 20px;
			cursor: pointer;

			.condizione-box-c-city-title {
				width: 90px;
				color: #333333;
				font-weight: 500;
				cursor: pointer;
			}

			.condizione-box-c-city-s {
				width: calc(100% - 90px);

				.condizione-box-c-city-s-i {
					font-weight: 400;
					font-size: 14px;
					color: #333;
					margin-left: 20px;
					margin-bottom: 10px;
					cursor: pointer;
				}

				.condizione-box-c-city-s-i:hover {
					color: #00DD9A;
				}
			}
		}

	}

	.banner {
		width: 100%;
		cursor: pointer;
		// height: 295px;
	}

	.title {
		width: 100%;
		margin-top: 45px;

		.title-box {
			width: $boxWidth;
			color: #1C1C1C;
			font-weight: 500;
			font-size: 18px;
		}
	}

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

		.list-box {
			width: $boxWidth;
			height: 100%;
		}

		.list-box-item:hover {
			.list-box-item-top-r-name {
				color: #00DD9A !important;
			}
		}

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

		.list-box-item-top {
			padding: 20px;
		}

		.list-box-item-top-r {
			width: calc(100% - 66px);



			.list-box-item-top-r-name {
				width: 100%;
				font-size: 16px;
				font-weight: 500;
			}

			.list-box-item-top-r-label-i {
				background-color: #f8f8f8;
				color: #666666;
				padding: 0 8px;
				line-height: 22px;
				border-radius: 4px;
				font-size: 13px;
				margin-right: 10px;
				margin-top: 10px;
			}
		}

		.list-box-item-bottom {
			width: 100%;
			height: 48px;
			background-color: #f2fffb;
			border-radius: 0 0 12px 12px;
		}

		.list-box-item-bottom {
			width: calc(100% - 40px);
			padding: 0 20px;
			font-size: 14px;

			.list-box-item-bottom-line {
				width: 1px;
				height: 10px;
				background-color: #e0e0e0;
				margin: 0 8px;
			}

			.list-box-item-bottom-c {
				max-width: 160px;
				color: #00DD9A;
				margin-right: 8px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
			}

			.list-box-item-bottom-r {
				max-width: 90px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
			}
		}
	}
	.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;
		}
	}
/* 城市选择弹窗样式 */
	.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;
		}
	}
</style>