<template>
	<div class="joblist-container"
	>
		<!-- 城市的弹出框 -->
		<a-modal class="cityModal" transitionName v-model="visible" width="680px" @cancel="cityModalClose" title="请选择城市" :footer="null">
			<div class="inputBox">
				<a-input placeholder="请输入城市名称" allow-clear width="300px" v-model="cityValue" @keyup.enter="searchCity" @input="resetCityList"></a-input>
				<a-button @click="searchCity">确认</a-button>
			</div>
			<ul class="firstList">
				<li @click="[(currentCityList = hotCityList), (activeInd = -1)]">
					<div :class="activeInd == -1 ? 'active' : ''">热门地区</div>
				</li>
				<li v-for="(item, index) in hasJobCityList.firstList" :key="index" @click="[changeCurrentCity(index), (activeInd = index)]">
					<div :class="activeInd == index ? 'active' : ''">
						<span v-for="i in item" :key="i">{{ i }}</span>
					</div>
				</li>
			</ul>
			<ul class="currentCity">
				<li v-for="(item, index) in currentCityList" :key="index">
					<div @click="searchJob(item)">{{ item.name }}</div>
				</li>
			</ul>
		</a-modal> 
		<div class="main-page-obj">
			<!-- 筛选导航 -->
			<div class="navigation">
				<div class="w" id="navigation" style="position: relative;">
					<span class="dn">
						<!-- <i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i> -->
						<router-link to="/main">
							<!--   <svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-yishoudanlogo"></use></svg
							>-->
							<img src="//matripe.oss-cn-beijing.aliyuncs.com/bcSVG/dtLogo.png" class="icon" />
						</router-link>
					</span>
					<div class="searchBox g_flex_row_start" @blur="hidedownHotStore" @focus="showHotStore" tabindex="0" outline="0" hidefocus="true">
						<div class="g_flex_1">
							<a-input :placeholder="jobNum ? `近48小时更新${jobNum}条招工信息` : ''" @keyup.enter="onSearch" @input="resetsearch" @blur="hidedownHotStore" @focus="showHotStore" tabindex="0" v-model="searchValue" class="searchinput g_w_all" style allow-clear>
								<div slot="prefix" class="fsa w100" @focus.stop tabindex="0" @click.stop="visible = true">
									<span class="dpib esl" style="width: 60px">{{ currentCity }}</span>
									<div>
										<i class="iconfont icon-sousuoxiala"></i>
										<i class="iconfont icon-guanbishixin" v-show="currentCity != '全国'" @click.stop="resetCity"></i>
									</div>
								</div>
								<button slot="suffix" @click="onSearch" style="border-radius: 0px 6px 6px 0">搜索</button>
							</a-input>
						</div>
						<div class="g_flex_none g_ml_12">
							<a-dropdown :trigger="['click']">
								<a style="font-size: 14px;"@click.prevent="e => handleToggle(e)">
									筛选 
									<a-icon type="down" style="font-size: 14px;" v-if="!isToggle"  />
									<a-icon type="up" style="font-size: 14px;" v-if="isToggle"  />
								</a> 
								<div slot="overlay" class="model-obj">
									<div class="filter" :class="[filterStatus == 0 ? '' : 'nobd']" style="box-shadow: 3px 3px 20px 0px rgba(77, 87, 94, 0.3);border-radius: 6px;overflow: hidden;">
										<div class="filter-title" :style="{ top: filterStatus == 0 ? '-32px' : '-21px' }" v-if="false">
											<span>
												<span>
													所有筛选
													<i class="iconfont icon-youjiantou"></i>
												</span>
												<span class="filter-show">
													<span @click="delFilter($event, 'price')" v-show="filterObj.price">
														{{ filterObj.price }}
														<i class="iconfont icon-guanbi2" v-show="filterObj.price"></i>
													</span>
													<span @click="delFilter($event, 'gender')" v-show="filterObj.gender">
														{{ filterObj.gender }}
														<i class="iconfont icon-guanbi2" v-show="filterObj.gender"></i>
													</span>
													<span @click="delFilter($event, 'age')" v-show="filterObj.age">
														{{ filterObj.age }}
														<i class="iconfont icon-guanbi2" v-show="filterObj.age"></i>
													</span>
													<span @click="delFilter($event, 'special', item)" v-for="(item, index) in filterObj.specialactive" :key="index">
														{{ item.name }}
														<i class="iconfont icon-guanbi2"></i>
													</span>
													<i v-show="showDotted" style="line-height: 24px">...</i>
												</span>
											</span>
											<span>
												<span class="toggleFilter" @click="hideFilterContent">
													{{ filterStatus == 0 ? "收起筛选" : "展开筛选" }}
													<i
														class="iconfont icon-sousuoxiala"
														:style="{
															transform: filterStatus == 0 ? 'rotate(180deg) scale(.6)' : '',
														}"
													></i>
												</span>
												<a-dropdown :trigger="['click']" overlayClassName="sortClass" placement="bottomRight">
													<span class="sort">{{ sortStr }}</span>
													<a-menu slot="overlay">
														<a-menu-item>
															<div class="sortMenu" :class="sortNum == 1 ? 'active' : ''" @click="sortList('price')">工价优先</div>
														</a-menu-item>
														<a-menu-item>
															<div class="sortMenu" :class="sortNum == 2 ? 'active' : ''" @click="sortList('juli')">距离优先</div>
														</a-menu-item>
														<a-menu-item>
															<div class="sortMenu" :class="sortNum == 3 ? 'active' : ''" @click="sortList('fuwufei')">佣金优先</div>
														</a-menu-item>
													</a-menu>
												</a-dropdown>
											</span>
										</div>
										<div class="filter-content" style="transition: height 0.2s">
											<dl class="price">
												<dt>工价：</dt>
												<dd>
													<div class="ageinputbox">
														<!-- <div> -->
														<a-input
															class="ageinput"
															v-model="minMonthlyPay"
															:maxLength="5"
															type="text"
															allow-clear
															prefix="￥"
															@input="resetPriceSearch"
															@click.stop="
																() => {
																	return false;
																}
															"
														></a-input>
														<span class="middle-line">-</span>
														<a-input
															class="ageinput"
															v-model="maxMonthlyPay"
															:maxLength="5"
															type="text"
															allow-clear
															prefix="￥"
															@input="resetPriceSearch"
															@click.stop="
																() => {
																	return false;
																}
															"
														></a-input>
														<div class="confirm">
															<button @click="searchPrice">确定</button>
														</div>
														<!-- </div> -->
													</div>
													<i @click="searchPrice">
														<br>
														<div class="g_flex_row_start g_mt_12">
															<span class="g_mr_40 dav"
																:style="{
																	color: filterObj.price == '3000-4000' ? '#1890ff' : '',
																}"
																>3000-4000</span
															>
															<span class="g_mr_40 dav"
																:style="{
																	color: filterObj.price == '4000-5000' ? '#1890ff' : '',
																}"
																>4000-5000</span
															>
															<span
																class="g_mr_40 dav"
																:style="{
																	color: filterObj.price == '5000-6000' ? '#1890ff' : '',
																}"
																>5000-6000</span
															>
															<span class="dav"
																:style="{
																	color: filterObj.price == '6000-7000' ? '#1890ff' : '',
																}"
																>6000-7000</span
															>
														</div>
													</i>
												</dd>
											</dl>
											<dl class="price" style="padding-bottom: 14px;">
												<dt>年龄：</dt>
												<dd>
													<div class="ageinputbox">
														<!-- <div> -->
														<a-input
															class="ageinput age"
															v-model="minAge"
															:maxLength="3"
															type="text"
															allow-clear
															suffix="岁"
															@input="resetAgeSearch"
															@click.stop="
																() => {
																	return false;
																}
															"
														></a-input>
														<span class="middle-line">-</span>
														<a-input
															class="ageinput age"
															v-model="maxAge"
															:maxLength="3"
															type="text"
															allow-clear
															suffix="岁"
															@input="resetAgeSearch"
															@click.stop="
																() => {
																	return false;
																}
															"
														></a-input>
														<div class="confirm">
															<button @click="searchAge">确定</button>
														</div>
														<!-- </div> -->
													</div>
												</dd>
											</dl>
											<dl>
												<dt>性别：</dt>
												<dd @click="searchGender">
													<span :style="{ color: filterObj.gender == '男' ? '#1890ff' : '' }">男</span>
													<span :style="{ color: filterObj.gender == '女' ? '#1890ff' : '' }">女</span>
													<span
														:style="{
															color: filterObj.gender == '男女不限' ? '#1890ff' : '',
														}"
														>男女不限</span
													>
												</dd>
											</dl>
											<dl>
												<dt>分类：</dt>
												<dd>
													<span v-for="(item, index) in classifyList" :key="index" :class="{ 'special-active': filterObj.specialactive.indexOf(item) > -1 }" @click.stop="classifyClick(index, item)">{{ item.name }}</span>
												</dd>
											</dl>
											<dl>
												<dt>薪资福利：</dt>
												<dd>
													<span
														v-for="(item, index) in tagArray1"
														:key="index"
														:class="{
															'special-active': filterObj.specialactive.indexOf(item) > -1,
														}"
														@click.stop="specialclick(index, item)"
														>{{ item.name }}</span
													>
												</dd>
											</dl>
											<dl>
												<dt>宿舍保障：</dt>
												<dd>
													<span
														v-for="(item, index) in tagArray3"
														:key="index"
														:class="{
															'special-active': filterObj.specialactive.indexOf(item) > -1,
														}"
														@click.stop="specialclick(index, item)"
														>{{ item.name }}</span
													>
												</dd>
											</dl>
											<dl>
												<dt>班制休息：</dt>
												<dd>
													<span
														v-for="(item, index) in tagArray0"
														:key="index"
														:class="{
															'special-active': filterObj.specialactive.indexOf(item) > -1,
														}"
														@click.stop="specialclick(index, item)"
														>{{ item.name }}</span
													>
												</dd>
											</dl>
											<dl>
												<dt>面试特色：</dt>
												<dd>
													<span
														v-for="(item, index) in tagArray4"
														:key="index"
														:class="{
															'special-active': filterObj.specialactive.indexOf(item) > -1,
														}"
														@click.stop="specialclick(index, item)"
														>{{ item.name }}</span
													>
												</dd>
											</dl>
											<dl>
												<dt>其他特色：</dt>
												<dd>
													<span
														v-for="(item, index) in tagArray2"
														:key="index"
														:class="{
															'special-active': filterObj.specialactive.indexOf(item) > -1,
														}"
														@click.stop="specialclick(index, item)"
														>{{ item.name }}</span
													>
												</dd>
											</dl>
										</div>
									</div>
								</div>
							</a-dropdown>
						</div>
					</div>
					<ul class="hotTag" style="display: none">
						<div>热门：</div>
						<li
							v-for="(item, index) in specialHotTag"
							:key="index"
							@click="specialclick(index, item)"
							:class="{
								active: filterObj.specialactive.indexOf(item) > -1,
							}"
						>
							{{ item.name }}
						</li>
					</ul>
					<div class="model-obj-copy">
									<div class="filter" :class="[filterStatus == 0 ? '' : 'nobd']" style="border-radius: 6px;overflow: hidden;">
										<div class="filter-title" :style="{ top: filterStatus == 0 ? '-32px' : '-21px' }">
											<span>
												<span class="filter-show">
													<span @click="delFilter($event, 'price')" v-show="filterObj.price">
														{{ filterObj.price }}
														<i class="iconfont icon-guanbi2" v-show="filterObj.price"></i>
													</span>
													<span @click="delFilter($event, 'gender')" v-show="filterObj.gender">
														{{ filterObj.gender }}
														<i class="iconfont icon-guanbi2" v-show="filterObj.gender"></i>
													</span>
													<span @click="delFilter($event, 'age')" v-show="filterObj.age">
														{{ filterObj.age }}
														<i class="iconfont icon-guanbi2" v-show="filterObj.age"></i>
													</span>
													<span @click="delFilter($event, 'special', item)" v-for="(item, index) in filterObj.specialactive" :key="index">
														{{ item.name }}
														<i class="iconfont icon-guanbi2"></i>
													</span>
													<i v-show="showDotted" style="line-height: 24px">...</i>
												</span>
											</span>
										</div>
										
									</div>
								</div>
				</div>
			</div>
			<!-- 面包屑 -->
			<!-- <a-breadcrumb class="w">
				<a-breadcrumb-item href="">
					<router-link to="/main"><a-icon type="home" /></router-link>
				</a-breadcrumb-item>
				<a-breadcrumb-item href="">
					<span>一手职位</span>
				</a-breadcrumb-item>
			</a-breadcrumb>-->
			<!-- #### 主体部分 ##### -->
			<div class="w" id="maincontent">
				<div class="maincontentleft" style="padding-top: 8px">
					<div class="tabBar" @click="changeTab($event)">
						<div class="tabSubset" :class="{ active: sortTag == 0 }"  data-type="0" style="font-size: 16px;">最新</div>
						<!-- <div class="tabSubset" :class="{ active: signType == 1 }"  data-type="1">按距离</div> -->
						<div class="tabSubset" :class="{ active: sortTag == 1 }"  data-type="1" style="font-size: 16px;">按工价</div>
						<div class="tabSubset" :class="{ active: sortTag == 3 }"  data-type="3" style="font-size: 16px;">按佣金</div>
						<!-- <div class="tabSubset" :class="{ active: signType == 1 }" v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" data-type="1">一才</div> -->
						<!-- v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" -->
						<!-- v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" -->
						<!-- <div class="tabSubset" :class="{ active: signType == 2 }" data-type="2">三方</div> -->
					</div>
					<div class="filter"  :class="[filterStatus == 0 ? '' : 'nobd']" style v-if="false">
						<div class="filter-title g_flex_row_between" style="margin-bottom: 12px;" :style="{ top: filterStatus == 0 ? '-32px' : '-21px' }">
							<span class="g_flex_column_center">
								<div class="g_flex_row_start">
									<span style="color: #999;" class="g_flex_row_start">
										<div class="g_flex_column_center" style="font-size: 14px;">
											所有筛选
										</div>
										<div class="g_flex_column_center">
											<i class="iconfont icon-youjiantou" style="font-size: 20px;margin-top: -14px;height: 14px;"></i>
										</div>
									</span>
									<span class="filter-show">
										<span @click="delFilter($event, 'price')" v-show="filterObj.price" style="font-size: 14px;cursor: pointer;">
											{{ filterObj.price }}
											<i class="iconfont icon-guanbi2" v-show="filterObj.price" style="font-size: 14px;"></i>
										</span>
										<span @click="delFilter($event, 'gender')" v-show="filterObj.gender" style="font-size: 14px;cursor: pointer;">
											{{ filterObj.gender }}
											<i class="iconfont icon-guanbi2" v-show="filterObj.gender" style="font-size: 14px;cursor: pointer;"></i>
										</span>
										<span @click="delFilter($event, 'age')" v-show="filterObj.age" style="font-size: 14px;cursor: pointer;">
											{{ filterObj.age }}
											<i class="iconfont icon-guanbi2" v-show="filterObj.age" style="font-size: 14px;"></i>
										</span>
										<span @click="delFilter($event, 'special', item)" v-for="(item, index) in filterObj.specialactive" :key="index" style="font-size: 14px;cursor: pointer;">
											{{ item.name }}
											<i class="iconfont icon-guanbi2" style="font-size: 14px;"></i>
										</span>
										<i v-show="showDotted" style="line-height: 24px;font-size: 14px;">...</i>
									</span>
								</div>
							</span>
							<span>
								<!-- <span class="toggleFilter" @click="hideFilterContent">
									{{ filterStatus == 0 ? "收起筛选" : "展开筛选" }}
									<i
										class="iconfont icon-sousuoxiala"
										:style="{
											transform: filterStatus == 0 ? 'rotate(180deg) scale(.6)' : '',
										}"
									></i>
								</span> -->
								<a-dropdown :trigger="['click']" overlayClassName="sortClass" placement="bottomRight">
									<span class="sort" style="color: #999;font-size: 14px;">{{ sortStr }}</span>
									<a-menu slot="overlay">
										<a-menu-item>
											<div class="sortMenu" :class="sortNum == 1 ? 'active' : ''" @click="sortList('price')">工价优先</div>
										</a-menu-item>
										<a-menu-item>
											<div class="sortMenu" :class="sortNum == 2 ? 'active' : ''" @click="sortList('juli')">距离优先</div>
										</a-menu-item>
										<a-menu-item>
											<div class="sortMenu" :class="sortNum == 3 ? 'active' : ''" @click="sortList('fuwufei')">佣金优先</div>
										</a-menu-item>
									</a-menu>
								</a-dropdown>
							</span>
						</div>
						<div class="filter-content" style="transition: height 0.2s" v-if="false">
							<dl class="price">
								<dt>工价：</dt>
								<dd>
									<div class="ageinputbox">
										<!-- <div> -->
										<a-input
											class="ageinput"
											v-model="minMonthlyPay"
											:maxLength="5"
											type="text"
											allow-clear
											prefix="￥"
											@input="resetPriceSearch"
											@click.stop="
												() => {
													return false;
												}
											"
										></a-input>
										<span class="middle-line">-</span>
										<a-input
											class="ageinput"
											v-model="maxMonthlyPay"
											:maxLength="5"
											type="text"
											allow-clear
											prefix="￥"
											@input="resetPriceSearch"
											@click.stop="
												() => {
													return false;
												}
											"
										></a-input>
										<div class="confirm">
											<button @click="searchPrice">确定</button>
										</div>
										<!-- </div> -->
									</div>
									<i @click="searchPrice">
										<span
											:style="{
												color: filterObj.price == '3000-4000' ? '#1890ff' : '',
											}"
											>3000-4000</span
										>
										<span
											:style="{
												color: filterObj.price == '4000-5000' ? '#1890ff' : '',
											}"
											>4000-5000</span
										>
										<span
											:style="{
												color: filterObj.price == '5000-6000' ? '#1890ff' : '',
											}"
											>5000-6000</span
										>
										<span
											:style="{
												color: filterObj.price == '6000-7000' ? '#1890ff' : '',
											}"
											>6000-7000</span
										>
									</i>
								</dd>
							</dl>
							<dl class="price">
								<dt>年龄：</dt>
								<dd>
									<div class="ageinputbox">
										<!-- <div> -->
										<a-input
											class="ageinput age"
											v-model="minAge"
											:maxLength="3"
											type="text"
											allow-clear
											suffix="岁"
											@input="resetAgeSearch"
											@click.stop="
												() => {
													return false;
												}
											"
										></a-input>
										<span class="middle-line">-</span>
										<a-input
											class="ageinput age"
											v-model="maxAge"
											:maxLength="3"
											type="text"
											allow-clear
											suffix="岁"
											@input="resetAgeSearch"
											@click.stop="
												() => {
													return false;
												}
											"
										></a-input>
										<div class="confirm">
											<button @click="searchAge">确定</button>
										</div>
										<!-- </div> -->
									</div>
								</dd>
							</dl>
							<dl>
								<dt>性别：</dt>
								<dd @click="searchGender">
									<span :style="{ color: filterObj.gender == '男' ? '#1890ff' : '' }">男</span>
									<span :style="{ color: filterObj.gender == '女' ? '#1890ff' : '' }">女</span>
									<span
										:style="{
											color: filterObj.gender == '男女不限' ? '#1890ff' : '',
										}"
										>男女不限</span
									>
								</dd>
							</dl>
							<dl>
								<dt>分类：</dt>
								<dd>
									<span v-for="(item, index) in classifyList" :key="index" :class="{ 'special-active': filterObj.specialactive.indexOf(item) > -1 }" @click.stop="classifyClick(index, item)">{{ item.name }}</span>
								</dd>
							</dl>
							<dl>
								<dt>薪资福利：</dt>
								<dd>
									<span
										v-for="(item, index) in tagArray1"
										:key="index"
										:class="{
											'special-active': filterObj.specialactive.indexOf(item) > -1,
										}"
										@click.stop="specialclick(index, item)"
										>{{ item.name }}</span
									>
								</dd>
							</dl>
							<dl>
								<dt>宿舍保障：</dt>
								<dd>
									<span
										v-for="(item, index) in tagArray3"
										:key="index"
										:class="{
											'special-active': filterObj.specialactive.indexOf(item) > -1,
										}"
										@click.stop="specialclick(index, item)"
										>{{ item.name }}</span
									>
								</dd>
							</dl>
							<dl>
								<dt>班制休息：</dt>
								<dd>
									<span
										v-for="(item, index) in tagArray0"
										:key="index"
										:class="{
											'special-active': filterObj.specialactive.indexOf(item) > -1,
										}"
										@click.stop="specialclick(index, item)"
										>{{ item.name }}</span
									>
								</dd>
							</dl>
							<dl>
								<dt>面试特色：</dt>
								<dd>
									<span
										v-for="(item, index) in tagArray4"
										:key="index"
										:class="{
											'special-active': filterObj.specialactive.indexOf(item) > -1,
										}"
										@click.stop="specialclick(index, item)"
										>{{ item.name }}</span
									>
								</dd>
							</dl>
							<dl>
								<dt>其他特色：</dt>
								<dd>
									<span
										v-for="(item, index) in tagArray2"
										:key="index"
										:class="{
											'special-active': filterObj.specialactive.indexOf(item) > -1,
										}"
										@click.stop="specialclick(index, item)"
										>{{ item.name }}</span
									>
								</dd>
							</dl>
						</div>
					</div>
					<div style="text-align: center">
						<a-spin tip="加载中..." :spinning="isspinning"></a-spin>
					</div>
					<!-- <div
						class="nodata"
						v-if="jobMainList.length === 0 && isspinning === false"
					>-->
					<template v-if="jobMainList.length === 0 && isspinning === false">
						<a-empty class="nodata" description="暂无符合条件的岗位" />
					</template>
					<!-- </div> -->

					<div v-if="!isspinning" style="border-radius: 6px;overflow: hidden;">
						<div class="list-obj" style="position: relative;">
							<div
								class="subset"
								v-for="(item, index) in jobMainList"
								:key="index"
								:style="{
									background: item.recruitment == '1' ? '#fff' : '#f5f5f5',
								}"
							>
								<!-- v-if="signType == ''" -->
								<div class="g_flex_row_between g_w_all item-obj">
									<span @click="toDetail(item)" style="cursor: pointer;width: 70%;">
										<div class="subsetleft">
											<!-- <div class="imgbox">
												<img v-if="item.logo.length !== 0" :src="item.logo" style="object-fit: cover; width: 156px; height: 156px" />
												<div v-else class="default_avatar">{{ item.brandName || item.jobName }}</div>
											</div> -->
											<div class="jobinfobox">
												<!-- <router-link
												target="_blank"
												:to="'/detail/' + item.id"
												rel="opener"
												>-->
												<div class="g_flex_row_start">
													<div class="jobname">{{ item.jobName }}</div>
													<div class="g_flex_column_end">
														<div style="color: #a1a1a1;font-size: 14px;margin-left: 15px;">{{ item.up_time }}</div>
													</div>
												</div>

												<!-- <div class="xmfDiv">
													<img src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/xmfb.svg" class="" alt="" />
													<span class="f12 ml4" style="color: #646572">{{ item.supplierName }}</span>
												</div> -->

												<!-- <img src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/ysd1.png" style="width: 20px;height: 20px;" alt=""> -->

												<!-- </router-link> -->
												<div class="jobinfo">
													<span>{{ item.storeDistrict ? item.storeDistrict + ' | ' : ''}}</span>
													<span>{{ item.gender }}</span>
													<span v-if="item.distance != null && item.distance != '' && formvalue.sortTag == 2">{{ item.distanceKm }}</span>
													<span v-else>{{ item.age }}</span>
												</div>
												<div class="jobtag">
													<!-- <span>返费</span> -->
													<!-- <i class="iconfont icon-ziying" v-if="item.signType == 1" style></i> -->
													<span class="hotTag" v-if="item.hotJob == 1">
														<i class="iconfont icon-dianzan1 mr0" style="font-size: 12px"></i>
														主推
													</span>
													<span v-for="(item1, index) in item.jobSpecialLabelNames" :key="index">{{ item1 }}</span>
													<span v-if="item.jobSpecialLabelNames.length == 0">暂无特色</span>
												</div>
												<div class="g_flex_row_start">
													<div class="jobpricehour" v-html="getSalaryClassifyValue(item.salaryClassify, item.salaryClassifyValue)"></div>
													<div class="g_flex_column_end" style="font-size: 16px">&nbsp;|&nbsp;</div>
													<div class="g_flex_column_end">
														<div class="jobpricemonth g_flex_column_end" v-if="item.minMonthlyPay" style="margin-left: 0;">
															<template v-if="signType != 1">
																<span>{{ item.minMonthlyPay ? item.minMonthlyPay / 100 : "" }}</span
																>-<span>{{ item.maxMonthlyPay ? item.maxMonthlyPay / 100 : "" }}</span
																>元/月
															</template>
															<template v-else>
																<span>{{ item.minMonthlyPay ? item.minMonthlyPay / 100 : "" }}</span
																>-<span>{{ item.maxMonthlyPay ? item.maxMonthlyPay / 100 : "" }}</span
																>元/月
															</template>
														</div>
													</div>
												</div>
											</div>
										</div>
									</span>
									<div class="subsetright">
										<div class="topContainer">
											<div class="updateTime" style="display: none">
												<span>更新时间：{{ item.updateTime || "--" }} ( {{ item.diffTime || "--" }} )</span>
											</div>
											<div class="topbox" v-if="false">
												<div>服务费</div>
												<div>{{ item.servetype }}</div>
											</div>

											<div class="fsa f12 pr4" style="background: linear-gradient(138deg,#fde0ad 22%, #fac474); border-radius:2px;color:#754300;line-height:24px;height: 24px;margin-top: 2px;">
												<div class>
													<img class="mr4" style="width:24px;height:24px;display:block" 
													src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/fee.svg"  lazy-load="false"></img>
												</div>
												<div class style="font-size:14px;font-weight: 400;">
													<!-- {{agencyStatus == 1 ? (item.fuWuFei ? item.fuWuFei : '-') : '仅代理可见'}} -->
													{{ item.servetype }}
												</div>
											</div>


										</div>
										<div class="bottombox1">
											<!-- <a-popover title="" trigger="click" placement="bottomRight">
												<template slot="content" class="jobDesp_content">
													<div :class="'copy' + index" @click="copyText($event, index)">复制</div>
													<span v-if="item.jobDesp" :class="'copyInfo' + index">{{ item.jobDesp }}</span
													><span v-else>暂无详单</span>
											</template>-->
											<a v-if="false">
												<button
													type="primary"
													class="jobDesp br4"
													:style="{
														background: item.recruitment == '1' ? '#fff' : '#f5f5f5',
													}"
													@click="toDetail(item)"
												>
													更多
												</button>
											</a>
											<!-- </a-popover> -->
											<div class="g_flex_row_end">
												<!-- <a-button shape="circle" type="danger" ghost>
													<template #icon> -->
														<a  v-if="item.customServiceUrl" :href="item.customServiceUrl || 'javascript:;'" target="_blank"  class="g_w_60 g_cursor_point">
															<div class="g_text_c g_w_all" style="height: 18px;overflow: hidden;line-height: 18px;">
																<a-icon type="message" class="g_fs_16" style="color: #666;" />
															</div>
															<div class="g_w_all" style="font-size: 12px;text-align: center;color: #666;zoom: 0.92;">联系客服</div>
														</a>
														<div class="g_w_60 g_cursor_point" @click="$message.error('此职位暂未接入客服')" v-else>
															<div class="g_text_c g_w_all" style="height: 18px;overflow: hidden;line-height: 18px;">
																<a-icon type="message" class="g_fs_16" style="color: #666;" />
															</div>
															<div class="g_w_all" style="font-size: 12px;text-align: center;color: #666;zoom: 0.92;">联系客服</div>
														</div>
													<!-- </template>
												</a-button>
												<a-button shape="circle" type="danger" ghost @click="toggleGhost" class="g_ml_12">
													<template #icon> -->
														<div class="g_w_40 g_cursor_point" v-if="false">
															<div class="g_text_c g_w_all" style="height: 18px;line-height: 18px;">
																<a-icon class="g_fs_17" style="color:#666;" type="star" />
															</div>
															<div class="g_w_all" style="font-size: 12px;text-align: center;color: #666;zoom: 0.92;">收藏</div>
														</div>
													<!-- </template> -->
												<!-- </a-button> -->
											</div>
											<a-button class="br4 g_ml_12" @click="torecord(item)" v-if="item.recruitment == '1'" type="primary" style="font-size: 13px;">立即报名</a-button>
											<button class="norecruitment" v-else>暂时停招</button>

											<!-- <button @click="showmodal(item)" @click="">报名</button> -->
										</div>
									</div>
								</div>
							</div>
							<div class="top-obj g_flex_c" 
									 style="width: 40px;height: 40px;background-color: #fff;border-radius: 50%;position: fixed;bottom: 100px;right: 30px;cursor: pointer;"
									 @click="totop"
							>
								<a-icon type="vertical-align-top" style="font-size: 20px;color: #1890ff;" data-title="点击返回顶部" />
							</div>
						</div>
						<div class="loading-ing g_pt_20 g_pb_20">
							<div class="g_w_all g_text_c g_fs_14">
								{{ speed == 1 ? '加载中' : '加载完成' }}
							</div>
							<div class="b-footer">
								<div>
									<span> 
										Powered by
										<svg class="svg_icon ml4" style="font-size: 46px; margin-top: -2px" aria-hidden="true">
											<use xlink:href="#icon-bocai2" />
										</svg>
										｜Copyright © 2015-2023 Bocai. All Rights Reserved.｜
									</span>
									<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">豫ICP备2023001993号-25A</a>
								</div>
							</div>
						</div>
					</div>
					<div class="pagecontainer f40" v-if="false">
						<a-pagination :current="+formvalue.pageNum" :default-current="1" :defaultPageSize="8" :total="formvalue.total" @change="pageChange" />
						<div class="ant-pagination-options-quick-jumper">
							跳至
							<input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" />页
						</div>
					</div>
				</div>
				<div class="maincontentright" v-if="false">
					<div class="dateinfo">
						<h1 class="bottombox">
							<i>我的日历</i>
						</h1>
						<p
							class="day"
							:style="{
								'font-size': '60px',
								color: '#1890ff',
								'line-height': '80px',
								'margin-top': '8px',
							}"
						>
							{{ dateinfo.day }}
						</p>
						<p class="week" :style="{ 'font-size': '16px', color: '#1890ff' }">{{ dateinfo.week }}</p>
						<p class="date" :style="{ 'font-size': '16px', color: '#1890ff' }">{{ dateinfo.date }}</p>
					</div>
					<div class="hotphone">
						<h1 class="bottombox" style>
							<i>伯才客服</i>
						</h1>
						<!-- <div class="fcsc"> -->

						<!-- <p>0371-6611 3723</p> -->
						<img style="width: 60px; height: 60px; border-radius: 50%; display: block; margin: 24px auto 0" :src="managerInfo.avatar || 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/service.jpg'" alt />
						<div style="color: #333; font-weight: 600">
							<p class="f16" style="margin-top: 10px">
								{{ managerInfo.name }}
								<i class="iconfont icon-dianhua1 ml4 f14" style="line-height: 24px; color: #1890ff"></i>
							</p>
							<p class="f16">{{ managerInfo.workPhone || "-" }}</p>
						</div>
						<!-- </div> -->
					</div>
					<!-- <div class="relationme">
						<p class="bottombox"><i>伯才合作</i></p>
						<button>发布伯才</button>
					</div>-->
					<recommend />
				</div>
			</div>
		</div>
		<recordModal :show.sync="recordShow" :jobDetail="currentInfo"></recordModal>
	</div>
</template>

<script>
import {
	JobListApi,
	JobListApiYicai,
	getJobSpecialApi,
	getProvinceApi,
	getHotCityApi,
	getCityWhichHasJobApi,
	getHotStoreApi,
	getClassifyListApi,
	getJobNumApi,
	// getCityApi,
} from "../../api/job";
import { getUserManagerApi } from "../../api/userinfo";
import $ from "jquery";

import { moneyToFixed, getSalaryClassifyValue, isNotEmptyCheck, disposeJobListData, setReturnFee,setJobInfoPosition } from "../../utils/commonUtil";
import recommend from "@/components/FirstJob/components/recommend.vue";
import { nationlist } from "../../utils/datalist";
import Clipboard from "clipboard";
// 报名弹窗
import recordModal from "./components/vocationalRecord.vue";
import { data } from "jquery";

// import PinYin from '../../utils/ChinesePY'
// import recordbill from "@/components/FirstJob/components/recordbill.vue";
export default {
	// 注入获取职位列表的方法
	inject: ["reload"],
	// 组件名称
	name: "",
	// 局部注册的组件
	components: {
		recommend,
		recordModal,
		// recordbill,
	},
	// 组件参数 接收来自父组件的数据
	props: {
		isspecialboxshow: {
			require: true,
		},
		formvalue: {
			// type: Object,
			require: true,
		},

		// isspinning: {
		// 	require: true,
		// }, // 加载中显示
	},
	// 组件状态值
	data() {
		return {
			isToggle:false,
			isFetching: false, // 标志位，防止重复加载
			speed:1,// 加载进度0 未加载 1加载中 2加载完成
			isStop:false,// 是否停止加载
			jobMainList: [], // 职位列表
      jobNum:0,
			recordShow: false,
			currentInfo: {}, // 当前点击的职位信息
			isLogin: false,
			isspinning: false,
			sortNum: 1, // 排序的标识
			sortStr: "工价优先",
			specialList: [], // 获取的特色列表
			classifyList: [], // 分类列表
			searchValue: "",
			specialvalue: [], // 点中的特色标签
			classifyvalue: [], // 点中的分类标签
			filterObj: {
				price: "", // 选中的价格搜索
				gender: "", // 选中的性别搜索
				specialactive: [], // 点中的特色标签索引
			},
			showDotted: false,
			visible: false, // 录单模态框的展示
			confirmLoading: false, // 录单提交的loading效果
			cityoption: [], // 城市列表
			hotCityList: [], // 热门城市列表
			hasJobCityList: {}, // 有职位的城市列表
			currentCityList: {}, // 当前首字母展示的城市列表
			minMonthlyPay: "",
			maxMonthlyPay: "",
			isdownHotStoreShow: false, // 热门企业下拉显示
			currentPage: "",
			currentCity: "全国",
			cityValue: "", // 城市输入框内容
			activeInd: -1,
			hotStoreList: [],
			newFormValue: [],
			apply: "", // 报名企业id
			filterStatus: 0, // 筛选开合状态
			filterHeight: "", // 筛选盒子高度
			signType: 0, // 自营三方类型(0全部,1自营,2三方)
      sortTag:0,
			tagArray0: [],
			tagArray1: [],
			tagArray2: [],
			tagArray3: [],
			tagArray4: [],
			proxyinfo: JSON.parse(localStorage.getItem("LOGIN_DATA")),
			nationlist: nationlist,
			specialHotTag: [],
			loginValue: {},
			dateinfo: {
				day: "",
				week: "",
				date: "",
			},

			options: {
				//
				price: [
					{
						value: "3000-4000",
						label: "3000-4000元",
						uid: 1,
					},
					{
						value: "4000-5000",
						label: "4000-5000元",
						uid: 1,
					},
					{
						value: "5000-6000",
						label: "5000-6000元",
						uid: 1,
					},
					{
						value: "6000-7000",
						label: "6000-7000元",
						uid: 1,
					},
				],
				age: [
					{
						value: "16-45",
						label: "16-45岁",
						uid: 2,
					},
					{
						value: "18-35",
						label: "18-35岁",
						uid: 2,
					},
					{
						value: "45-58",
						label: "45-58岁",
						uid: 2,
					},
					{
						value: "58",
						label: "58岁以上",
						uid: 2,
					},
				],
				gender: [
					{
						value: "1",
						label: "男",
						uid: 3,
					},
					{
						value: "2",
						label: "女",
						uid: 3,
					},
					{
						value: "-1",
						label: "男女不限",
						uid: 3,
					},
				],
			},
			relationList: [],
			lng: "",
			lat: "",
			minAge: "",
			maxAge: "",
			managerInfo: {},
			hasTab: false, //判断是不是从后台来的
		};
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {
		formvalue: {
			handler() {
				// console.log(e);
				// 筛选列表数据处理
				// if (e.district !== undefined) {
				// 	if (e.district.length === 0) {
				// 		document.getElementById("city").style.width = 85 + "px";
				// 	} else {
				// 		const result = e.district.join("");
				// console.log(result);
				// 		if (result.length > 6) {
				// 			document.getElementById("city").style.width = (result.length + 3) * 14 + "px";
				// 			document.getElementById("city").style.maxWidth = "210px";
				// 			document.querySelector("#city").nextElementSibling.style.width = (result.length + 3) * 14 + "px"; // 获取下一个兄弟元素s
				// 			document.getElementById("city").nextElementSibling.style.maxWidth = "210px";
				// 		} else if (result.length > 5) {
				// 			document.getElementById("city").style.width = (result.length + 2.8) * 14 + "px";
				// 			document.querySelector("#city").nextElementSibling.style.width = (result.length + 2.6) * 14 + "px";
				// 		} else if (result.length > 4) {
				// 			document.getElementById("city").style.width = (result.length + 2.4) * 14 + "px";
				// 			document.querySelector("#city").nextElementSibling.style.width = (result.length + 2.4) * 14 + "px";
				// 		} else {
				// 			document.getElementById("city").style.width = (result.length + 1.5) * 14 + "px";
				// 			document.getElementById("city").style.minWidth = 72 + "px";
				// 			document.querySelector("#city").nextElementSibling.style.width = (result.length + 1.5) * 14 + "px";
				// 		}
				// 	}
				// }
				// 工价的判断
				// if (e.monthlyPayStr.length == 0) {
				// document.getElementById("price").style.width = 60 + "px";
				// 	document.getElementById("price").style.minWidth = 60 + "px";
				// } else {
				// 	const result = e.monthlyPayStr.join("");
				// 	if (result.length >= 0) {
				// 		document.getElementById("price").style.width = "120px";
				// 		document.getElementById("price").nextElementSibling.style.width = "130px";
				// document.querySelector(".ant-cascader-picker-label").style.width =
				// "150px";
				// }
				// }
				// if (e.monthlyPayStr.length == 0) {
				// 	document.getElementById("price").style.width = 60 + "px";
				// 	document.getElementById("price").style.minWidth = 60 + "px";
				// } else {
				// 	const result = e.monthlyPayStr.join("");
				// 	if (result.length >= 0) {
				// 		document.getElementById("price").style.width = "120px";
				// 		document.getElementById("price").nextElementSibling.style.width = "130px";
				// 		// document.querySelector(".ant-cascader-picker-label").style.width =
				// 		// "150px";
				// 	}
				// }
				// if (e.sex.length == 0) {
				// 	document.getElementById("gender").style.width = 60 + "px";
				// 	document.getElementById("gender").style.minWidth = 60 + "px";
				// } else {
				// 	const result = e.sex.join("");
				// 	if (result.length >= 2) {
				// 		document.getElementById("gender").style.width = "90px";
				// 		document.getElementById("gender").nextElementSibling.style.width = "100px";
				// document.querySelector(".ant-cascader-picker-label").style.width =
				// "150px";
				// }
				// }
				// 年龄筛选长度的判断
				// if (e.ageStr.length === 0) {
				// 	document.getElementById("age").style.width = 60 + "px";
				// } else {
				// 	const result = e.ageStr.join("");
				// 	if (result.length >= 0) {
				// 		document.getElementById("age").style.width = "90px";
				// 		document.getElementById("age").nextElementSibling.style.width = "90px";
				// 		// document.querySelector(".ant-cascader-picker-label").style.width =
				// 		// "150px";
				// 	}
				// }
			},
			deep: true,
		},
		filterObj: {
			handler(newv) {
				var arr = Object.keys(newv);
				console.log(arr.length);
				if (arr.length + newv.specialactive.length - 1 > 6) {
					this.showDotted = true;
				} else {
					this.showDotted = false;
				}
			},
			deep: true,
		},
		"formvalue.pageNum"(val) {
			sessionStorage.removeItem("PAGE_TYPE");
		},
	},
	// 组件

	// 生命周期钩子   注：没用到的钩子请自行删除
	/**
	 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
	 */
	created() {
		// console.log(this.proxyinfo);
		console.log(this.$route);

		window.addEventListener("beforeunload", (e) => this.removePageInfo());
		if (sessionStorage.getItem("PAGE_TYPE")) {
			let info = JSON.parse(sessionStorage.getItem("PAGE_TYPE"));
			this.signType = info.signType ? info.signType : "";
			this.currentPage = info.pageNum ? info.pageNum : 1;
		}

		if (this.$route.query.tab == 1 || localStorage.getItem("hasTab")) {
			this.signType = 1;
			this.hasTab = true;
			//写入session缓存
			localStorage.setItem("hasTab", this.hasTab);
		}

		if (localStorage.getItem("LOGIN_DATA")) {
			this.isLogin = true;
		}
		if (this.currentPage) {
			// console.log(this.currentPage);
			this.formvalue.pageNum = this.currentPage;
		}
		if (this.signType == "") {
			this.getJobList();
			this.getJobNum();
		} else {
			this.getJobList();
		}
		this.getRecommendJob();

		this.getJobSpecial();
		this.getProvince();
		this.getdateinfo();
		this.getHotCity();
		this.getCityWhichHasJob();
		this.getHotStore();
		this.getClassifyList();
		this.getUserManager();
		this.hideFilterContent();
		if (isNotEmptyCheck(localStorage.getItem("POSITION_INFO"))) {
			let position = JSON.parse(localStorage.getItem("POSITION_INFO"));
			let diffTime = new Date().getTime() - JSON.parse(localStorage.getItem("POSITION_INFO")).timestamp;
			if (diffTime / 3600000 > 24) {
				this.getPosition();
			} else {
				this.lng = position.lng;
				this.lat = position.lat;
			}
		} else {
			this.getPosition();
		}
	},
	/**
	 * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
	 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
	 */
	mounted() {
		this.loginValue = localStorage.getItem("LOGIN_DATA") !== null ? JSON.parse(localStorage.getItem("LOGIN_DATA")) : { tel: "" };
		console.log(this.loginValue);
		window.addEventListener('scroll', this.handleScroll);
	},
	beforeDestroy() {
		console.log("beforeDestroy");
		// sessionStorage.removeItem("PAGE_TYPE")
		window.removeEventListener('scroll', this.handleScroll);
	},

	destroyed() {
		window.removeEventListener("beforeunload", (e) => this.removePageInfo(e));
	},
	// 组件方法
	methods: {
		// ... 其他方法
		handleScroll() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const windowHeight = document.documentElement.clientHeight;
    const scrollHeight = document.documentElement.scrollHeight;

    if (scrollTop + windowHeight >= scrollHeight - 100 && !this.isFetching && !this.isStop) { // 100 是一个阈值，可以根据需要调整
      this.isFetching = true;
			setTimeout(() => {
				this.speed = 1;
				this.loadMoreData();
			}, 300);
    }
  },
  loadMoreData() {
    this.formvalue.pageNum += 1; // 增加页码
    if (this.signType != 0) {
      this.getJobList({isScroll:1}).then(() => {
        this.isFetching = false;
      });
    } else {
      this.getJobList({isScroll:1}).then(() => {
        this.isFetching = false;
      });
    }
  },
		removePageInfo() {
			sessionStorage.removeItem("PAGE_TYPE");
		},
		// 处理筛选框的定位
		// filterbox() {
		//   return () => {
		//     return document.getElementById("filterbox")[0];
		//     // return document.body;
		//   };
		// },
		/**
		 * 获取登录人对应的客户经理信息
		 */
		getUserManager() {
			getUserManagerApi().then(({ data }) => {
				console.log(data);
				this.$store.commit("setManagerInfo", data.data);
				this.managerInfo = data.data;
				console.log("+++++++++++++++++++++++++", this.$store);
			});
		},
		async getRecommendJob() {
			this.isspinning = true;
			try {
				if (this.isLogin) {
					const { data } = await JobListApi({
						pageNum: 1,
						pageSize: 4,
						jobCategory: 608,
					});
					console.log(data.data.recordList);
					this.fellowList = disposeJobListData(data.data.recordList);
					// console.log(this.fellowList);
				}
				// this.$emit("update:relationList", this.relationList);
			} catch (error) {
				console.log(error);
			}
			this.isspinning = false;
		},
		async getJobList(newdata) {
			// this.isspinning = true;
			console.log('newdata',newdata);
			try {
				newdata = {
					district: "",
					monthlyPayStr: "",
					ageStr: "",
					jobRequestLabelIds: "",
					aliasName: "",
					pageNum: this.formvalue.pageNum, // 使用当前页码
					pageSize: 8,
					total: null, //分页配置
					isScroll: newdata && newdata.isScroll == 1 ? 1 : 0,
          sortTag: this.sortTag
				};
				for (var k in this.formvalue) {
					if (Array.isArray(this.formvalue[k])) {
						newdata[k] = this.formvalue[k].length > 0 ? this.formvalue[k].join() : "";
					} else {
						newdata[k] = this.formvalue[k];
					}
				}
				if (this.isLogin) {
					const { data } = await JobListApi(newdata);
					if (data.status === 200) {
						if(data.data.recordList.length < 8){
							// 停止加载
							this.isStop = true;
							this.speed = 2;
						}else{
							// 继续加载
							this.isStop = false;
							this.speed = 1;
						}
						data.data.recordList.forEach(item => { 
							item.up_time = this.timeShowXXX2(item.updateTime)
							item.storeDistrict = setJobInfoPosition(item.storeDistrict)
						})
						if(newdata.isScroll == 1){
							this.jobMainList = this.jobMainList.concat(disposeJobListData(data.data.recordList)); // 追加数据
						}else{
							this.jobMainList = disposeJobListData(data.data.recordList)
						}
						
						this.formvalue.total = data.data.recordCount;
					} else {
						this.$message.info("数据获取失败");
					}
				}
				// this.totop();
			} catch (error) {
				console.log(error);
			}
			this.isspinning = false;
		},
		timeShowXXX2(val){
			const now = Date.now();
			const diff = now - val;

			const seconds = Math.floor(diff / 1000);
			const minutes = Math.floor(seconds / 60);
			const hours = Math.floor(minutes / 60);
			const days = Math.floor(hours / 24);

			if (days < 2) {
					if (hours > 0) {
							return `${hours}小时前`;
					} else if (minutes > 0) {
							return `${minutes}分钟前`;
					} else {
							return `${seconds}秒前`;
					}
			} else {
					return `${days}天前`;
			}
		},
		async getJobListYicai(newdata) {
			// this.isspinning = true;
			console.log(this.formvalue);
			try {
				let aId = "";
				if (window.location.origin.indexOf("localhost:") > -1 || window.location.origin.indexOf("test.") > -1) {
					aId = "2743";
				} else {
					aId = "3087";
				}
				newdata = {
					agencyId: aId,
					recruitment: "1",
					keys: "",
					pageNum: this.formvalue.pageNum, // 使用当前页码
					pageSize: 8,
					total: null, //分页配置
				};
				for (var k in this.formvalue) {
					if (Array.isArray(this.formvalue[k])) {
						newdata[k] = this.formvalue[k].length > 0 ? this.formvalue[k].join() : "";
					} else {
						newdata[k] = this.formvalue[k];
					}
				}
				if (this.isLogin) {
					const { data } = await JobListApiYicai(newdata);
					if (data.status === 200) {
						this.jobMainList = this.jobMainList.concat(disposeJobListData(data.data.recordList)); // 追加数据
						this.jobMainList.forEach((item, index) => {
							if (item.jobType == 2) {
								item["servetype"] = setReturnFee(item.agencyReturnFee, item.agencyReturnFeeType);
							} else {
								item["servetype"] = setReturnFee(item.returnFee, item.returnFeeType);
							}
						});
						this.formvalue.total = data.data.recordCount;
					} else {
						this.$message.info("数据获取失败");
					}
				}
				// this.totop();
			} catch (error) {
				console.log(error);
			}
			this.isspinning = false;
		},
		async getJobNum() {
			const { data } = await getJobNumApi();
			this.jobNum = data.data;
			console.log('getJobNum',data);
		},

		//搜索企业名称
		onSearch() {
			// console.log(e);
			// if (typeof e === "string" || typeof e === "number") {
			//   if (e.length !== 0) {
			// console.log("zifuchuan ");
			//     this.formvalue.aliasName = e;
			//     this.getJobList();
			//   }
			// } else
			console.log(typeof this.searchValue.trim());
			// this.formvalue = {
			//   // 筛选的上传参数
			//   district: [], // 城镇数据
			//   monthlyPayStr: [], // 每月工资
			//   ageStr: '', // 年龄数据
			//   jobRequestLabelIds: [], // 特色标签索引
			//   aliasName: '',
			//   sex: [],
			//   pageNum: 1,
			//   pageSize: 8,
			//   total: null, //分页配置
			// }
			// this.formvalue.aliasName = "";
			this.formvalue.ageStr = "";
			if (this.searchValue.trim() !== "") {
				this.formvalue.pageNum = 1;
				console.log(this.searchValue);
				if (typeof +this.searchValue.trim() == "number" && !isNaN(+this.searchValue.trim())) {
					this.formvalue.ageStr = this.searchValue.trim();
					this.formvalue.keys = "";
				} else {
					// this.formvalue.aliasName = this.searchValue.trim();
					this.formvalue.keys = this.searchValue.trim();
					this.formvalue.ageStr = "";
				}
				// console.log("search1");
				// this.formvalue.aliasName = this.searchValue;
				// console.log(this.formvalue);

				if (this.formvalue.signType == 1) {
					this.getJobList();
				} else {
					this.getJobList();
				}
				this.isdownHotStoreShow = false;
			}

			// this.$router.push("/list").catch((err) => {
			// console.log(err);
			// });
		},
		// 搜索工价
		searchPrice(e) {
			console.log(e);
			this.formvalue.pageNum = 1;
			if (e.target.nodeName == "SPAN") {
				if (e.target.textContent == this.filterObj.price) {
					this.formvalue.monthlyPayStr = "";
					this.filterObj.price = "";
				} else {
					this.formvalue.monthlyPayStr = e.target.textContent;
					this.filterObj.price = this.formvalue.monthlyPayStr;
				}

				this.getJobList();
			} else if (e.target.nodeName == "BUTTON") {
				console.log(this.minMonthlyPay);
				console.log(this.maxMonthlyPay);
				if (this.minMonthlyPay.length != 0 && this.maxMonthlyPay.length != 0 && typeof +this.minMonthlyPay == "number" && typeof +this.maxMonthlyPay == "number" && !isNaN(+this.minMonthlyPay) && !isNaN(+this.maxMonthlyPay)) {
					this.formvalue.monthlyPayStr = this.minMonthlyPay + "-" + this.maxMonthlyPay;
					this.filterObj.price = this.formvalue.monthlyPayStr;
					this.getJobList();
				}
			}
		},
		/**
		 * 搜索年龄
		 */
		searchAge() {
			console.log(this.minAge);
			console.log(this.maxAge);
			if (this.minAge.length != 0 && this.maxAge.length != 0 && typeof +this.minAge == "number" && typeof +this.maxAge == "number" && !isNaN(+this.minAge) && !isNaN(+this.maxAge)) {
				let list = [this.minAge, this.maxAge];
				list.sort(function (a, b) {
					return a - b;
				});
				console.log(list);
				this.formvalue.ageRangeStr = list[0] + "-" + list[1];
				this.filterObj.age = this.formvalue.ageRangeStr;
				console.log(this.filterObj.age);
				this.getJobList();
			}
		},
		// 搜索性别
		searchGender(e) {
			console.log(e);
			if (e.target.tagName == "SPAN") {
				if (e.target.textContent == "男") {
					if (this.filterObj.gender == "男") {
						this.filterObj.gender = "";
						this.formvalue.sex = "";
					} else {
						this.filterObj.gender = "男";
						this.formvalue.sex = 1;
					}
				} else if (e.target.textContent == "女") {
					if (this.filterObj.gender == "女") {
						this.filterObj.gender = "";
						this.formvalue.sex = "";
					} else {
						this.filterObj.gender = "女";
						this.formvalue.sex = 2;
					}
				} else {
					if (this.filterObj.gender == "男女不限") {
						this.filterObj.gender = "";
						this.formvalue.sex = "";
					} else {
						this.filterObj.gender = "男女不限";
						this.formvalue.sex = -1;
					}
				}
				this.getJobList();
			}
		},
		// 获取职位特色
		getJobSpecial() {
			// var timestamp = new Date().getTime();
			console.log(new Date().getTime() - JSON.parse(localStorage.getItem("SPECIALLIST")));
			console.log(new Date(new Date().getTime() - JSON.parse(localStorage.getItem("SPECIALLIST"))));
			if (isNotEmptyCheck(localStorage.getItem("SPECIALLIST"))) {
				let diffTime = new Date().getTime() - JSON.parse(localStorage.getItem("SPECIALLIST")).timestamp;
				if (diffTime / 3600000 > 2) {
					console.log("======================", "needRequest");
					this.getJobSpecialList().then((res) => {
						this.specialList = res;
						this.specialList.forEach((item) => {
							if (item.typeClassify == "0") {
								this.tagArray0.push(item);
							} else if (item.typeClassify == "1") {
								this.tagArray1.push(item);
							} else if (item.typeClassify == "2") {
								this.tagArray2.push(item);
							} else if (item.typeClassify == "3") {
								this.tagArray3.push(item);
							} else if (item.typeClassify == "4") {
								this.tagArray4.push(item);
							}
							if (item.name == "大龄工" || item.name == "暑假工" || item.name == "长白班") {
								this.specialHotTag.push(item);
							}
						});
					});
				} else {
					this.specialList = JSON.parse(localStorage.getItem("SPECIALLIST")).data;
					console.log(diffTime);
					this.specialList.forEach((item) => {
						if (item.typeClassify == "0") {
							this.tagArray0.push(item);
						} else if (item.typeClassify == "1") {
							this.tagArray1.push(item);
						} else if (item.typeClassify == "2") {
							this.tagArray2.push(item);
						} else if (item.typeClassify == "3") {
							this.tagArray3.push(item);
						} else if (item.typeClassify == "4") {
							this.tagArray4.push(item);
						}
						if (item.name == "大龄工" || item.name == "暑假工" || item.name == "长白班") {
							this.specialHotTag.push(item);
						}
					});
				}
			} else {
				this.getJobSpecialList().then((res) => {
					this.specialList = res;
					this.specialList.forEach((item) => {
						if (item.typeClassify == "0") {
							this.tagArray0.push(item);
						} else if (item.typeClassify == "1") {
							this.tagArray1.push(item);
						} else if (item.typeClassify == "2") {
							this.tagArray2.push(item);
						} else if (item.typeClassify == "3") {
							this.tagArray3.push(item);
						} else if (item.typeClassify == "4") {
							this.tagArray4.push(item);
						}
						if (item.name == "大龄工" || item.name == "暑假工" || item.name == "长白班") {
							this.specialHotTag.push(item);
						}
					});
				});
			}
			this.$nextTick(() => {
				let fileterContent = document.querySelector(".filter-content");
				this.filterHeight = fileterContent.scrollHeight;
				// fileterContent.style.height = this.filterHeight + "px";
			});
		},
		// 改变自营三方类型
		changeTab(e) {
			this.formvalue.pageNum = 1
			if (e.target.dataset.type != undefined) {
				this.formvalue.pageNum = 1;
				// if (e.target.dataset.type != 0) {
				// 	this.formvalue.signType = this.signType = e.target.dataset.type;
				// 	this.getJobListYicai();
				// } else {
					this.formvalue.sortTag = this.sortTag = e.target.dataset.type;
					this.getJobList();
				//}
			}
		},
		async getJobSpecialList() {
			const { data } = await getJobSpecialApi();
			console.log(data);
			if (data.status == 200) {
				let container = {
					data: data.data,
					timestamp: new Date().getTime(),
				};
				// console.log(container.timestamp);
				localStorage.setItem("SPECIALLIST", JSON.stringify(container));
				return data.data;
			}
		},
		// 获取省份列表
		async getProvince() {
			// const that = this;
			try {
				const { data } = await getProvinceApi();
				// console.log(data);
				data.data.pop();
				this.cityoption = data.data;

				// console.log(this.cityoption);
				// console.log(data);
			} catch (error) {
				// console.log(error);
			}
		},
		// 筛选职位
		onChange() {
			// console.log(e);
			// console.log(item);
			// console.log(this.formvalue);
			// if (item) {
			// 	if (item.uid === 1) {
			// console.log(1);
			// 		this.formvalue.monthlyPayStr = item[0];
			// 	} else if (item.uid === 2) {
			// 		this.formvalue.ageStr = item[0];
			// 	} else if (item[0].id) {
			// console.log(e.join());
			// 		this.formvalue.district = e;
			// 	} else
			// if (item[0].uid == 3){
			// 		this.formvalue.sex = item[0].value;

			//   }
			// }
			this.getJobList();
		},
		pageChange(e) {
			console.log(e);
			this.formvalue.pageNum = e;
			this.$refs.pageinput.value = "";
			if (this.signType == 1) {
				this.getJobList();
			} else {
				this.getJobList();
			}
		},
		inputpageChange(e) {
			const pagenumcount = this.formvalue.total / this.formvalue.pageSize;
			// console.log(pagenumcount);
			if (e.target.value) {
				if (e.target.value > pagenumcount) {
					this.formvalue.pageNum = Math.ceil(pagenumcount);
				} else {
					this.formvalue.pageNum = e.target.value;
				}
			} else {
				this.formvalue.pageNum = 1;
			}
			this.getJobList();
			// console.log(e);
		},
		handleChange() {},
		claerfilter() {
			const { pageNum, pageSize, total } = this.formvalue;
			// this.formvalue = {  // 改变引用地址不会使vue侦听到数据的变化,
			//   district: [],
			//   monthlyPayStr: [],
			//   ageStr: [],
			//   jobRequestLabelIds: [],
			//   pageNum,
			//   pageSize,
			//   total, //分页配置
			// };
			this.formvalue.district = [];
			this.formvalue.monthlyPayStr = [];
			this.formvalue.ageStr = "";
			this.formvalue.jobRequestLabelIds = [];
			this.formvalue.aliasName = "";
			this.formvalue.cityName = "";
			this.formvalue.sex = [];
			this.formvalue.levelType = "";
			this.formvalue.hotStoreId = "";
			this.currentCity = "全国";
			this.formvalue.pageNum = pageNum;
			this.formvalue.pageSize = pageSize;
			this.formvalue.total = total;
			// console.log(this.formvalue);
			this.filterObj.specialactive = [];
			this.specialvalue = [];
			this.getJobList();
		},
		specialclick(index, item) {
			// console.log(item);
			// console.log(index);
			let arrIndex = this.filterObj.specialactive.indexOf(item);
			console.log("arrIndex1", arrIndex);
			if (arrIndex > -1) {
				this.filterObj.specialactive.splice(arrIndex, 1);
				this.specialvalue.splice(this.specialvalue.indexOf(item.id), 1);
			} else {
				this.filterObj.specialactive.push(item);
				this.specialvalue.push(item.id);
			}
			console.log("this.filterObj.specialactive", this.filterObj.specialactive);
			console.log("this.specialvalue", this.specialvalue);
			this.formvalue.jobRequestLabelIds = this.specialvalue;
			// console.log(this.filterObj.specialactive);
			this.getJobList();
			// console.log(this.specialvalue);
			// console.log(this.formvalue);
			// console.log(index);
		},
		classifyClick(index, item) {
			let arrIndex = this.filterObj.specialactive.indexOf(item);
			console.log("arrIndex", arrIndex);
			if (arrIndex > -1) {
				this.filterObj.specialactive.splice(arrIndex, 1);
				this.classifyvalue.splice(this.classifyvalue.indexOf(item.id), 1);
			} else {
				this.filterObj.specialactive.push(item);
				this.classifyvalue.push(item.id);
			}
			console.log("this.filterObj.specialactive", this.filterObj.specialactive);
			console.log("this.classifyvalue", this.classifyvalue);
			this.formvalue.jobCategoryLabelIds = this.classifyvalue;
			console.log(this.filterObj.specialactive);
			this.getJobList();
		},
		isspecialboxshowclick() {
			this.$emit("update:isspecialboxshow", !this.isspecialboxshow);
		},
		totop() {
			// console.log(window);
			document.body.scrollTop = 0;
			document.documentElement.scrollTop = 0;
			window.body.scrollY = 0;
		},
		moneyToFixed(value) {
			// console.log(value);
			return moneyToFixed(value);
		},
		// 重置搜索结果
		resetsearch(e) {
			// console.log(e);
			if (e.target.value.length === 0) {
				this.formvalue.aliasName = "";
				this.formvalue.keys = "";
				this.formvalue.ageStr = "";
				console.log("this.formvalue", this.formvalue);
				if (this.formvalue.signType == 1) {
					this.getJobList();
				} else {
					this.getJobList();
				}
			}
			// this.$router.push("/list").catch((err) => {
			// console.log(err);
			// });
		},
		delFilter(e, value, items) {
			console.log(e);
			console.log(items);
			if (value == "price") {
				this.filterObj.price = "";
				this.formvalue.monthlyPayStr = "";
				this.minMonthlyPay = "";
				this.maxMonthlyPay = "";
			} else if (value == "gender") {
				this.filterObj.gender = "";
				this.formvalue.sex = "";
			} else if (value == "age") {
				this.filterObj.age = "";
				this.formvalue.ageRangeStr = "";
				this.minAge = "";
				this.maxAge = "";
			} else {
				this.filterObj.specialactive.splice(this.filterObj.specialactive.indexOf(items), 1);
				if (this.classifyvalue.indexOf(items.id) != -1) {
					this.classifyvalue.splice(this.classifyvalue.indexOf(items.id), 1);
					this.formvalue.jobCategoryLabelIds = this.classifyvalue;
				} else {
					this.specialvalue.splice(this.specialvalue.indexOf(items.id), 1);
					this.formvalue.jobRequestLabelIds = this.specialvalue;
				}

				// if(this.filterObj.specialactive.indexOf(items) > -1){
				// }
			}
			this.getJobList();
		},
		resetPriceSearch(e) {
			// console.log(e.target.value);
			// console.log(+e.target.value);
			if (this.minMonthlyPay.length == 0 && this.maxMonthlyPay.length == 0) {
				this.formvalue.monthlyPayStr = "";
				this.filterObj.price = "";
				this.getJobList();
			} else if (typeof +e.target.value != "number" || isNaN(+e.target.value)) {
				this.$message.warning("请输入正确的价格");
			}
		},
		resetAgeSearch(e) {
			console.log(this.minAge);
			console.log(this.maxAge);
			if (this.minAge.length == 0 && this.maxAge.length == 0) {
				this.formvalue.ageRangeStr = "";
				this.filterObj.age = "";
				this.getJobList();
			} else if (typeof +e.target.value != "number" || isNaN(+e.target.value)) {
				this.$message.warning("请输入正确的价格");
			}
		},
		cityModalClose() {
			// 城市选择弹出框关闭
			this.cityValue = "";
			this.searchCity();
		},

		// 获取日期信息
		getdateinfo() {
			const date = new Date();
			// console.log(date);
			// console.log(date.getDate());
			// console.log(date.getDay());
			// console.log(date.getFullYear());
			// console.log(date.getMonth());
			if (date.getDay() === 1) {
				this.dateinfo.week = "星期一";
			} else if (date.getDay() === 2) {
				this.dateinfo.week = "星期二";
			} else if (date.getDay() === 3) {
				this.dateinfo.week = "星期三";
			} else if (date.getDay() === 4) {
				this.dateinfo.week = "星期四";
			} else if (date.getDay() === 5) {
				this.dateinfo.week = "星期五";
			} else if (date.getDay() === 6) {
				this.dateinfo.week = "星期六";
			} else if (date.getDay() === 7) {
				this.dateinfo.week = "星期日";
			}
			// console.log(date.getDate());
			// console.log(date.getDate().length);
			if (date.getDate().toString().length <= 1) {
				this.dateinfo.day = "0" + date.getDate();
				// console.log(this.dateinfo.day);
			} else {
				this.dateinfo.day = date.getDate();
				// console.log(this.dateinfo.day);
			}
			this.dateinfo.date = date.getFullYear() + "." + (date.getMonth() + 1);
		},
		// delmark(index) {
		// 	// console.log(index);
		// 	this.specialactive.splice(index, 1);
		// 	this.specialvalue.splice(index, 1);
		// 	this.getJobList();
		// },
		torecord(item) {
			// 跳转到路由新页面的方法
			// console.log(item);
			// let userinfo = JSON.stringify(item);
			sessionStorage.setItem("PAGE_TYPE", JSON.stringify({ id: item.id, pageNum: this.formvalue.pageNum, signType: this.signType, jobClassify: item.jobClassify }));

			if (this.signType == "") {
				this.$router.push({ name: "recordbill", params: item });
				sessionStorage.setItem("CURRENT_FIRM", JSON.stringify(item));
			} else if (this.signType == "1") {
				this.$router.push({ name: "recordbillYicai", params: item });
				sessionStorage.setItem("CURRENT_FIRM_YICAI", JSON.stringify(item));
			}
		},
		getSalaryClassifyValue(salaryClassify, salaryClassifyValue) {
			return getSalaryClassifyValue(salaryClassify, salaryClassifyValue);
		},
		async getHotCity() {
			try {
				const { data } = await getHotCityApi();
				// console.log(data);
				if (data.status == 200) {
					this.hotCityList = data.data;
					this.currentCityList = this.hotCityList;
				}
			} catch (error) {
				// console.log(error);
			}
		},
		async getCityWhichHasJob() {
			try {
				const { data } = await getCityWhichHasJobApi();
				console.log(data);
				if (data.status == 200) {
					let pinyinList = [];
					data.data.forEach((item) => {
						if (pinyinList.indexOf(item.firstLetter) == -1) {
							pinyinList.push(item.firstLetter);
						}
					});
					pinyinList.sort(); // 拼音首字母排序
					let firstList = [];
					let cityList = [];
					let num = -1;

					pinyinList.forEach((item, i) => {
						if (i % 5 == 0) {
							num++;
							firstList[num] = [];
						}
						firstList[num].push(item);
					});
					firstList.forEach((item, i) => {
						cityList[i] = [];

						item.forEach((item1) => {
							data.data.forEach((item2) => {
								if (item2.firstLetter == item1) {
									cityList[i].push(item2);
								}
							});
						});
					});
					this.hasJobCityList.firstList = firstList;
					this.hasJobCityList.cityList = cityList;
				}
			} catch (error) {
				// console.log(error);
			}
		},
		async getHotStore() {
			try {
				const { data } = await getHotStoreApi();
				// console.log(data);
				if (data.status == 200) {
					let middle = [];
					this.hotStoreList = data.data;
					this.hotStoreList.forEach((item, index) => {
						if (index <= 4) {
							middle.push(item);
						}
					});
					this.hotStoreList = middle;
					// console.log(this.hotStoreList);
				}
			} catch (error) {
				// console.log(error);
			}
		},
		async getClassifyList() {
			try {
				const { data } = await getClassifyListApi();
				console.log(data);
				if (data.status == 200) {
					console.log(data);
					this.classifyList = data.data.labels;
					this.$nextTick(() => {
						let fileterContent = document.querySelector(".filter-content");
						if (isNotEmptyCheck(fileterContent.scrollHeight)) {
							this.filterHeight = fileterContent.scrollHeight;
						}
						// fileterContent.style.height = this.filterHeight + "px";
					});
				}
			} catch (error) {
				// console.log(error);
			}
		},
		changeCurrentCity(index) {
			this.currentCityList = this.hasJobCityList.cityList[index];
			// console.log(index);
		},
		searchCity() {
			this.currentCityList = [];
			if (this.cityValue) {
				this.hotCityList.forEach((item) => {
					// console.log(item);
					// console.log(item.name.indexOf(this.cityValue));
					if (item.name.indexOf(this.cityValue) > -1) {
						// console.log(123);
						this.currentCityList.push(item);
					}
				});
			}
			if (this.currentCityList.length == 0) {
				this.currentCityList = this.hotCityList;
			}
		},
		resetCityList(e) {
			if (e.target.value.length === 0) {
				this.cityValue = "";
				this.currentCityList = this.hotCityList;
			}
		},
		searchJob(item) {
			// console.log(item);
			this.formvalue.pageNum = 1;
			if (item.levelType == 1) {
				this.formvalue.cityName = "";
				this.formvalue.provinceName = item.name;
			} else {
				this.formvalue.provinceName = "";
				this.formvalue.cityName = item.name;
			}
			this.formvalue.levelType = item.levelType;
			this.currentCity = item.name;
			// this.getJobList();
			this.visible = false;
			console.log("this.formvalue.signType", this.formvalue.signType);
			if (this.signType != 0) {
				this.getJobList();
			} else {
				this.getJobList();
			}
		},
		getHotStoreList(item) {
			// console.log(item);
			this.searchValue = item.storeName;
			this.formvalue.keys = item.storeName;

			this.isdownHotStoreShow = false;
			// this.formvalue.hotStoreId = item.storeId;
			this.getJobList();
		},
		resetResult() {
			this.formvalue.cityName = "";
			this.formvalue.levelType = "";
			this.formvalue.hotStoreId = "";
			this.currentCity = "全国";
			// console.log(this.formvalue);
			// this.getJobList();
			if (this.formvalue.signType != 0) {
				this.getJobList();
			} else {
				this.getJobList();
			}
		},
		copyText(event, ind) {
			// 复制文本内容
			var clipboard = new Clipboard(".copy" + ind, {
				// .copy 是点击的触发元素
				target: function () {
					// 通过target指定要复印的节点
					return document.querySelector(".copyInfo" + ind); // .copyInfo 是要复制的目标内容
				},
			});
			// console.log(clipboard);
			// if(){

			// }
			clipboard.on("success", () => {
				// success 是成功的回调 success => error 可以捕获复制失败的异常信息
				// console.log(123);
				// console.log(e);
				this.$message.success("复制成功");
				clipboard.destroy();
			});
		},
		showHotStore() {
			// 显示热门企业下拉
			// console.log("isinner");
			this.isdownHotStoreShow = true;
		},
		hidedownHotStore() {
			// console.log("isdown");
			this.isdownHotStoreShow = false;
		},
		resetCity() {
			// 重置当前城市
			this.currentCity = "全国";
			this.formvalue.cityName = "";
			this.formvalue.levelType = "";
			this.formvalue.provinceName = "";
			// this.getJobList();
			if (this.formvalue.signType != 0) {
				this.getJobList();
			} else {
				this.getJobList();
			}
		},
		/**
		 * 前往详情页
		 */
		toDetail(item) {
			// :to="signType == '' ? '/detail?id=' + item.id + '&page=' + formvalue.pageNum : '/detailYicai?id=' + item.id + '&page=' + formvalue.pageNum"
			sessionStorage.setItem("PAGE_TYPE", JSON.stringify({ id: item.id, pageNum: this.formvalue.pageNum, signType: this.signType, jobClassify: item.jobClassify }));

			const routeURL = this.$router.resolve({
				name: this.signType == "" ? "Detail" : "DetailYicai",
				// query: item.id,
			});
			window.open(routeURL.href, "_blank");
			console.log(item);
		},
		hideFilterContent() {
			setTimeout(() => {
				let fileterContent = document.querySelector(".filter-content");
				// console.log(fileterContent)
				// fileterContent.style.transition = 'all .2s'
				if (this.filterStatus == 0) {
					console.log("is in the 0 zone");
					this.filterStatus = 1;
					fileterContent.style.height = "0px";
				} else {
					console.log("is in the 1 zone");

					this.filterStatus = 0;
					fileterContent.style.height = this.filterHeight + "px";
				}
			}, 0);
		},
		/**
		 * 获取当前位置信息
		 *
		 *
		 */
		getPosition() {
			let that = this;
			$.ajax({
				url: "https://restapi.amap.com/v3/ip?key=44c6ad3624a5957505fec66f6bdd6110",
				// type: "GET",
				dataType: "JSONP",
				success: function (data) {
					console.log(data);
					let position = data.rectangle.split(";");
					console.log(position);
					var lng1;
					var lng2;
					position.forEach((item, index) => {
						if (index == 0) {
							lng1 = item.split(",");
						} else if (index == 1) {
							lng2 = item.split(",");
						}
					});

					that.lng = (+lng1[0] + +lng2[0]) / 2;
					that.lat = (+lng1[1] + +lng2[1]) / 2;
					localStorage.setItem("POSITION_INFO", JSON.stringify({ lng: that.lng, lat: that.lat, timestamp: new Date().getTime() }));
					//      lng: '',
					// lat: '',
					// let code = cityList.find((item) => {
					//   return item.city == data.city
					// }).code
				},
			});
		},
		sortList(type) {
			console.log(type);
			this.formvalue.lng = "";
			this.formvalue.lat = "";
			if (type == "juli") {
				this.formvalue.sortTag = 2;
				this.sortNum = 2;
				this.sortStr = "距离优先";
				this.formvalue.lng = this.lng;
				this.formvalue.lat = this.lat;
			} else if (type == "fuwufei") {
				this.sortNum = 3;
				this.sortStr = "佣金优先";
				this.formvalue.sortTag = 3;
			} else if (type == "price") {
				this.sortNum = 1;
				this.sortStr = "工价优先";
				this.formvalue.sortTag = 1;
			}
			this.getJobList();
		},

		/**
		 * 职教职培报名点击
		 */
		showRecord(info) {
			console.log(info);
			this.currentInfo = info;
			this.recordShow = true;
			// window.open(`https://jinshuju.net/f/ohFOxo?x_field_1=${this.currentInfo.vocationalName}&background=white&banner=show&embedded=true&inner_redirect=false`);
			// console.log("this.recordShow", this.recordShow);
			// console.log("this.currentInfo", this.currentInfo);
		},
		handleToggle(e){
			this.isToggle = !this.isToggle
		}
	},
};
</script>

<style scoped lang="less">
.joblist-container {
	background-color: #f0f0f0;
	padding-top: 56px;
}
// .dropdown {
// 	display: inline-block;
// 	width: 100px;
// 	height: 32px;
// 	line-height: 30px;
// 	font-size: 16px;
// 	// border: 1px solid rgba(77, 87, 94, 0.3);
// 	border-radius: 4px;
// 	margin-left: 16px;
// 	border: 1px solid #1890ff;
// 	background-color: #fff;
// 	color: rgba(255, 106, 0, 1);
// 	text-align: center;
// 	cursor: pointer;
// 	&:hover {
// 		color: #fff;

// 		background-color: #ff791a;
// 	}
// }
/deep/ .ant-drawer-content {
	box-sizing: border-box;
}
// 录单模态框样式
/deep/ .ant-drawer-wrapper-body {
	// overflow: none;
	// position: relative;
	&::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
		height: 4px;
	}

	.ant-drawer-header {
		position: absolute;
		width: 100%;
		background-color: #fff;
		padding: 12px 24px;
		z-index: 999;
		.ant-drawer-close {
			height: 48px;
			width: 48px;
			line-height: 48px;
		}
	}
	.ant-drawer-body {
		overflow-y: auto;
		margin-top: 47px;
	}
}

/deep/ .ant-form {
	// overflow: auto;
	margin-bottom: 50px;
}

/deep/ .ant-form-item {
	// margin-bottom: 0;
	display: flex;
	justify-content: start;
	align-items: middle;
	margin-top: -8px;
	.ant-form-item-label {
		line-height: 40px;
		// font-weight: bold;
	}

	.ant-input {
		// width: 430px;
		height: 40px;
		// border: none;
		border: 1px solid #dddddd;
		box-shadow: none !important;
		// background-color: #f6f6f6;
	}
	.ant-select-selection__rendered,
	.ant-select-selection--single,
	.ant-select {
		height: 40px;
		// border: none;
		// border: 1px solid #dddddd;
		line-height: 40px;
		box-shadow: none !important;
		border-color: #d9d9d9;
		/deep/ .ant-form-item-children {
			line-height: 40px;
			// .ant-radio-checked {
			// }
			// display: flex !important;
		}
		// &:hover {
		//   border-color: #d9d9d9;
		// }
		// &:focus {
		//   border-color: #d9d9d9;
		// }
		// &:active {
		//   border-color: #d9d9d9;
		// }
	}
}
// /deep/ .ant-modal-footer {
//   padding: 10px 24px;
//   .ant-btn {
//     box-shadow: none;
//     &:hover {
//       color: #1890ff;
//       border-color: #1890ff;
//     }
//   }
//   .ant-btn.ant-btn-primary {
//     background-color: #1890ff !important;
//     border: none;
//     line-height: 32px;
//     margin-left: 12px;
//     color: #fff;
//     box-shadow: none;
//     &:hover {
//       background-color: #ff8025 !important;
//     }
//   }
// }
/deep/ .ant-modal-header {
	.ant-modal-title {
		font-size: 20px;
		// font-weight: normal;
	}
}
/deep/ .ant-drawer-body {
	overflow: auto;
	padding: 20px 16px 8px 16px;
}

/deep/ .navigation {
	// margin-top: -1px;
	width: 100vw;
	padding: 25px 0 64px 0;
	background-color: #f0f0f0;
	// border: 1px solid #f6f6f6;
	// height: 72px;
	// margin-bottom: 10px;
	// line-height: 100px;
	
	position: relative;
	z-index: 9;
	.special-active {
		color: rgb(254, 97, 0) !important;
		background-color: rgba(255, 106, 0, 0.1) !important;
	}
	.ant-cascader-picker-focused {
		input {
			transition: all 0.3s;
		}
		input::placeholder {
			color: rgb(255, 106, 0) !important;
		}
		i {
			color: rgb(255, 106, 0) !important;
		}
	}
	> .w {
		// height: 72px;
		background-color: #f0f0f0;
		display: flex;
		justify-content: center;
		// flex-direction: column;
		.icon {
			width: 90px;
			height: auto;
			margin-top: 6px;
		}
		.searchBox {
			position: relative;
			// margin-left: 100px;
			width: 640px;
			line-height: 44px;
			z-index: 10;
			.hotStore {
				position: absolute;
				top: 46px;
				left: 0px;
				line-height: 24px;
				// margin: 8px 0 12px 0;
				font-size: 14px;
				display: flex;
				> span {
					width: 80px;
				}
				ul {
					display: flex;
					flex-wrap: wrap;
					flex: 1;
					li {
						color: #1890ff;
						margin-right: 20px;
						overflow: hidden;
						cursor: pointer;
						&:hover {
							color: #ff8f3f;
						}
						&:active {
							color: #e24f00;
						}
						// &:nth-child(-n + 5) {
						// 	display: none;
						// }
					}
				}
			}
			.downHotStore {
				position: absolute;
				width: 685px;
				top: 44px;
				left: 0;
				z-index: 99;
				// border-radius: 8px;
				background-color: #fff;
				border: 1px solid #eee;
				div {
					padding: 0 12px;
				}
				li {
					height: 42px;
					line-height: 42px;
					padding: 0 12px;
					font-size: 14px;
					cursor: pointer;
					&:hover {
						color: #1890ff;
					}
				}
				li:not(:last-child) {
					border-bottom: 1px solid #eee;
				}
			}
		}
		.searchinput {
			// margin-top: 19px;
			// margin-right: 285px;
			// width: 685px;
			// height: 44px;
			&.ant-input-affix-wrapper {
				// width: 772px;
				position: relative;
				.ant-input-prefix {
					position: absolute;
					height: 86%;
					width: 80px;
					left: 4px;
					top: 50%;
					padding: 0 8px;
					background-color: #fff;
					transform: translateY(-50%);
					cursor: pointer;
					&::after {
						content: "";
						position: absolute;
						width: 1px;
						height: 50%;
						background-color: #eee;
						right: 0px;
						top: 50%;
						transform: translateY(-50%);
					}
					> div {
						position: relative;
						&:hover .icon-guanbishixin {
							opacity: 1;
						}
						&:hover {
							opacity: 0.6;
						}
						> span {
							display: inline-block;
							text-align: center;
							user-select: none;
							width: 60px;
						}
						i {
							display: inline-block;
							transform: scale(0.6);
							transition: opacity 0.1s;
							font-size: 12px;
							color: #c5c5c5;
						}
						.icon-guanbishixin {
							position: absolute;
							right: 0;
							top: 3px;
							opacity: 0;
							transform: scale(1.4);
						}
					}
				}
				.ant-input-suffix {
					right: 0px !important;
					.ant-input-clear-icon {
						margin-right: 20px;
						width: 1.5em !important;
						height: 1.5em !important;
						> svg {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			> .ant-input {
				height: 40px;
				text-indent: 60px;
				background: #fff;
				border: 2px solid #1890ff;
				border-radius: 6px;
				box-shadow: 0px 2px 4px 0px transparent;
				font-size: 14px !important;
				padding-right: 0;
				// border-color: #e9e9e9;
				&::placeholder {
					// text-indent: 30px;
					font-size: 14px !important;
				}
				&:hover {
					border-color: #2395ff;
					box-shadow: none;
				}
				&:focus {
					border-color: #2395ff;
				}
			}
			button {
				width: 80px;
				height: 40px;
				color: white;
				background: #1890ff;
				border-color: #1890ff;
				border: none;
				// border-radius: 999px;
				font-size: 16px;
				box-shadow: none;
				cursor: pointer;
				outline: none;
				&:hover {
					background-color: #1890ff;
				}
				// &:focus {
				//   border: none;
				// }
			}
		}
		.specialbox {
			position: absolute;
			border-bottom: 1px solid #f6f6f6;
			box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
			// display: ;
			transition: all 0.4s;
			left: 0;
			top: 45px;
			width: 100vw;
			background-color: #fff;
			z-index: 99;
			ul {
				overflow: hidden;
				padding: 20px 0 8px 0;
				li {
					padding: 4px 16px;
					margin: 0px 16px 12px 0;
					cursor: pointer;
					float: left;
					background: rgba(216, 216, 216, 0.3);
					// border-radius: 15px;
					font-size: 14px;
					color: #4d575e;
					line-height: 22px;
					&:hover {
						color: rgb(254, 97, 0);
						background-color: rgba(255, 106, 0, 0.1);
					}
				}
			}
		}

		.filterbox {
			display: flex;
			justify-content: flex-start;
			min-width: 664px;
			> li {
				// margin-top: 22px;
				font-size: 14px;
				color: #4d575e;
				margin-right: 4px;
				line-height: 44px;
				.ant-cascader-picker {
					width: auto;
					position: relative;
					transform: translateY(-2px);
					.anticon-close-circle {
						font-size: 14px;
					}
					.icon-xiala {
						font-size: 12px;
						transform: translateY(1px) scale(0.5);
					}
					.ant-cascader-input {
						width: 60px;
						height: 40px;
						// line-height: 40px;
						// margin-top: -5px;
						// max-width: 150px !important;
						border: none;
						padding: 0;
						// margin-bottom: 6px;
						box-shadow: none;

						&::placeholder {
							// width: auto;
							// text-indent: 20px;
							color: #4d575ecc;
							// line-height: 20px;
							font-size: 14px;
						}
					}

					span {
						width: 60px;
						// max-width: 150px;
						color: rgb(255, 106, 0) !important;
						font-size: 14px;
						padding: 0 20px 0 0;
						text-align: left;
						// line-height: 22px !important;
					}
				}
			}
			> li:not(.ageinputbox) {
				padding-top: 4px;
			}

			.ageinputbox {
				position: relative;

				&:hover .confirm {
					display: block;
				}

				.ageinput.age {
					position: relative;
					z-index: 3;
					padding: 0;
					padding-top: 8px;
					margin: 0 5px;
					height: 32px;
					width: 90px;
					text-indent: 10px;
					border-color: #e9e9e9;
					&:hover {
						input {
							border-color: #1890ff;
						}
					}
					input {
						// border-radius: 999px;
						padding-right: unset;
						&::placeholder {
							// text-indent: 30px;
							font-size: 14px !important;
						}
						&:hover {
							border-color: #1890ff;
							box-shadow: none;
						}
						&:focus {
							border-color: #1890ff;
							box-shadow: none;
						}
					}
					.ant-input-suffix {
						right: 0px;
						top: 76%;
					}
				}
				.confirm {
					position: absolute;
					display: none;
					width: 160px;
					height: 48px;
					line-height: 44px;
					left: 8px;
					top: 0;
					z-index: 1;
					border: 1px solid #eee;
					background-color: #fff;
					box-shadow: 0 5px 10px 5px #eee;
					button {
						position: relative;
						width: 44px;
						height: 28px;
						line-height: 26px;
						top: 50%;
						transform: translateY(-50%);
						margin-right: 8px;
						float: right;
						background-color: #1890ff;
						border: none;
						color: #fff;
						&:hover {
							background-color: #1890ffdd;
						}
						&:active {
							background-color: #1890ffdd;
						}
					}
				}
			}
			> li:first-child {
				> div {
					display: flex;
					// line-height: 40px;
					margin-top: -2px;
					margin-right: 12px;
					cursor: pointer;
					span {
						margin-right: 12px;
					}
				}
			}

			.claerfilter {
				position: relative;
				color: #8c8d8f;
				font-size: 14px;
				margin: 0px 10px 0 10px;
				// color: rgba(78, 88, 95, 0.8);
				transform: translateY(-1px);
				// margin-left: 25px;
				a {
					display: inline-block;
					// margin-top: 4px;
					transition: all 0.5s;
					// line-height: 14px;
					&:active {
						color: #ff6a00;
						transition: none;
					}
				}
			}
		}
		.hotTag {
			display: flex;
			line-height: 44px;
			margin-left: 18px;
			div {
				font-size: 14px;
			}
			li {
				margin-right: 12px;
				color: #ff6a00;
				font-size: 14px;
				cursor: pointer;
			}
			> .active {
				text-decoration: underline;
			}
		}
	}
	.ant-input{
		border-color: #c4c7ce !important;
		&:hover{
			border-color: #a7aab5 !important;
		}
		&:focus{
			border-color: #4e6ef2 !important;
		}
	}
}

/deep/ #maincontent {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	background-color: #f0f0f0;
	.maincontentleft {
		width: 800px;
		margin-right: 16px;
		text-align: left;
		position: relative;
		.tabBar {
			position: absolute;
			display: flex;
			justify-content: start;
			align-items: center;
			width: 100%;
			top: -40px;
			text-align: center;
			line-height: 40px;
			border-bottom: 2px solid #1890ff;
			z-index: 999;
			font-size: 16px;
			.tabSubset {
				width: 80px;
				height: 32px;
				line-height: 32px;
				border-radius: 6px 6px 0px 0px;
				cursor: pointer;
				&.active {
					background-color: #1890ff;
					color: #fff;
				}
			}
		}
		
		

		.nodata {
			overflow: hidden;
			height: 230px;
			padding-top: 30px;
			text-align: center;
			background-color: #fff;
			// border-radius: 5px;
			margin: 0 auto;
			color: #00000066;
			margin-bottom: 20px;
			p {
				position: relative;
				transform: translateY(35px);
			}
		} 
		.subset {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #ededed;
			background: #ffffff;
			transition: all 0.2s;
			// border: 1px solid transparent;
			overflow: hidden;
			.item-obj{
				transition: all 0.2s;
				padding: 16px;
			}
			&:hover {
				.item-obj{
					transform: scale(1.02);
					// box-shadow: 0 2px 12px 0 red
				}
			}
			.subsetleft {
				display: flex;
				.imgbox {
					width: 156px;
					height: 156px;
					margin-right: 16px;
					position: relative;
					overflow: hidden;
					img {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-50%) translateY(-50%);

						// width: 100%;
						height: 100%;
					}
					.default_avatar {
						width: 156px;
						height: 156px;
						display: flex;
						align-items: center;
						text-align: center;
						background-color: #d85043;
						color: #fff;
						font-size: 44px;
						line-height: 1.3;
					}
				}
				.jobinfobox {
					.jobname {
						// margin: 12px 0;
						font-size: 18px;
						font-weight: 600;
						text-align: left;
						color: #333;
						line-height: 26px;
						&:hover {
							color: #1890ff;
						}
					}
					.jobinfo {
						margin-top: 8px;
						// opacity: 0.5;
						font-size: 14px;
						font-weight: 400;
						text-align: left;
						color: #999;
						line-height: 20px;
					}
					.jobtag {
						display: flex;
						margin-top: 10px;
						align-items: center;
						text-align: left;
						// span:first-child {
						//   color: #1890ff;
						//   background: rgba(254, 97, 0, 0.1);
						// }
						i {
							margin-right: 8px;
							color: #1890ff;
							font-size: 20px;
						}
						span {
							// height: 20px;
							margin-right: 8px;
							line-height: 1;
							font-size: 14px;
							padding: 4px 8px;
							background: rgba(51, 51, 51, 0.06);
							border-radius: 2px;
							color: #666666;
						}
						.hotTag {
							background-color: #1890ff;
							color: #fff;
							font-size: 12px;
							padding: 4px;
							i {
								margin-right: 4px;
								color: #fff;
							}
						}
					}
					.jobpricemonth {
						display: inline-block;
						margin-top: 10px;
						font-size: 14px;
						font-weight: 400;
						text-align: left;
						color: #333;
						line-height: 20px;
						margin-left: 8px;
					}
					.xmfDiv {
						display: inline-block;
						height: 20px;
						margin-top: 4px;
						background: #f1faff;
						border-radius: 2px;
						line-height: 16px;
						padding-right: 4px;
					}
					.jobpricehour {
						margin-top: 8px;
						font-size: 14px;
						font-weight: normal;
						text-align: left;
						color: #ff4400;
						display: inline-block;
						// line-height: 24px;
						font-weight: 600;
						span {
							vertical-align: baseline;
							font-size: 22px;
							line-height: 28px;
						}
						i {
							font-size: 18px;
							line-height: 28px;
						}
					}
				}
			}
			.subsetright {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;
				.topContainer {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;
					// margin-top: -8px;
				}
				.updateTime {
					line-height: 1;
					font-size: 14px;
					color: #999;
				}
				.topbox {
					width: 100px;
					height: 48px;
					margin-top: 8px;
					overflow: hidden;
					text-align: center;
					// border-radius: 4px;
					border-radius: 4px;
					line-height: 26px;
					div {
						// font-weight: normal;
						font-size: 16px;
						span {
							font-size: 20px;
							// font-weight: normal;
						}
					}
					div:first-child {
						height: 22px;
						background: #ff4400;
						line-height: 21px;
						font-size: 14px;
						color: #ffffff;
						border: 1px solid #ff4400;
						// border-radius: 4px 4px 0px 0px;
					}
					div:last-child {
						font-weight: normal;
						background-color: #ff6a001a;
						color: #ff4400 !important;
					}
				}
				.bottombox1 {
					display: flex;
					align-items: center;
					.jobDesp {
						border: 1px solid #1890ff;
						background-color: #fff;
						color: #1890ff;
						transition: none;
						box-shadow: none;
						text-shadow: none;
						cursor: pointer;
						&:hover {
							color: #fff;

							background-color: #1890ff;
						}
					}
					button {
						min-width: 80px;
						height: 32px;
						font-size: 16px;
						// border: 1px solid rgba(77, 87, 94, 0.3);
						// border-radius: 4px;
					}
					> a {
						button:first-child {
							border: 1px solid #d9d9d9;
							// border-radius: 4px;
							color: #4d575e;
							background-color: #fff;
							cursor: pointer;
							&:hover {
								color: #1890ff;
								border-color: #1890ff;
								background-color: #fff;
							}
						}
					}

					.apply {
						margin-left: 16px;
						border: 1px solid #1890ff;
						padding: 0 16px;
						background-color: #fff;
						color: #1890ff;
						cursor: pointer;
						&:hover {
							color: #fff;

							background-color: #1890ff;
						}
					}
				}
			}
			.norecruitment {
				background-color: #f5f5f5;
				border: 1px solid #ccc;
				margin-left: 16px;

				color: #ccc;
			}
		}
		// .pagecontainer {
		//   display: flex;
		//   justify-content: center;
		//   text-align: center;
		//   margin-bottom: 30px;
		//   .ant-pagination-options-quick-jumper {
		//     margin-left: 10px;
		//     font-size: 16px;
		//   }
		//   .ant-pagination-disabled {
		//     a:hover {
		//       color: #c5c5c5 !important;
		//     }
		//   }
		//   .ant-pagination-next,
		//   .ant-pagination-prev {
		//     a:hover {
		//       color: #1890ff;
		//     }
		//   }
		//   input[type="text"] {
		//     box-shadow: none;
		//     &:focus {
		//       border: 1px solid #1890ff;
		//     }
		//     &:hover {
		//       border: 1px solid #1890ff;
		//     }
		//   }
		//   .ant-pagination-item {
		//     border: none;
		//     a:hover {
		//       color: #1890ff;
		//     }
		//   }
		//   .ant-pagination-item-active {
		//     background: #1890ff;
		//     a {
		//       color: white;
		//     }
		//     a:hover {
		//       color: white;
		//     }
		//   }
		//   .ant-pagination-item-link {
		//     border: none;
		//   }
		// }
	}
	.maincontentright {
		width: 240px;
		position: relative;
		top: -42px;
		> div {
			margin-bottom: 16px;
			border: 1px solid #ededed;
			border-radius: 6px;
		}
		.dateinfo {
			text-align: center;
			overflow: hidden;
			border-radius: 6px;
			border: none;
			position: relative;
			padding-bottom: 10px;
			background-color: #f4faff;
			.bottombox {
				position: relative;
				margin-top: 0;
				margin-bottom: 0;
				// padding-top: 10px;
				height: 44px;
				padding: 0;
				line-height: 44px;
				font-size: 16px;
				font-weight: 600;
				border-bottom: none;
				color: #fff;
				background-color: #1890ff;
				z-index: 10;
				&::after {
					left: 0;
					// display: none;
				}
			}
		}
		.hotphone {
			overflow: hidden;
			position: relative;
			width: 240px;
			height: 210px;
			// height: 114px;
			// padding: 0 20px 20px 20px;
			border-radius: 6px;
			background-color: #fff;
			text-align: center;
			.bottombox {
				font-size: 16px;
				font-weight: 600;
			}
		}
		.relationme {
			overflow: hidden;
			position: relative;
			width: 240px;
			height: 160px;
			padding: 0 20px 20px;
			background: #ffffff;
			text-align: center;
			button {
				position: absolute;
				width: 120px;
				height: 32px;
				margin-top: 16px;
				font-size: 16px;
				line-height: 20px;
				// border-radius: 999px;
				border: 0;
				background-color: #1890ff;
				color: #fff;
				top: 55%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}
	}
}
.sortClass {
	.sortMenu {
		text-align: center;
		height: 46px;
		line-height: 46px;
	}
	.ant-dropdown-menu {
		padding: 0;
	}
	.ant-dropdown-menu-item {
		width: 140px;
		padding: 0 16px;
		&:not(:last-child) {
			.sortMenu {
				border-bottom: 1px solid #eee;
			}
		}
		&:hover {
			background-color: #f4faff;
		}
	}
	.active.sortMenu {
		color: #1890ff;
	}
}
.cityModal {
	.inputBox {
		display: flex;
	}
	/deep/ .ant-input-affix-wrapper {
		flex: 1;
		margin-right: 12px;
		.ant-input {
			&:hover {
				border-color: #1890ff;
			}
			&:focus {
				border-color: #1890ff;
				box-shadow: none;
			}
		}
	}
	.ant-btn {
		&:hover {
			border-color: #1890ff;
			color: #1890ff;
		}
		&:active {
			border-color: #ee3f00;
			color: #ee3f00;
		}
		&:focus {
			border-color: #1890ff;
			color: #1890ff;
		}
	}
	button {
		width: 60px;
		height: 32px;
	}
	.firstList {
		display: flex;
		justify-content: start;
		margin: 30px 0;
		li {
			width: 16.6%;
			text-align: center;
			color: #666;
			div {
				width: 60%;
				padding-bottom: 5px;
				cursor: pointer;
				&:hover {
					color: #1890ff;
				}
			}
			.active {
				color: #1890ff;
				// position: relative;
				// &::after {
				//   content:'';
				//   display: block;
				//   position: absolute;
				//   height: 2px;
				//   width: 50px;
				//   bottom: 0;
				//   left: 0;
				//   background-color: #1890ff;
				// }
				border-bottom: 2px solid #1890ff;
			}
		}
	}
	.currentCity {
		display: flex;
		flex-wrap: wrap;
		li {
			width: 16.6%;
			margin-bottom: 20px;
			text-align: center;
			cursor: pointer;
			div {
				width: 60%;
				&:hover {
					color: #1890ff;
				}
			}
		}
	}
}
p {
	margin-bottom: 0;
}
.model-obj,.model-obj-copy{
	background-color: #ffffff;
	position: absolute;
	left: -592px;
	top: 44px;
	width: 640px;
	border-radius: 6px;
			.filter {
				// position: relative;
				// width: 100%;
				// top: -10px;
				// margin-top: 10px;
				// margin-bottom: 6px;
				box-sizing: border-box;
				border: 1px solid #ededed;
				// background-color: pink;
				padding: 12px;
				.filter-title {
					position: absolute;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 14px;
					width: 100%;
					height: 24px;
					top: -34px;
					left: 0;
					padding-left: 20px;
					z-index: 10;
					span i {
						font-size: 12px;
					}
					.toggleFilter {
						height: 24px;
						padding: 0px 2px 0 4px;
						line-height: 22px;
						border: 1px solid #ededed;
						background-color: #f5f5f5;
						border-radius: 4px;
						color: #666;
						cursor: pointer;
						user-select: none;
						i {
							// line-height: 28px;
							height: 100%;
							line-height: 22px;
							display: inline-block;
							transform-origin: center;
							transform: scale(0.6);
							margin-left: 2px;
						}
					}
					.sort {
						width: 86px;
						height: 22px;
						margin-left: 16px;
						display: inline-block;
						text-align: center;
						padding: 0px 2px 0 4px;
						line-height: 20px;
						border: 1px solid #ededed;
						background-color: #f5f5f5;
						border-radius: 4px;
						color: #666;
						cursor: pointer;
						user-select: none;
					}

					> span:first-child {
						display: flex;
						align-items: center;
						justify-content: start;
						line-height: 22px;
						> span:first-child {
							margin-right: 14px;
							i {
								margin-left: 4px;
							}
						}
					}
					.filter-show {
						display: flex;
						line-height: 1;
						color: #666;
						> span:nth-child(-n + 6) {
							display: inline-block;
						}
						> span {
							display: none;
							height: 24px;
							line-height: 22px;
							padding: 0 2px 0 4px;
							background-color: #f5f5f5;
							border: 1px solid #ededed;
							margin-right: 8px;
							user-select: none;
							border-radius: 4px;
							cursor: pointer;
							&:hover {
								border-color: #1890ff;
								background: #f4faff;
								color: #1890ff;
								i {
									color: #1890ff;
								}
							}
							i {
								font-size: 14px;
								margin-left: 4px;
								color: #666;
							}
						}
					}
				}

				.filter-content {
				overflow: hidden;
				// background-color: skyblue;
					dl {
						display: flex;
						justify-content: start;
						padding: 8px 8px 4px 8px;
						font-size: 14px;
						line-height: 1.5;
						user-select: none;

						.special-active {
							color: #1890ff !important;
							// background-color: rgba(255, 106, 0, 0.1) !important;
						}
						&:first-child {
							padding-bottom: 7px;
							dd {
								> i {
									> span {
										color: #333;
										&:hover {
											color: #1890ff;
										}
									}
								}
							}
						}
						&:not(:last-child) {
							border-bottom: 1px dotted #ededed;
						}
						&:not(:first-child) {
							dd {
								display: flex;
								justify-content: start;
								flex-wrap: wrap;
								> span {
									margin-bottom: 4px;
									color: #333;
									cursor: pointer;
									&:hover {
										color: #1890ff;
									}
								}
							}
						}
						dt {
							width: 74px;
							margin-right: 16px;
							text-align: left;
							color: #888;
						}
						dd {
							flex: 1;
							.ageinputbox {
								position: relative;
								display: inline-block;
								margin-right: 16px;
								> span:nth-of-type(2) {
									position: relative;
									z-index: 2;
								}
								&:hover .confirm {
									display: block;
								}

								.ageinput:not(.age) {
									position: relative;
									z-index: 3;
									padding: 0;
									// margin: 0 5px;
									height: 26px;
									width: 80px;
									border-color: #ddd;
									.ant-input-prefix {
										left: 3px;
										top: 51%;
									}
									&:hover {
										input {
											border-color: #1890ff;
										}
									}
									input {
										border-radius: 4px;
										text-indent: 20px;
										height: 26px;
										padding: 0;
										padding-right: unset;
										border-color: #ddd;
										&::placeholder {
											// text-indent: 30px;
											font-size: 14px !important;
										}
										&:hover {
											border-color: #1890ff;
											box-shadow: none;
										}
										&:focus {
											border-color: #1890ff;
											box-shadow: none;
										}
									}
									.ant-input-suffix {
										right: 3px;
									}
								}
								.ageinput {
									position: relative;
									z-index: 3;
									padding: 0;
									// margin: 0 5px;
									height: 26px;
									width: 80px;
									border-color: #ddd;
									.ant-input-prefix {
										left: 3px;
										top: 51%;
									}
									&:hover {
										input {
											border-color: #1890ff;
										}
									}
									input {
										border-radius: 4px;
										text-indent: 10px;
										height: 26px;
										padding: 0;
										padding-right: unset;
										border-color: #ddd;
										&::placeholder {
											// text-indent: 30px;
											font-size: 14px !important;
										}
										&:hover {
											border-color: #1890ff;
											box-shadow: none;
										}
										&:focus {
											border-color: #1890ff;
											box-shadow: none;
										}
									}
									.ant-input-suffix {
										right: 3px;
									}
								}
								.confirm {
									position: absolute;
									display: none;
									width: 254px;
									height: 46px;
									line-height: 46px;
									left: -8px;
									top: -11px;
									z-index: 1;
									border: 1px solid #eee;
									border-radius: 6px;
									background-color: #fff;
									box-shadow: 0 0px 10px 5px #eee;
									button {
										position: relative;
										width: 44px;
										height: 26px;
										line-height: 26px;
										top: 52%;
										transform: translateY(-50%);
										margin-right: 8px;
										float: right;
										background-color: #1890ff;
										border-radius: 4px;
										border: none;
										color: #fff;
										&:hover {
											background-color: #1890ffdd;
										}
										&:active {
											background-color: #1890ffdd;
										}
									}
								}
							}
							> span {
								margin-right: 40px;

								> span {
									cursor: pointer;
									margin-right: 40px;
								}
							}
						}
					}
					.price {
						dd i {
							span {
								cursor: pointer;
								margin-right: 40px;
							}
						}
					}
				}
			}
		}
		.dav{
			&:hover{
				color: rgb(24, 144, 255);
			}
		}
		.b-footer{
				div {
					text-align: center;
					// margin-top: 16px;
					color: #4d575e;
					font-size: 12px;
					i {
						display: inline-block;
						vertical-align: middle;
						width: 1px;
						height: 16px;
						margin: 0 10px;
						background-color: #4d575e;
					}
				}
		}

		.model-obj-copy{
			left: 50%;
			top: 52px;
			transform: translateX(-50%);
			background-color: transparent;
			.filter{
				padding: 0;
				.filter-title{
					top: 0 !important;
					position: relative;
					padding-left: 0;
					.filter-show{
						>span{
							background-color: #fff;
						}
					}
				}
			}

		}
		.stoggle{
			transform: rotate(90deg);
		}
</style>
