<template>
	<div class="detail-container">
		<div style="height: 56px;"></div>
		<!-- 面包屑 -->
		<a-breadcrumb class="w" style="width: 800px;min-width: 800px;">
			<a-breadcrumb-item href>
				<router-link to="/main">
					<a-icon type="home" />
				</router-link>
			</a-breadcrumb-item>
			<a-breadcrumb-item href>
				<a @click="toList">
					<span>{{  "伯才职位" }}</span>
				</a>
			</a-breadcrumb-item>
			<a-breadcrumb-item href>
				<span style="color: #333">{{ from == "vocational" ? "详情" : "职位详情" }}</span>
			</a-breadcrumb-item>
		</a-breadcrumb>
		<!-- 主体区域 -->
		<div class="maincontent w"> 
			<div class="m-money-obj g_mb_20 g_p_20 g_flex_row_between" 
					 style="background-color: #fff;border-radius: 6px;width: 800px;margin: 0 auto 20px;"
			>
				<div class="g_flex_row_start">
					<div style="font-size: 16px;font-weight: 600;margin-right: 4px;">代理佣金</div>
					<div class="g_flex_column_center" @click="isSee = !isSee" style="cursor: pointer;">
						<i class="iconfont icon-zhengyan11" style="font-size: 22px;color: #ff4400;line-height: 0.1;" v-if="isSee"></i>
						<i class="iconfont icon-biyan11" style="font-size: 22px;color: #ff4400;line-height: 0.1;margin-top: -4px;" v-if="!isSee"></i>
					</div>
				</div>
				<div class="g_flex_row_end" @click="viewDetail" style="cursor: pointer;">
					<div class="g_flex_column_center g_fs_14">
						<span v-if="isSee">
							{{ jobDetail.servetype }}
						</span>
						<span v-if="!isSee">
							***
						</span>
					</div>
					<div class="g_flex_column_center">
						<i class="iconfont icon-xiangyou1"></i>
					</div>
				</div>
			</div>
			<!-- 职教 -->
			<div class="maincontentleft" v-if="from == 'vocational'">
				<div class="subset">
					<a-skeleton avatar active class="skeleton1" v-show="skeletonshow" :paragraph="{ rows: 4 }" />
					<div class="subsetleft" v-show="!skeletonshow">
						<div class="info">
							<!-- <div class="imgbox">
								<img v-if="jobDetail.logo" :src="jobDetail.logo" alt />
								<div v-else class="default_avatar">{{ jobDetail.vocationalName }}</div>
							</div> -->
							<div class="jobinfobox">
								<div>
									<div class="jobname">{{ jobDetail.vocationalName }}</div>
									<div class="jobinfo">
										<span>{{ jobDetail.district || "河南省 | 郑州市 | 16-35岁" }}</span>
										<!-- <span>{{ jobDetail.district }}</span>
										<span>{{ jobDetail.gender }}</span>
										<span>{{ jobDetail.age }}</span> -->
									</div>
									<div class="jobpricemonth" style="margin-top: 12px">
										<span style="color: #ff4d4f; background: rgba(255, 77, 79, 0.1); padding: 1px 6px"> 工作薪资：{{ jobDetail.salary }} </span>
									</div>
								</div>
								<div style="margin-top: 8px; font-size: 14px; font-weight: normal; text-align: left; color: #1890ff; font-weight: 600">
									<span class="" style="font-size: 24px">学费{{ jobDetail.tuition }}</span>
									<span style="font-size: 16px"> | 课期{{ jobDetail.semester }}</span>
								</div>
							</div>
						</div>
						<div class="swiperBox">
							<div id="swiper">
								<div class="swiper-wrapper">
									<div class="swiper-slide" v-for="(item, index) in [...vocationalImgList]" :key="index">
										<img :src="item" alt v-if="isImg(item)" @click="showImage(index)" style="cursor: pointer" />
										<div v-if="!isImg(item)">
											<div style="position: absolute; width: 78px; height: 78px; left: 0; top: 0; z-index: 99; background-color: transparent; cursor: pointer" @click.stop="handlePreview(item)"></div>
											<video class="imgSpan" style="width: 80px; height: 45px" controls>
												<source :src="item" type="video/mp4" />
												<source :src="item" type="video/ogg" />
												您的浏览器不支持 HTML5 video 标签。
											</video>
										</div>
									</div>
								</div>
							</div>
							<div class="swiper-button-next"></div>
							<div class="swiper-button-prev"></div>
						</div>
						<a-modal :visible="previewVisible" wrapClassName="spic" centered :footer="null" @cancel="handleCancel">
							<video style="width: 100%; max-height: calc(100vh - 40px)" id="movie" autoplay :src="previewImage" controls="controls" />
						</a-modal>
					</div>
					<div class="subsetright">
						<div class="topbox" v-if="false">
							<div>服务费</div>
							<div>
								<span>{{ jobDetail.serviceCharge }}</span>
							</div>
						</div>
						<div style="color: #a1a1a1;font-size: 14px;margin-left: 15px;">{{ jobDetail.up_time }}</div>
						<div class="sub-bottombox">
							<!-- <button type="primary" class="jobDespBtn">
								<a :href="customServiceUrl" target="_blank"> <i class="iconfont icon-kefu_lan mr6"></i>联系客服</a>
							</button> -->
							<button class="dropdown bottombox1" @click="showRecord">报名</button>
							<!-- <button class="norecruitment bottombox1" v-else>暂时停招</button> -->
						</div>
					</div>
				</div>
				<div style="padding: 0 16px">
					<div class="" style="color: #333; font-size: 20px; font-weight: 600; margin: 32px 0 16px">职教描述</div>
					<div class="c7" style="white-space: pre-line; font-size: 16px">
						{{ jobDetail.desp }}
					</div>
				</div>
			</div>

			<!-- 非职教 -->
			<div class="maincontentleft" v-else>
				<div class="mask" v-if="!(jobDetail.recruitment == '1')"></div>

				<div class="subset">
					<a-skeleton avatar active class="skeleton1" v-show="skeletonshow" :paragraph="{ rows: 4 }" />
					<div class="subsetleft" v-show="!skeletonshow">
						<div class="info">
							<!-- <div class="imgbox">
								<img v-if="jobDetail.logo || store.logo" :src="jobDetail.logo || store.logo" alt />
								<img v-else src="../../../static/img/nopicture.png" alt />
							</div> -->
							<div class="jobinfobox">
								<div class="jobname">{{ jobDetail.jobName }}
                  <span class="hotTag"  v-if="jobDetail.hotJob == 1">
											<i class="iconfont icon-dianzan1 mr0" style="font-size: 12px"></i>
											主推
										</span>
                </div>
								<div class="jobinfo">
									<span>{{ jobDetail.storeAddr }} </span>

									<span>{{ jobDetail.gender }}</span>
									<span>{{ jobDetail.age }}</span>
								</div>
								<!--	<div class="jobtag">
									<a-tag :color="labelColor[index % labelColor.length]" v-for="(item, index) in jobDetail.jobRequestLabelNames" :key="index">{{ item }}</a-tag>
								</div>
								<div style="height: 27px" v-if="!jobDetail.jobRequestLabelNames" class="jobtag">
									<a-tag :color="labelColor[1]">暂无要求</a-tag>
								</div>
							 <div class="jobtag1">
									<a-tag v-for="(item, index) in jobDetail.jobSpecialLabelNames" :key="index">{{ item }}</a-tag>
								</div>
								<div style="height: 27px" v-if="!jobDetail.jobSpecialLabelNames" class="jobtag">
									<a-tag style="background-color: #f5f5f5">暂无特色</a-tag>
								</div> -->
								<div style="display: flex; align-items: center; height: 26px; margin-top: 16px">
									<div class="jobpricehour" v-html="getSalaryClassifyValue(jobDetail.salaryClassify, jobDetail.salaryClassifyValue)"></div>
									<span style="font-size: 16px">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
									<div class="jobpricemonth">
										<span>{{ jobDetail.minMonthlyPay/100 }}</span
										>-<span>{{ jobDetail.maxMonthlyPay/100 }}</span
										>元/月
									</div>
								</div>
							</div>
						</div>
						<!-- <div class="swiperBox" style="display: flex; justify-content: start">
							<img :src="jobDetail.logo || jobDetail.store.logo" alt v-if="jobDetail.logo || jobDetail.store.logo" @click="showImage(0, 'logo')" style="cursor: pointer; width: 80px; height: 45px" />
							<div id="swiper">
								<div class="swiper-wrapper">
									<div class="swiper-slide" v-for="(item, index) in [...storeImage]" :key="index">
										<img :src="item" alt v-if="isImg(item)" @click="showImage(index)" style="cursor: pointer" />
										<div v-if="!isImg(item)">
											<div style="position: absolute; width: 78px; height: 78px; left: 0; top: 0; z-index: 99; background-color: transparent; cursor: pointer" @click.stop="handlePreview(item)"></div>
											<video class="imgSpan" style="width: 80px; height: 45px" controls>
												<source :src="item" type="video/mp4" />
												<source :src="item" type="video/ogg" />
												您的浏览器不支持 HTML5 video 标签。
											</video>
										</div>
									</div>
								</div>
							</div>
							<div class="swiper-button-next"></div>
							<div class="swiper-button-prev"></div>
						</div> -->
						<a-modal :visible="previewVisible" wrapClassName="spic" centered :footer="null" @cancel="handleCancel">
							<video style="width: 100%; max-height: calc(100vh - 40px)" id="movie" autoplay :src="previewImage" controls="controls" />
						</a-modal>
					</div>
					<div class="subsetright">
						<div class="topbox" v-if="false">
							<div>服务费</div>
							<div>
								<span>{{ jobDetail.servetype }}</span>
							</div>
						</div>
						<div style="color: #a1a1a1;font-size: 14px;margin-left: 15px;">{{ jobDetail.up_time }}</div>
						<div class="sub-bottombox fss">
							<button type="primary" class="jobDespBtn" v-if="jobClassify == 1">

								<a :href="jobDetail.customServiceUrl || 'javascript:;'" target="_blank" v-if="jobDetail.customServiceUrl"> <i class="iconfont icon-kefu_lan mr6"></i>联系客服</a>
								<a href="javascript:;" v-else @click="noCustom"> <i class="iconfont icon-kefu_lan mr6"></i>联系客服</a>

                
							</button>

							<a-dropdown :trigger="['click']" overlayClassName="special-dropdown" v-else>
								<button type="primary" class="jobDespBtn">
									<a href="javascript:;" target="_blank"> <i class="iconfont icon-kefu_lan mr6"></i>联系客服</a>
								</button>
								<a-menu slot="overlay" style="padding: 0 10px">
									<a-menu-item v-for="(item, index) in customServiceUsers" :key="index"> <i class="iconfont icon-dianhua1 mr4 f14" style="color: #1890ff"></i>{{ item.aliasName }} {{ item.tel }} </a-menu-item>
								</a-menu>
							</a-dropdown>
							<button class="dropdown bottombox1" @click="torecord()" v-if="jobDetail.recruitment == '1'">报名</button>
							<button class="norecruitment bottombox1" v-else>暂时停招</button>
						</div>
					</div>
				</div>
				<div class="jobinformationbox" style="padding-left: 20px;">
					<h1>
						<div class="infotitle">
							<span @click="tabchange = 1" :class="tabchange === 1 ? 'active' : ''">基本信息</span>
							<span @click="tabchange = 0" :class="tabchange === 0 ? 'active' : ''" v-if="false">财务结算</span>
							<span @click="tabchange = 2" :class="tabchange === 2 ? 'active' : ''">职位描述</span>
						</div>
					</h1>
					<div class="pay" id="tip" v-show="tabchange === 1">
						<div class="mb12 mt20 titlestyle">温馨提示</div>
						<div class="showInfo" style="width: unset">{{ jobDetail.notes || "-" }}</div>
					</div>
					<div v-if="tabchange === 1" style="display: flex">
						<!-- 薪资 -->
						<div class="baseInfoContent" v-if="tabchange === 1">
							<div class="pay" id="pay">
								<div class="mb12 mt20">薪资待遇</div>
								<a-descriptions bordered size="small" :column="1" class="leftDesc boubleLevel">
									<a-descriptions-item class="test1">
										<span slot="label" class>薪资明细</span>
										<span>{{ jobDetail.salaryDetail || "-" }}</span>
									</a-descriptions-item>
									<!-- <a-descriptions-item>
										<span slot="label" class>发薪日</span>
										<span>{{ jobDetail.payDay || "-" }}</span>
									</a-descriptions-item>
									<a-descriptions-item>
										<span slot="label" class>银行卡</span>
										<span>{{ jobDetail.bankInfo || "-" }}</span>
									</a-descriptions-item>
                  <a-descriptions-item>
										<span slot="label" class>保险</span>
										<span>{{ jobDetail.employeeInsurance || "-" }}</span>
									</a-descriptions-item>
									<a-descriptions-item>
										<span slot="label" class>押金</span>
										<span>{{ jobDetail.foregift || "-" }}</span>
									</a-descriptions-item>
                  <template v-if="jobClassify == 2">
                    <a-descriptions-item>
                      <span slot="label" class>培训/试用期</span>
                      <span>{{ jobDetail.training || "-" }}</span>
                    </a-descriptions-item>
                  </template>
                  <template v-else>
                    <a-descriptions-item v-if="jobClassify == 1">
                      <span slot="label" class>培训</span>
                      <span>{{ jobDetail.training || "-" }}</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
										<span slot="label" class>试用期</span>
										<span>{{ jobDetail.probationStr || "-" }}</span>
									</a-descriptions-item> 
                  </template> -->


									<!-- <a-descriptions-item>
										<span slot="label" class>福利待遇</span>
										<span>{{ jobDetail.boon || "-" }}</span>
									</a-descriptions-item>
									 <a-descriptions-item v-if="jobClassify == 1">
										<span slot="label" class>薪资说明</span>
										<span style="white-space: break-spaces">
											{{ jobDetail.salaryDesp || "-" }}
										</span>
									</a-descriptions-item> -->
								</a-descriptions>
							</div>
							<!-- 岗位要求 -->
							<div class="required" id="required">
								<div class="mb12 mt20">招聘要求</div>
								<a-descriptions bordered size="small" :column="1" class="leftDesc">
									<a-descriptions-item class="test1">
										<span slot="label" class>性别年龄</span>
										<span>
											<span class="man" v-if="jobDetail.minAgeMan">
												男 {{ jobDetail.minAgeMan }}<span v-if="jobDetail.maxAgeMan"> {{ "- " + jobDetail.maxAgeMan }} </span>岁 ；
											</span>
											<span class="woman" v-if="jobDetail.minAgeWoman">
												女 {{ jobDetail.minAgeWoman }}<span>{{ "- " + jobDetail.maxAgeWoman }}</span
												>岁
											</span>
                      {{jobDetail.genderRemark || ''}}
										</span>
									</a-descriptions-item>
									<!-- <a-descriptions-item>
										<span slot="label" class>文化要求</span>
										<span>{{ jobDetail.education || "-" }}</span>
									</a-descriptions-item>
									<a-descriptions-item>
										<span slot="label" class>体检</span>
										<span>{{ jobDetail.healthRequire || "-" }}</span>
									</a-descriptions-item>

									<a-descriptions-item>
										<span slot="label" class>证件</span>
										<span>{{ jobDetail.idCardStr || "-" }}</span>
									</a-descriptions-item>

									<a-descriptions-item>
										<span slot="label" class>疑难杂症</span>
										<span>{{ jobDetail.otherRequireStr || "-" }}</span>
									</a-descriptions-item> -->
								</a-descriptions>
							</div>
							<!-- 基本信息 -->
							<div class id="contentspecial">
								<div class="mb12 mt20">岗位说明</div>
								<a-descriptions bordered size="small" :column="1" class="leftDesc">
									<!-- <a-descriptions-item class="test1">
										<span slot="label" class>工作内容</span>
										<span>{{ jobDetail.workContent || "-" }}</span>
									</a-descriptions-item>

									<a-descriptions-item class="test1">
										<span slot="label" class>工作方式</span>
										<span>{{ jobDetail.workMode || "-" }}</span>
									</a-descriptions-item> -->

									<a-descriptions-item>
										<span slot="label" class>班次工时</span>
										<span>{{ jobDetail.workClasses || "-" }}</span>
									</a-descriptions-item>
									<!-- <a-descriptions-item>
										<span slot="label" class>工作衣</span>
										<span>{{ jobDetail.workClothes || "-" }}</span>
									</a-descriptions-item>
									<a-descriptions-item>
										<span slot="label" class>车间</span>
										<span>{{ jobDetail.securityCheck || "-" }}</span>
									</a-descriptions-item> -->
								</a-descriptions>
							</div>

							<!-- <div class="condition" id="condition">
								<div class="mb12 mt20">吃饭住宿</div>
								<ul class="conditiontable">
									<li>
										<span>吃饭</span>
										<span>{{ jobDetail.workingLunch || "-" }}</span>
									</li>
									<li>
										<span>住宿费用</span>
										<span>{{ jobDetail.dormitory || "-" }}</span>
									</li>
									<li>
										<span>宿舍设施</span>
										<span>{{ jobDetail.dormitoryFacilities || "-" }}</span>
									</li>
									<li>
										<span>宿舍距离</span>
										<span>{{ jobDetail.dormDistance || "-" }}</span>
									</li>
									<li>
										<span>入住条件</span>
										<span>{{ jobDetail.dormitoryDesp || "-" }}</span>
									</li>
								</ul>
							</div> -->
							<div class="required" id="abutment">
								<div class="mb12 mt20">对接信息</div>
								<a-descriptions bordered size="small" :column="1" class="leftDesc">
									<!-- <a-descriptions-item class="test1">
										<span slot="label" class>面试时间</span>
										<span>{{ jobDetail.interviewDuration || "-" }}</span>
									</a-descriptions-item> -->
									<a-descriptions-item class="test1">
										<span slot="label" class>面试地点</span>
										<span>{{ jobDetail.interviewAddr || "-" }}</span>
									</a-descriptions-item>
									 <a-descriptions-item class="test1">
										<span slot="label" class>面试说明</span>
										<span>{{ jobDetail.interviewDesp || "-" }}</span>
									</a-descriptions-item>
									<!--<a-descriptions-item class="test1">
										<span slot="label" class>入职说明</span>
										<span>{{ jobDetail.entryDesp || "-" }}</span>
									</a-descriptions-item>
									<a-descriptions-item class="test1">
										<span slot="label" class>离职说明</span>
										<span>{{ jobDetail.leaveRequire || "-" }}</span>
									</a-descriptions-item> -->
								</a-descriptions>
								<!-- <a-descriptions bordered size="small" :column="1" class="leftDesc" v-else>
									<a-descriptions-item class="test1">
										<span slot="label" class>驻场信息</span>
										<span>{{ onSiteUsersInfo || "-" }}</span>
									</a-descriptions-item>
									<a-descriptions-item class="test1">
										<span slot="label" class>面试地址</span>
										<span>{{ jobDetail.interviewAddr || "-" }}</span>
									</a-descriptions-item>
									<a-descriptions-item class="test1">
										<span slot="label" class>其他说明</span>
										<span>{{ jobDetail.otherInfo || "-" }}</span>
									</a-descriptions-item>
								</a-descriptions> -->
							</div>
						</div>
						<!-- <a-anchor @click.prevent class="navigation">
							<a-anchor-link href="#tip" title="注意" />
							<a-anchor-link href="#pay" title="薪资" />
							<a-anchor-link href="#required" title="要求" />
							<a-anchor-link href="#contentspecial" title="岗位" />
							<a-anchor-link href="#condition" title="吃住" />
							<a-anchor-link href="#abutment" title="对接" />
						</a-anchor> -->
					</div>

					<!-- 财务结算 -->
					<div v-else-if="tabchange == 0">
						<a-descriptions bordered size="small" :column="1" class="leftDesc mt20" style="width: 900px">
							<a-descriptions-item class="test1">
								<span slot="label" class>服务费</span>
								<span>{{ jobDetail.servetype }}</span>
							</a-descriptions-item>
							<a-descriptions-item class="test1">
								<span slot="label" class>服务费详情</span>
								<span>{{ jobDetail.returnFeeDesp || "-" }}</span>
							</a-descriptions-item>
						</a-descriptions>
					</div>
					<div v-else-if="tabchange === 2">
						<div class="pay" id="tip">
							<div class="mb12 mt20 titlestyle">职位通告</div>
							<div class="showInfo" style="width: unset; color: #000 !important">
								<div class="copy" @click="copyText($event)">复制</div>
								<div class="copyInfo" style="border: none; padding: 0 0; width: unset; white-space: pre-line">{{ jobDetail.jobInfo.split('————————')[0] || "-" }}</div>
							</div>
						</div>
					</div>
				</div>

			</div>
			<div class="maincontentright" v-if="false">
				<!-- <div class="hotphone">
					<h1 class="bottombox" style>
						<i>项目方</i>
					</h1>
          <template v-if="agency.supplierName == '江西人海'">
            <img style="width: 60px; height: 60px; border-radius: 50%; display: block; margin: 24px auto 0" src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/renhai.jpg" alt />
          </template>
          <template v-else>
					  <img style="width: 60px; height: 60px; border-radius: 50%; display: block; margin: 24px auto 0" :src="agency.logo || 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/moren.svg'" alt />
          </template>
          <div style="color: #333">
						<p class="f14" style="margin-top: 10px; margin-bottom: 0">
							{{ agency.supplierName || "-" }}
						</p>
					</div>
				</div> -->
				<!-- <div class="companyinfo" v-if="from != 'vocational'">
					<div class="companydetail">
						<h1 class="bottombox">
							<i>企业详情</i>
						</h1>
					</div>
					<div class="companylocation" style="text-align: center; padding: 0 20px 20px" v-if="positionInfo.lng || positionInfo.storeLng">
						<h2 style="padding: 16px 0; font-weight: 600">{{ store.storeName || "-" }}</h2>
						<p style="padding-bottom: 20px; border-bottom: 1px solid #eee; font-size: 16px; text-indent: 16px; color: #4d575ecc; white-space: pre-line; text-align: left">{{ store.storeInfo || "-" }}</p>
						<div class="imgbox">
							<GDMap :positionInfo="positionInfo"></GDMap>
						</div>
					</div>
				</div> -->
				<recommend />
			</div>
		</div>
		<recordModal :show.sync="recordShow" :jobDetail="jobDetail"></recordModal>
	</div>
</template>
<script>
import { getJobDetailApi } from "../../api/job";
import { disposeJobListData, getSalaryClassifyValue } from "../../utils/commonUtil";
import recommend from "../../components/FirstJob/components/recommend.vue";
import { nationlist } from "../../utils/datalist";
import { getUserManagerApi } from "../../api/userinfo";
import "swiper/dist/css/swiper.css";
import Vue from "vue";
import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";
import swiper from "swiper";
import GDMap from "../map.vue";
// import recordbill from "@/components/FirstJob/components/recordbill.vue";
import Clipboard from "clipboard";
// 报名弹窗
import recordModal from "./components/vocationalRecord.vue";

// import map from '../map.vue'
Vue.use(Viewer, {
	defaultOptions: {
		// 需要配置的属性
		toolbar: {
			zoomIn: true,
			zoomOut: true,
			oneToOne: false,
			reset: false,
			prev: true,
			play: {
				show: true,
				size: "large",
			},
			next: true,
			rotateLeft: true,
			rotateRight: true,
			flipHorizontal: false,
			flipVertical: false,
		},
		title: false,
		navbar: false,
		initialViewIndex: 1,
		isMeetting: false,
	},
});
export default {
	// 组件名称
	name: "",
	// 局部注册的组件
	components: {
		recommend,
		GDMap,
		recordModal,
		// GDMap
		// recordbill,
	},
	// 组件参数 接收来自父组件的数据
	props: {},
	// 组件状态值
	data() {
		return {
			isSee:true,
			agency: {},
			onSiteUsersInfo: "",
			customServiceUsers: [],
			previewVisible: false,
			previewImage: "",
			relationList: [],
			jobDetail: {}, // 职位相关信息
			storeImage: [],
			storeInfo: {},
			id: "",
			jobClassify: "",
			currentPageNum: this.$route.query.page || "",
			visible: false, // 录单模态框的展示
			xiangdanVisible: false, // 详单的弹出
			confirmLoading: false, // 录单提交的loading效果
			positionInfo: {}, // 企业位置信息
			jobPoses: {}, // 职位位置信息
			store: {}, // 职位详情信息
			skeletonshow: true,
			tabchange: 1,
			nationlist,
			imgList: [], // 预览图片列表
			labelColor: ["pink", "blue", "purple", "orange", "green", "cyan", "red", "purple"],
			form: {
				// 录单数据
				name: "",
				peoplecard: "",
				gender: "",
				nation: "",
				location: "",
				firm: "",
				post: "",
				pattern: "",
				policy: "",
				proxy: "",
				facedate: "",
			},
			storeJob: {},
			// rules: {
			//   // 录单校验规则
			//   name: [{ required: true, message: "请输入姓名", trigger: "submit" }],
			//   // tel: [{ required: true, message: "请输入手机号", trigger: "submit" }],
			// },
			apply: {},
			myswiper: null, // 存储swiper实例
			managerInfo: {},
			customServiceUrl: "", // 客服信息
			from: null, // 来源
			recordShow: false,
			vocationalImgList: ["https://matripe-cms.oss-cn-beijing.aliyuncs.com/zhijiao/job1.png", "https://matripe-cms.oss-cn-beijing.aliyuncs.com/zhijiao/job2.png", "https://matripe-cms.oss-cn-beijing.aliyuncs.com/zhijiao/job3.png", "https://matripe-cms.oss-cn-beijing.aliyuncs.com/zhijiao/job4.png", "https://matripe-cms.oss-cn-beijing.aliyuncs.com/zhijiao/job5.png", "https://matripe-cms.oss-cn-beijing.aliyuncs.com/zhijiao/job6.png"],
			zhijiaoList: [
				// 职教列表
				{
					id: 0,
					vocationalName: "电气工程师（初级班）",
					logo: "https://matripe-cms.oss-cn-beijing.aliyuncs.com/zhijiao/job1.png",
					tuition: "6800元",
					serviceCharge: "2000元/人",
					salary: "7000-9000元/月",
					enterprise: "",
					semester: "30天",
					totalProfit: "2500元/人+就业分成",
					address: "河南省郑州市航空港区如荼路重英街交叉口南侧100米路东",
					desp: `一、就业前景： 
1. 学习合格后，公司统一推荐到相关企业的设备安装、调试、运营维护等相关岗位。
2. 薪酬待遇：电气工程师（初级）实习期6000-8000元/月，实习期过后，7000-9000元/月。

二、关于学校
优星图教育科技是集智能制造设备的研发生产、智能工厂设计与升级改造、自动化技能人才培养培训为一体的智能制造整体解决方案供应商。双师型教师团队，先进的自动化教学设备，理论结合实操，让你用最短的时间学会最有用的技术，从而实现高质量就业！

三、课程介绍
本培养体系通过70%实操+30%理论相结合的模式掌握自动化技术，每个模块均有考核，考核通过即可推荐工作，未通过即针对性辅导，完成技术掌握。课程体系持续升级，教学内容以就业为导向，紧贴企业需求。

四、课程内容：
1. 电工基础课程
2. 气动基础课程
3. 传感器课程
4. 西门子200SMART PLC课程
5. ABB机器人课程

五、学习时间：
周一到周六
夏季：上午 8:30-11:30，下午 14:00-18:00，晚上 19:00-21:00 （晚自习）
冬季：上午 8:30-11:30，下午 13:30-17:30，晚上 18:30-20:30 （晚自习）
周日休息期间教室全天开放，可随时实操。

六、招生对象
基本要求：初中及以上学历，年龄18-35周岁；思想端正；心理和身体健康，无危害团体的传染性疾病；热爱自动化行业；服从公司安排，适应出差。
1. 工厂中想通过学习一门技术改变自己的一线操作工；
2. 从事自动化设备机构装配人员电控知识的扩展；
3. 想从事自动化行业的自动化相关专业毕业生，在步入岗位前的充电学习。

七、吃饭住宿 
1. 吃饭自理，住宿4-8人间，收费12-18元/天/人。预约报名缴纳300元定金送开学大礼包（被褥四件套+生活用品大礼包），独立卫生间、空调、热水器，免费洗衣机、饮水机24小时提供。
2. 住宿期间水电费全免！

八、服务流程
报名成功----到校考察----面试合格----缴纳费用----签订协议----安排入学----学习合格----推荐就业。

九、学员需提前准备的环节
1. 换洗衣服、常用物品即可

十、学习地址  
河南省郑州市航空港区如荼路重英街交叉口南侧100米路东`,
				},
				{
					id: 1,
					vocationalName: "调试工程师（中级班）",
					logo: "https://matripe-cms.oss-cn-beijing.aliyuncs.com/zhijiao/job2.png",
					tuition: "11800元",
					serviceCharge: "3000元/人",
					salary: "8000-11000元/月",
					enterprise: "",
					semester: "60天",
					totalProfit: "4000元/人+就业分成",
					address: "河南省郑州市航空港区如荼路重英街交叉口南侧100米路东",
					desp: `一、就业前景： 
1. 学习合格后，公司统一推荐到相关企业的设备安装、调试、运营维护等相关岗位。
2. 薪酬待遇：调试工程师（中级）实习期7000-9000元/月，实习期过后，8000-11000元/月。

二、关于学校
优星图教育科技是集智能制造设备的研发生产、智能工厂设计与升级改造、自动化技能人才培养培训为一体的智能制造整体解决方案供应商。双师型教师团队，先进的自动化教学设备，理论结合实操，让你用最短的时间学会最有用的技术，从而实现高质量就业！

三、课程介绍
本培养体系通过70%实操+30%理论相结合的模式掌握自动化技术，每个模块均有考核，考核通过即可推荐工作，未通过即针对性辅导，完成技术掌握。课程体系持续升级，教学内容以就业为导向，紧贴企业需求。

四、课程内容：
1. PLC编程基础知识
2. 编程基本指令学习
3. 威纶通触摸屏
4. 运动控制课程
5. 模拟量应用课程
6. 通信课程/绘图课程
7. 非标设备实操课程

五、学习时间：
周一到周六
夏季：上午 8:30-11:30，下午 14:00-18:00，晚上 19:00-21:00 （晚自习）
冬季：上午 8:30-11:30，下午 13:30-17:30，晚上 18:30-20:30 （晚自习）
周日休息期间教室全天开放，可随时实操。

六、招生对象
基本要求：初中及以上学历，年龄18-35周岁；思想端正；心理和身体健康，无危害团体的传染性疾病；热爱自动化行业；服从公司安排，适应出差。
1. 工厂中想通过学习一门技术改变自己的一线操作工；
2. 从事自动化设备机构装配人员电控知识的扩展；
3. 想从事自动化行业的自动化相关专业毕业生，在步入岗位前的充电学习。

七、吃饭住宿 
1. 吃饭自理，住宿4-8人间，收费12-18元/天/人。预约报名缴纳300元定金送开学大礼包（被褥四件套+生活用品大礼包），独立卫生间、空调、热水器，免费洗衣机、饮水机24小时提供。
2. 住宿期间水电费全免！

八、服务流程
报名成功----到校考察----面试合格----缴纳费用----签订协议----安排入学----学习合格----推荐就业。

九、学员需提前准备的环节
1. 换洗衣服、常用物品即可

十、学习地址  
河南省郑州市航空港区如荼路重英街交叉口南侧100米路东`,
				},
				{
					id: 2,
					vocationalName: "运营管理团队（高级班）",
					logo: "https://matripe-cms.oss-cn-beijing.aliyuncs.com/zhijiao/job3.png",
					tuition: "19800元",
					serviceCharge: "6500元/人",
					salary: "9000-11000元/月",
					enterprise: "",
					semester: "90天",
					totalProfit: "8000元/人",
					address: "河南省郑州市航空港区如荼路重英街交叉口南侧100米路东",
					desp: `一、就业前景： 
1. 学习合格后，公司统一推荐到相关企业的设备安装、调试、运营维护等相关岗位。
2. 薪酬待遇：运营/教师精英班（高级）实习期（三个月）8000-9000元/月，实习期过后9000-11000元/月，运营管理类学员孵化创业年综合收入20w。

二、关于学校
优星图教育科技是集智能制造设备的研发生产、智能工厂设计与升级改造、自动化技能人才培养培训为一体的智能制造整体解决方案供应商。双师型教师团队，先进的自动化教学设备，理论结合实操，让你用最短的时间学会最有用的技术，从而实现高质量就业！

三、课程介绍
本培养体系通过70%实操+30%理论相结合的模式掌握自动化技术，每个模块均有考核，考核通过即可推荐工作，未通过即针对性辅导，完成技术掌握。课程体系持续升级，教学内容以就业为导向，紧贴企业需求。

四、课程内容：
1. 自动化专业技能培训 5周
2. 自动化教学技法培训 5周
3. 线上新媒体应用培训 1周
4. 综合素养培训 1周

五、学习时间：
周一到周六
夏季：上午 8:30-11:30，下午 14:00-18:00，晚上 19:00-21:00 （晚自习）
冬季：上午 8:30-11:30，下午 13:30-17:30，晚上 18:30-20:30 （晚自习）
周日休息期间教室全天开放，可随时实操。

六、招生对象
基本要求：初中及以上学历，年龄18-35周岁；思想端正；心理和身体健康，无危害团体的传染性疾病；热爱自动化行业；服从公司安排，适应出差。
1. 工厂中想通过学习一门技术改变自己的一线操作工；
2. 从事自动化设备机构装配人员电控知识的扩展；
3. 想从事自动化行业的自动化相关专业毕业生，在步入岗位前的充电学习。

七、吃饭住宿 
1. 吃饭自理，住宿4-8人间，收费12-18元/天/人。预约报名缴纳300元定金送开学大礼包（被褥四件套+生活用品大礼包），独立卫生间、空调、热水器，免费洗衣机、饮水机24小时提供。
2. 住宿期间水电费全免！

八、服务流程
报名成功----到校考察----面试合格----缴纳费用----签订协议----安排入学----学习合格----推荐就业。

九、学员需提前准备的环节
1. 换洗衣服、常用物品即可

十、学习地址  
河南省郑州市航空港区如荼路重英街交叉口南侧100米路东`,
				},
			],
		};
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {},
	// 生命周期钩子   注：没用到的钩子请自行删除
	/**
	 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
	 */

	beforeCreate() {},
	created() {
		// console.log(this.$router.matcher.match());
		if (sessionStorage.getItem("PAGE_TYPE")) {
			this.id = JSON.parse(sessionStorage.getItem("PAGE_TYPE")).id;

			this.jobClassify = JSON.parse(sessionStorage.getItem("PAGE_TYPE")).jobClassify;
			this.currentPageNum = JSON.parse(sessionStorage.getItem("PAGE_TYPE")).pageNum;

			console.log("PAGE_TYPE", JSON.parse(sessionStorage.getItem("PAGE_TYPE")));
		}
    if(this.$route.query.jobClassify){
      this.jobClassify = this.$route.query.jobClassify
    }
		if (this.$route.query.id) {
			this.id = this.$route.query.id;
		}
		console.log("this.id ", this.id);
		console.log("this.$route", this.$route); // 获取传过来的params数据
		if (this.$route.query.type) {
			this.from = this.$route.query.type;
			this.jobDetail = this.zhijiaoList.find((item) => item.id == this.$route.query.id);
			this.skeletonshow = false;
			console.log(this.jobDetail);
		} else {
			this.getJobDetail();
		}
		this.getUserManager();
		// Object.defineProperties("window.opener", "sessionStorage", {
		//   LOGIN_DATA: {},
		// });
		// console.log(window.opener);
	},
	/**
	 * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
	 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
	 */
	mounted() {
		let that = this;
		// console.log(this.$refs.scrollimg);
		// this.$refs.scrollimg.goTo(0, false);
		setTimeout(() => {
			this.myswiper = new swiper("#swiper", {
				// loop: true,
				// loopAdditionalSlides: 3,
				// speed: 500,
				// keyboard: true,
				// allowTouchMove: false,
				// slidesPerView: 1,
				slidesPerView: 4,
				slidesPerGroup: 1,
				// loop: true,
				// loopFillGroupWithBlank: true,
				// pagination: {
				//   el: ".swiper-pagination",
				//   clickable: true,
				// },
				navigation: {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev",
					disabledClass: "swiper-button-disabled",
				},
				// spaceBetween: 100,
				// effect: 'fade',
				// fadeEffect: {
				//   crossFade: true,
				// },
				// autoplay: {
				//   delay: 8000,
				//   stopOnLastSlide: false,
				//   disableOnInteraction: false,
				// },
				on: {
					// slideChangeTransitionEnd() {
					// that.progressPercent = 0
					// },
				},
			});
		}, 1000);
	},
	// 组件方法
	methods: {
    noCustom() {
      this.$message.error('此职位暂未接入客服');
    },
		async getJobDetail() {
			console.log("this.id", this.id);
			try {
				const { data } = await getJobDetailApi(this.id, this.jobClassify);
				console.log("data", data);
				if (data.status === 200) {
					console.log(data);
					this.jobDetail = disposeJobListData(data.data.record);
					this.jobDetail = {
						...this.jobDetail,
						...data.data,
					};
					this.jobDetail.jobDesp = data.data.record.jobDesp.replaceAll("*****", "");
					this.customServiceUrl = data.data.customServiceUrl;
					this.jobPoses = data.data.jobPoses;
					this.agency = data.data.record.supplier;
					this.customServiceUsers = data.data.customServiceUsers;

					if (this.jobClassify == 1) {
						this.positionInfo = data.data.store;
						this.store = data.data.store;
						this.positionInfo.desc = this.positionInfo.detailPosition;
						this.positionInfo.containerName = "mapContainer";
						this.positionInfo.name = this.positionInfo.aliasName;
						this.jobDetail.district = disposeJobListData(data.data.store).district;
					} else {
						this.positionInfo = data.data.record;
						this.store = data.data.record;
						this.positionInfo.desc = this.positionInfo.storeAddr;
						this.positionInfo.containerName = "mapContainer";
						this.positionInfo.name = this.positionInfo.storeName;
						this.positionInfo.lat = this.positionInfo.storeLat;
						this.positionInfo.lng = this.positionInfo.storeLng;
						this.jobDetail.district = this.positionInfo.storeDistrict;
					}
					if (data.data.onSiteUsers) {
						this.onSiteUsersInfo = data.data.onSiteUsers.map((item) => `${item.aliasName} ${item.tel}`).join(", ");
					}

					// console.log(this.jobDetail.jobRequestLabelNames)
					// if(this.jobDetail.jobRequestLabelNames){
					//   this.jobDetail.jobRequestLabelNames = this.jobDetail.jobRequestLabelNames.split(',')
					// }

					// if(this.jobDetail.jobSpecialLabelNames){
					//   this.jobDetail.jobSpecialLabelNames = this.jobDetail.jobSpecialLabelNames.split(',')
					// }

					this.skeletonshow = false;
					console.log(this.jobDetail);
					console.log(this.jobPoses);
					let newdata = {
						id: data.data.record.id,
						// aliasName: data.data.store.aliasName,
						jobName: data.data.record.jobName,
					};
					this.storeInfo = newdata;
					let regs = /\.(jpg|jpeg|png)(\?.*)?$/;
					// data.data.storeImage.forEach((item) => {
					//   if (regs.test(item.url.toLowerCase())) {
					//     this.storeImage.push(item.url)
					//   }
					// })
					// console.log(this.storeImage);
					let storeImage = [];
					let storeVideo = [];
					if (data.data.storeImage) {
						data.data.storeImage.forEach((item) => {
							console.log(item.url);

							if (regs.test(item.url.toLowerCase())) {
								storeImage.push(item.url);
							} else {
								storeVideo.push(item.url);
							}
						});
					}

					if (data.data.images) {
						data.data.images.forEach((item) => {
							console.log(item.url);

							if (regs.test(item.url.toLowerCase())) {
								storeImage.push(item.url);
							} else {
								storeVideo.push(item.url);
							}
						});
					}
					this.jobDetail.up_time = this.timeShowXXX2(this.jobDetail.updateTime)
					this.storeImage = [...storeImage, ...storeVideo];
					console.log("this.storeImage", this.storeImage);
				} else {
					this.$message.warning("数据获取失败");
				}

				//  = data.data.recordList;
				// console.log(data);
				// console.log(this.jobDetail);
			} catch (error) {
				console.log(error);
			}
		}, 
		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}天前`;
			}
		},
		/**
		 * 获取登录人对应的客户经理信息
		 */
		getUserManager() {
			getUserManagerApi().then(({ data }) => {
				console.log(data);
				// this.$store.commit('setManagerInfo', data.data)
				this.managerInfo = data.data;
				// console.log('+++++++++++++++++++++++++', this.$store)
			});
		},
		/**
		 * 职教职培报名点击
		 */
		showRecord(info) {
			console.log(info);
			this.currentInfo = info;
			this.recordShow = true;
			// window.open(`https://jinshuju.net/f/ohFOxo?x_field_1=${this.jobDetail.vocationalName}&background=white&banner=show&embedded=true&inner_redirect=false`);
		},
		// 录单弹出层的关闭
		handleCancel() {
			this.visible = false;
			this.previewVisible = false;
			let movie = document.querySelector("#movie");
			console.dir(movie);
			movie.pause();
			// this.form = {
			//   // 录单数据
			//   name: '',
			//   tel: '',
			//   peoplecard: '',
			//   username: '',
			// }
		},
		// 录单提交按钮的回调
		handleOk() {
			this.$refs.ruleForm.validate((ispass, no) => {
				// console.log(ispass);
				if (ispass) {
					this.confirmLoading = true;

					setTimeout(() => {
						this.confirmLoading = false;
						this.visible = false;
					}, 2000);
				} else {
					// console.log(123);
				}
				console.log(no);
			});
		},
		// 弹出录单模态框
		// showmodal() {
		//   this.visible = true;
		//   console.log(this.id);
		// },
		showmodal() {
			this.visible = true;
			// this.apply = item;
			// console.log(this.apply);
			// console.log(id);
		},
		onClose() {
			this.visible = false;
			this.form = {
				// 录单数据
				name: "",
				peoplecard: "",
				gender: "", // 性别
				nation: "", // 民族
				location: "", // 家庭住址
				firm: "", // 公司名
				post: "", // 岗位
				pattern: "", // 模式
				policy: "", // 代理政策
				proxy: "", // 代理
				facedate: "", // 面试时间
			};
		},
		torecord(item) {
			// 跳转到路由新页面的方法
			console.log(item);
			// let userinfo = JSON.stringify(item);
			console.log(this.jobDetail);
			console.log(this.storeInfo);
			this.storeInfo.currentPageNum = this.currentPageNum;
			console.log(this.storeInfo);
			this.$router.push({ name: "recordbill", params: this.storeInfo });
			sessionStorage.setItem("CURRENT_FIRM", JSON.stringify(this.storeInfo));
		},
		getSalaryClassifyValue(salaryClassify, salaryClassifyValue) {
			return getSalaryClassifyValue(salaryClassify, salaryClassifyValue);
		},
		/**
		 *  图片预览点击
		 *
		 *
		 */
		showImage(idx, type) {
			var that = this;
			console.log(that.storeImage);
			if (this.from == "vocational") {
				that.vocationalImgList.forEach((item, index) => {
					if (that.isImg(item)) {
						that.imgList.push(item);
					}
				});
			} else {
				that.storeImage.forEach((item, index) => {
					if (that.isImg(item)) {
						that.imgList.push(item);
					}
				});
				if (type == "logo") {
					that.imgList.unshift(that.jobDetail.logo || that.jobDetail.store.logo);
				}
			}

			this.$viewerApi({
				options: { initialViewIndex: idx },
				images: this.imgList,
			});

			// }
		},
		isImg(str) {
			console.log(str);
			let regs = /\.(jpg|jpeg|png)(\?.*)?$/;
			return regs.test(str);
		},

		copyText() {
			console.log(123);
			var clipboard = new Clipboard(".copy", {
				// .copy 是点击的触发元素
				target: function () {
					// 通过target指定要复印的节点
					return document.querySelector(".copyInfo"); // .copyInfo 是要复制的目标内容
				},
			});
			clipboard.on("success", (e) => {
				// success 是成功的回调 success => error 可以捕获复制失败的异常信息
				console.log(e);
				this.$message.success("复制成功");
			});
		},
		toList() {
			// 跳转到列表页
			this.$router.push({
				path: this.from == "vocational" ? "/list?type=vocational" : "/list?",
				// query: {
				// 	pagenum: this.currentPageNum || "",
				// },
			});
		},
		handlePreview(file) {
			this.previewImage = file;
			this.previewVisible = true;
		},

		viewDetail(){
			let that = this;
			console.log('ces',that.jobDetail.returnFeeDesp);
			const h = this.$createElement;
			this.$info({
        title: that.jobDetail.returnFeeDesp || '-',
        onOk() {},
      });
		}
	},
};
</script>

<style scoped lang="less">
.special-dropdown .ant-dropdown-menu-item:hover {
	background-color: #fff;
}
.special-dropdown ul > li {
	border-bottom: 1px solid #eee;
	line-height: 30px;
}
.special-dropdown ul > li:last-child {
	border-bottom: 0;
}

.detail-container {
	background-color: #f0f0f0;
	// overflow: hidden;
	// border-top: 1px solid #eeefef;

	// background-color: #f6f6f6;
}
/deep/ .ant-form {
	// overflow: auto;
	margin-bottom: 50px;
}
// 录单模态框样式
/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-modal {
//   top: 30px !important;
// }
// .modal {
//   .ant-form-item {
//     margin-top: -8px;
//     /deep/ .ant-form-item-label {
//       line-height: 22px;
//     }
//     .ant-input {
//       // width: 430px;
//       height: 40px;
//       // border: none;
//       border: 1px solid #dddddd;
//       box-shadow: none !important;
//       // background-color: #f6f6f6;
//     }
//   }
//   /deep/ .ant-modal-footer {
//     padding: 10px 24px;
//     .ant-btn {
//       &: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-modal-body {
//     padding: 24px 24px 8px 24px;
//     overflow: auto;
//     height: 630px;
//     max-height: 630px !important;
//   }
// }
/deep/ .maincontent {
	// display: flex;
	// justify-content: space-between;
	margin-top: 12px;
	.maincontentleft {
		width: 800px;
		text-align: left;
		background-color: #ffffff;
		border-radius: 6px;
		margin: 0 auto;
		overflow: hidden;
		margin-bottom: 20px;
		.subset {
			padding: 20px;
			// margin-bottom: 16px;
			// width: 914px;
			background-color: #fff;
			// height: 302px;
			border-radius: 6px;
			// border: 1px solid #ededed;
			display: flex;
			justify-content: space-between;
			.subsetleft {
				display: flex;
				flex-direction: column;
				.info {
					display: flex;
				}
				.imgbox {
					width: 186px;
					height: 186px;
					margin-right: 20px;
					overflow: hidden;
					position: relative;
					// .slick-active {
					//   button {
					//     background-color: #fe6a00 !important;
					//   }
					// }
					// .slick-track {
					// transition: all 0s ease 0s !important;
					// }
					img {
						position: absolute;
						// width: 100%;
						// height: 100%;
						height: 100%;
						// width: 100%;
						top: 50%;
						left: 50%;
						// left: 0;
						// top: 0;
						// right: 0;
						// bottom: 0;
						// margin: auto;
						transform: translateX(-50%) translateY(-50%);
					}

					.ant-carousel {
						.slick-slide {
							text-align: center;
							height: 186px;
							// height: 160px;
							// line-height: 160px;
							// background: #364d79;
							overflow: hidden;
						}
						.custom-slick-arrow {
							width: 35px;
							height: 35px;
							font-size: 35px;
							margin-top: -20px;
							border-radius: 50%;
							color: #fff;
							background-color: rgba(31, 45, 61, 0.11);
							opacity: 0.6;
						}
						.custom-slick-arrow:before {
							// color: #1890ff;
							display: none;
						}
						.custom-slick-arrow:hover {
							// background-color: #ff6a00cc;
							opacity: 0.8;
						}
						.slick-slide h3 {
							color: #fff;
						}
					}
				}
				.jobinfobox {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
          // .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;
          //       }
          //     }
              .hotTag {
							background-color: #1890ff;
							color: #fff;
							font-size: 12px;
							padding:2px 4px;
              border-radius: 2px;
              position: relative;
              top: -3px;
							i {
								margin-right: 4px;
								color: #fff;
							}
						}
					.jobname {
						// margin: 12px 0;
						font-size: 20px;
						font-weight: 600;
						text-align: left;
						color: #333;
						line-height: 30px;
						// &:hover {
						//   color: #1890ff;
						// }
					}
					.jobinfo {
						margin-top: 12px;
						font-size: 16px;
						font-weight: 400;
						text-align: left;
						color: #999;
						line-height: 26px;
					}
					.jobtag,
					.jobtag1 {
						margin-top: 12px;
						text-align: left;
						// span:first-child {
						//   color: #1890ff;
						//   background: rgba(254, 97, 0, 0.1);
						// }
						span {
							margin-right: 8px;
							font-size: 14px;
							padding: 0px 12px;
							border: none;
							height: 26px;
							line-height: 26px;
							// background: rgba(51, 51, 51, 0.06);
							border-radius: 4px;
						}
					}
					.jobtag1 {
						span {
							background-color: #f5f5f5;
							color: #666;
						}
					}
					.jobpricemonth {
						// margin-top: 16px;
						font-size: 16px;
						font-weight: 400;
						text-align: left;
						color: #666;
						line-height: 26px;
					}
					.jobpricehour {
						// margin-top: 16px;
						font-size: 16px;
						font-weight: normal;
						text-align: left;
						color: #ff4400;
						// line-height: 24px;
						span {
							vertical-align: baseline;
							font-weight: 600;
							font-size: 22px;
							line-height: 26px;
						}
					}
					.billbutton {
						display: flex;
						justify-content: flex-start;
						margin-top: 15px;
						span {
							padding: 0 16px;
							height: 36px;
							margin-right: 20px;
							border-radius: 4px;
							background-color: rgba(254, 97, 0, 0.1);
							font-size: 18px;
							font-weight: normal;
							color: #1890ff;
							line-height: 34px;
						}
						// button {
						//   width: 160px;
						//   // padding: 0 16px;
						//   height: 36px;
						//   border: none;
						//   background-color: #1890ff;
						//   color: #fff;
						//   font-weight: normal;
						//   font-size: 18px;
						// border-radius: 4px;
						//   cursor: pointer;
						//   &:hover {
						//     background-color: #ff7614;
						//   }
						// }
						.dropdown {
							width: 160px;
							padding: 0 16px;
							height: 36px;
							border: none;
							background-color: #1890ff;
							color: #fff;
							font-weight: normal;
							font-size: 18px;
							border-radius: 4px;
							text-align: center;
							line-height: 36px;
							cursor: pointer;
							&:hover {
								color: #fff;

								background-color: #1890ffcc;
							}
						}
					}
				}
			}
			.subsetright {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;
				.topbox {
					width: 116px;
					height: 54px;
					text-align: center;
					overflow: hidden;
					border-radius: 4px;
					line-height: 30px;
					div {
						// font-weight: normal;
						font-size: 16px;

						span:first-of-type {
							font-size: 20px;
							// font-weight: normal;
						}
					}
					div:first-child {
						height: 24px;
						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;
						font-size: 18px;
						span:last-child {
							font-size: 16px;
						}
					}
				}
				.sub-bottombox {
					font-size: 16px;

					.bottombox1 {
						width: 116px;
						height: 32px;
						line-height: 30px;
						font-size: 16px;
						// border: 1px solid rgba(77, 87, 94, 0.3);
						border-radius: 4px;
						border: 1px solid #1890ff;
						background-color: #fff;
						color: #1890ff;
						cursor: pointer;
						&:hover {
							color: #fff;

							background-color: #1890ff;
						}
					}
					.jobDespBtn {
						width: 116px;
						height: 32px;
						line-height: 30px;
						font-size: 16px;
						margin-right: 20px;
						// border: 1px solid rgba(77, 87, 94, 0.3);
						border-radius: 4px;
						border: 1px solid #d9d9d9;
						background-color: #fff;
						color: #333;
						transition: none;
						cursor: pointer;
						&:hover {
							color: #1890ff;
							border: 1px solid #1890ff;

							// background-color: #ff791a;
						}
						i {
							color: #1890ff;
						}
					}
					.norecruitment {
						border: 1px solid #ccc;
						margin-left: 16px;
						color: #ccc;
						cursor: default;
						&:hover {
							border: 1px solid #ccc;
							background-color: #fff;
							color: #ccc;
						}
					}
				}
			}
		}
		.proxy {
			margin-bottom: 16px;
			div {
				white-space: break-spaces;
			}
			// padding: 20px !important;
		}
		.jobinformationbox,
		.proxy {
			width: 780px;
			// border: 1px solid #eeefef;
			overflow: hidden;
			border-radius: 4px;
			padding: 20px 0;
			background-color: #fff;

			h1 {
				display: flex;
				justify-content: space-between;
				font-size: 18px;
				// margin-bottom: 20px;
				> span {
					font-size: 14px;
					color: #1890ff;
					text-decoration: underline;
					cursor: pointer;
				}
				.infotitle {
					display: flex;
					margin-top: -2px;
					border-bottom: 1px solid #eeefef;
					span {
						margin-bottom: -1px;
						height: 30px;
						padding: 1px 12px 0 12px;
						margin-right: 6px;
						background-color: #fafafa;
						border: 1px solid #ededed;
						border-bottom: none;
						cursor: pointer;
						border-radius: 4px 4px 0 0;
					}
					.active {
						background-color: #fafafa;
						// font-weight: bold;0
						color: #1890ff;
					}
				}
				span {
					height: 25px;
				}
			}
		}
		#tip,
		#other {
			div:last-child {
				width: 640px;
				padding: 12px 16px;
				font-size: 16px;
				border: 1px solid #ededed;
				color: #333;
			}
		}
		.copy {
			width: 46px !important;
			position: relative;
			padding: 0px 8px !important;
			float: right;
			top: 6px;
			/* right: 20px; */
			bottom: 4px;
			font-size: 14px !important;
			border: 1px solid #1890ff !important;
			color: #1890ff !important;
			line-height: 22px;
			text-align: center;
			border-radius: 4px;
			cursor: pointer;
			&:hover {
				color: #fff !important;
				background-color: #1890ff !important;
			}
		}
		.jobinformationbox {
			h1 {
				position: relative;
				.copy {
					position: absolute;
					padding: 0px 12px;
					right: 20px;
					bottom: 4px;
					font-size: 14px;
					border: 1px solid #1890ff;
					color: #1890ff;
					// border-radius: 5px;
					line-height: 22px;
					text-align: center;
					cursor: pointer;
					&:hover {
						color: #fff;
						background-color: #1890ff;
					}
				}
			}
			.navigation {
				position: relative;
				flex: 1;
				margin-top: 40px;
				// width: 70px !important;
				.ant-affix {
					left: calc(50% + 156px) !important; // 手动定位固定位置
				}
				.ant-anchor-wrapper {
					padding-left: 5px !important;
				}
				.ant-anchor-ink-ball {
					// border-color: #1890ff;
					width: 12px;
					height: 12px;
					border: 3px solid #1890ff;
				}
				.ant-anchor-link {
					padding: 10px 20px !important;
					a {
						color: #666;
						font-size: 18px;
						font-weight: 600;
					}
				}
				.ant-anchor-link-active {
					a {
						color: #1890ff !important;
						// font-weight: bold;
					}
				}
			}

			.baseInfoContent {
				width: 748px;
				> div {
					> div:first-child {
						font-size: 16px;
						color: #333;
						font-weight: 600;
					}
				}

				.condition {
					.conditiontable {
						display: flex;
						width: 640px;
						flex-direction: column;
						font-size: 16px;
						border-radius: 6px;
						border: 1px solid #ededed;
						> li {
							display: flex;
							align-items: center;
							border-bottom: 1px solid #ededed;

							&:last-child {
								border-bottom: 0px;
							}
						}

						li {
							display: flex;
							min-height: 44px;
							width: 100%;
							span:first-child {
								padding: 12px 16px;
								width: 124px;
								text-align: center;
								border-right: 1px solid #ededed;
								color: #666;
								// font-weight: bold;
							}
							span:last-child {
								flex: 1;
								display: flex;
								color: #333;
								padding: 12px 16px;
								white-space: break-space;
								align-items: center;
							}
						}
						li:not(li:last-child) {
							border-bottom: 1px solid #ededed;
						}
					}
				}
			}
		}
	}
	.maincontentright {
		// position: sticky;
		// top: 0;
		width: 240px;
		> div {
			margin-bottom: 16px;
		}
		.jobDetailInfo {
			width: 240px;
			overflow: hidden;
			// height: 114px;
			// padding: 0 20px 0px 20px;
			border-radius: 4px;
			background-color: #fff;
			text-align: left;
			h1 {
				position: relative;
				text-align: center;
				margin-bottom: 0;

				span {
					position: absolute;
					right: 10px;
					color: #1890ff;
				}
			}
			p {
				font-size: 16px;
				word-break: break-all;
				white-space: break-spaces;
				padding: 16px 20px;
			}
		}
		.hotphone {
			overflow: hidden;
			position: relative;
			width: 240px;
			height: 200px;
			// height: 114px;
			// padding: 0 20px 20px 20px;
			border: 1px solid #eee;
			border-radius: 6px;
			background-color: #fff;
			text-align: center;
			// p {
			// 	position: absolute;
			// 	width: 100%;
			// 	font-size: 20px;
			// 	color: #333;
			// 	font-weight: 600;
			// 	top: 75%;
			// 	left: 50%;
			// 	transform: translateX(-50%) translateY(-50%);
			// }
		}
		.companyinfo {
			overflow: hidden;
			// padding: 0 20px 20px 20px;
			border-radius: 6px;
			border: 1px solid #ededed;
			background-color: #fff;

			.companydetail {
				// width: 200px;
				p:first-of-type {
					padding: 20px;
					font-size: 18px;
					font-weight: normal;
					text-align: left;
					color: #4d575e;
					margin-bottom: 12px;
					line-height: 22px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.imgbox {
					// width: 230px;
					display: flex;
					align-items: center;
					height: 172px;
					margin-bottom: 12px;
					img {
						width: 100%;
					}
				}
				p:last-of-type {
					font-size: 16px;
					text-align: left;
					color: #788085;
					line-height: 22px;
					margin-bottom: 15px;
				}
			}
			.companylocation {
				// width: 200px;
				h1 {
					// height: 50px;
					// line-height: 50px;
					padding-top: 10px;
					text-align: center;
					// border-top: 1px solid #eeefef;
				}
				.imgbox {
					width: 200px;
					height: 200px;
					margin-top: 20px;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.recommendposition {
			border: 1px solid #ededed;
		}
	}
	.leftDesc {
		.ant-descriptions-view {
			width: 760px;
			border-radius: 6px;
			// border: 0 !important;
		}
	}

	.leftDesc.ant-descriptions-bordered table {
		// min-height: 352px !important;
		tbody {
			tr {
				height: 44px;
			}
		}
	}
	.leftDesc.ant-descriptions-bordered .ant-descriptions-item-label {
		width: 124px;
		text-align: center;
		font-weight: normal;
		background-color: #fff;
		padding: 8px 0;
		font-size: 16px;
		color: #666;
		letter-spacing: 1px;
		// padding: 8px 0px;
		/*vertical-align: baseline;*/
	}

	.leftDesc.ant-descriptions-bordered .ant-descriptions-item-content {
		white-space: break-spaces;
		text-align: left;
		// padding-left: 8px;
		font-size: 16px;
		color: #333;
	}
	.boubleLevel > .ant-descriptions-view > table > tbody > .ant-descriptions-row:last-child > .ant-descriptions-item-content {
		// padding: 0 !important;
		.noborder {
			.ant-descriptions-view {
				// border: 0 !important;
			}
		}
	}
	// .right
}
.showInfo {
	width: unset;
	white-space: pre-wrap;
	word-break: break-all;
	line-height: 28px;
	color: #1890ff !important;
	border-radius: 6px;
}
.hotTel {
	position: fixed;
	top: 50%;
	left: calc(50vw + 616px);
	width: 104px;
	height: 110px;
	background-color: #fff;
	box-shadow: 5px 0px 10px 3px #eee;
	text-align: center;
	padding-top: 10px;
	> i {
		font-size: 40px;
	}
	> p {
		font-size: 16px;
		text-align: center;
		color: #1890ff;
	}
	&:hover > div {
		display: block;
	}
	div {
		position: absolute;
		display: none;
		height: 110px;
		width: 200px;
		left: -236px;
		bottom: 0px;
		text-align: center;
		box-shadow: 5px 0px 10px 3px #ddd;
		background-color: #fff;
		> p:first-child {
			padding: 14px 0;
			border-bottom: 1px solid #eee;
		}
		> p:last-child {
			padding: 16px 0;
			font-size: 24px;
			color: #1890ff;
		}
	}
}
.mask {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.06);
	top: 0;
	left: 0;
	z-index: 999;
	pointer-events: none;
}
.swiperBox {
	width: 350px;
	margin-top: 20px;
	position: relative;
	.swiper-button-next {
		right: 0px;
		background-image: url(http://matripe.oss-cn-beijing.aliyuncs.com/img/right.svg);
	}
	.swiper-button-prev {
		left: -10px;
		background-image: url(http://matripe.oss-cn-beijing.aliyuncs.com/img/left.svg);
	}
}
#swiper {
	width: 340px;
	overflow: hidden;
	.swiper-wrapper {
		// width: 460px;
	}
	.swiper-slide {
		img {
			width: 80px;
			height: 45px;
			object-fit: cover;
			// width: 100%;
		}
	}
}
.swiper-button-disabled {
	display: none;
}
.spic.ant-modal-wrap {
	text-align: center;
}
/deep/ .spic {
	.ant-modal {
		width: auto !important;
		display: inline-block;
	}
	.ant-modal-close {
		top: 24px;
		right: 6px;
		position: fixed;
		color: #fff;

		.ant-modal-close-x {
			font-size: 30px;
		}
	}
	.ant-modal-content {
		background-color: transparent;

		.ant-modal-body {
			padding: 0;
		}

		img {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			-khtml-user-select: none;
			user-select: none;
		}
	}
}
.rightFixed {
	/deep/.ant-anchor-ink {
		display: none;
	}
}
.default_avatar {
	width: 186px;
	height: 186px;
	display: flex;
	align-items: center;
	text-align: center;
	background-color: #d85043;
	color: #fff;
	font-size: 44px;
	line-height: 1.3;
}
</style>
