<template>
	<div @click="visiblePost = false">
		<!-- 发布岗位 -->
		<el-dialog @close="close" :close-on-click-modal="false" v-model="dialogPostPush" title="发布招聘" width="70%">
			<template #header>
				<div class="my-header flex align-center" style="background-color: red;">
					<div class="my-header-title" style="font-weight: bold;">
						发布招聘
					</div>
				</div>
			</template>
			<div class="" style="padding: 0 20px;">
				<el-form v-loading="loadingPostpush" ref="formPost" size="large"
					class="flex align-center justify-between" label-position="top" :inline="true" :model="postPushForm"
					label-width="120px">
					<el-form-item prop="isDue" :rules="[{ required: true, message: '请选择招聘模式', trigger: 'change', },]"
						class="row45" label="招聘模式">
						<el-radio-group v-model="postPushForm.isDue" :disabled="type == 'updata'">
							<el-radio :value="0">普通岗位招聘(剩余{{ lastPostTimes }}个)</el-radio>
							<el-radio :value="1">急聘(剩余{{ lastDueTimes }}个)</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item prop="postType" :rules="[{ required: true, message: '请选择招聘类型', trigger: 'blur', },]"
						class="row45" label="招聘类型">
						<el-select style="width: 100%;" v-model="postPushForm.postType" placeholder="请选择招聘类型" :disabled="type == 'updata'">
							<el-option v-for="(item, index) in postTypeList" :key="index" :label="item"
								:value="index" />
						</el-select>
					</el-form-item>
					<el-form-item prop="ruleClassifyName"
						:rules="[{ required: true, message: '请选择岗位类型', trigger: 'blur', },]" class="row45" label="岗位类型">
						<el-input :disabled="type == 'updata' && postPushForm.status != 3" @click.stop="openPostPush()"
							placeholder="请选择岗位类型" readonly class="inputClass" v-model="postPushForm.ruleClassifyName" />
					</el-form-item>

					<el-form-item prop="positionTag" :rules="[{ required: true, message: '请选择跨境标签', trigger: 'blur', },]"
						class="row45" label="跨境标签">
						<el-input @click.stop="openIndustry()"
							placeholder="请选择跨境标签" readonly class="inputClass" v-model="positionTagDisplay" />
					</el-form-item>
					
					<el-form-item prop="address" :rules="[{ required: true, message: '请输入工作地址', trigger: 'blur', },]"
						class="row45" label="工作地址">
						<el-autocomplete style="width: 100%;" @input="workInput" v-model="postPushForm.address"
							:fetch-suggestions="querySearchAsync" placeholder="请输入工作地址" @select="handleSelect" />
					</el-form-item>
					<el-form-item prop="detailedAddress" :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur', },]"
						class="row45" label="详细地址">
						<el-input placeholder="请输入详细地址" class="inputClass" v-model="postPushForm.detailedAddress" />
					</el-form-item>
					<el-form-item prop="experience" :rules="[{ required: true, message: '请选择经验要求', trigger: 'blur', },]"
						class="row45" label="经验要求">
						<el-select style="width: 100%;" v-model="postPushForm.experience" placeholder="请选择经验要求">
							<el-option v-for="item in workList" :key="item.value" :label="item.value"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item prop="education" :rules="[{ required: true, message: '请选择学历要求', trigger: 'blur', },]"
						class="row45" label="学历要求">
						<el-select style="width: 100%;" v-model="postPushForm.education" placeholder="请选择学历要求">
							<el-option v-for="item in schoolList" :key="item.value" :label="item.value"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item prop="salaryRange"
						:rules="[{ required: true, message: '请选择薪资范围', trigger: 'blur', },]" class="row45" label="薪资范围">
						<div style="display: flex; gap: 10px; align-items: center; width: 100%">
							<!-- 最低薪资 -->
							<el-select v-model="minSalary" placeholder="最低薪资" style="flex: 1">
								<el-option v-for="item in moneyList" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
							<span>-</span>
							<!-- 最高薪资 -->
							<el-select v-model="maxSalary" placeholder="最高薪资" style="flex: 1">
								<el-option
									v-for="item in moneyList.filter(i => parseK(i.value) >= parseK(minSalary))"
									:key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
					</el-form-item>
					<el-form-item prop="salaryTimes"
						:rules="[{ required: true, message: '请选择薪资福利', trigger: 'blur', },]" class="row45" label="薪资福利">
						<el-select style="width: 100%;" v-model="postPushForm.salaryTimes" placeholder="请选择薪资福利">
							<el-option v-for="item in salaryTimesList" :key="item.value" :label="item.value"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item prop="welfareTag" :rules="[{ required: true, message: '请选择岗位福利', trigger: 'blur' }]"
						class="row45" label="岗位福利">
						<el-select v-model="postPushForm.welfareTag" multiple filterable allow-create
							default-first-option placeholder="请选择或输入岗位福利" style="width: 100%">
							<el-option v-for="item in flList" :key="item" :label="item" :value="item" />
						</el-select>
					</el-form-item>
					<el-form-item prop="positionDetails"
						:rules="[{ required: true, message: '请输入岗位介绍', trigger: 'blur', },]" class="row45" label="岗位介绍">
						<!-- <el-input v-model="postPushForm.positionDetails" :rows="4" type="textarea"
							placeholder="请输入岗位介绍" /> -->
						<Editor style="width: 100%;min-height: 200px;" v-model="postPushForm.positionDetails"
							:defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
					</el-form-item>
					<el-form-item class="row45"></el-form-item>
					<el-form-item class="row45">
						<div style="width: 100%;margin-top: 20px;" class="flex align-center justify-end">
							<el-button @click="dialogPostPush = false" style="width: 100px;" type="Info">取消</el-button>
							<el-button @click="savePostPush()" style="width: 100px;margin-left: 30px;"
								type="primary">发布</el-button>
						</div>
					</el-form-item>

				</el-form>
			</div>

			<!-- 协议弹窗 -->
			<agreement title="岗位发布协议" v-if="dialogAgreements" :dialogAgreements="dialogAgreements" typeid="333"
				@closeAgree="closeAgree" />
		</el-dialog>
		<!-- 岗位选择 -->
		<el-dialog @close="type = false" class="workDialog" :draggable="true" destroy-on-close align-center center
			v-model="workDialog" title="工作地址">
			<template #header>
				<div class="my-header flex align-center">
					<div class="my-header-title" style="font-weight: bold;">
						求职岗位
					</div>
					<div class="my-header-title" style="margin-left: 40px;">
						<el-autocomplete style="width: 300px;" prefix-icon="Search" v-model="workSearch"
							:fetch-suggestions="querySearchAsyncWork" placeholder="请输入岗位名称"
							@select="handleSelectWork" />
					</div>
				</div>
			</template>
			<div class="work flex align-center">
				<div class="work-left flex align-center justify-center">
					<div class="work-left-box">
						<ul class="work-left-box-list" style="overflow: auto">
							<li @click="workCurrent = index" :class="workCurrent == index ? 'workActive' : ''"
								v-for="(item, index) in workTypeList" :key="index"
								class="work-left-box-list-item flex align-center justify-center">
								<div class="work-left-box-list-items">
									{{ item.ruleClassifyName }}
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="work-right flex align-center justify-center">
					<div class="work-right-box">
						<div class="work-right-box-item" v-for="(item, index) in rightList" :key="index">
							<div class="work-right-box-item-title">
								{{ item.title }}
							</div>
							<div class="work-right-box-item-name flex align-center flex-wrap">
								<div @click="selectJob(ite)" class="work-right-box-item-names"
									v-for="(ite, ind) in item.childrens">
									{{ ite.ruleClassifyName }}
								</div>
							</div>
						</div>
						<el-empty v-if="rightList.length == 0" description="暂无岗位" />
					</div>
				</div>
			</div>
		</el-dialog>

		<!-- 从事方向选择 -->
		<el-dialog class="workDialog" @close="type = false" :draggable="true" destroy-on-close align-center center
			v-model="industryDialog" title="选择从事方向">
			<template #header>
				<div class="my-header flex align-center">
					<div class="my-header-title" style="font-weight: bold">
						选择从事方向
					</div>
					<div class="my-header-title flex align-center" style="margin-left: 40px; width: 600px">
						<el-select @remove-tag="removeTag" :collapse-tags="true" :max-collapse-tags="5"
							class="my-header-title-se" multiple-limit="20" v-model="postPushForm.positionTag" multiple
							placeholder="请选择从事方向">
							<el-option v-for="item in industryArrList" :key="item.postSkillName"
								:label="item.postSkillName" :value="item.postSkillName" />
						</el-select>
						<span style="margin-left: 10px;font-size: 13px;color: #999999;">{{ postPushForm.positionTag.length }}/20</span>
						<el-button @click="addHangye()" style="margin-left: 10px" type="primary">确定</el-button>
					</div>
				</div>
			</template>
			<div class="preference-grid">
				<div v-for="(parent, pIndex) in industryList" :key="pIndex" class="preference-group">
					<!-- 一级标题 -->
					<div class="preference-title">
						<span>{{ parent.postSkillName }}</span>
					</div>

					<!-- 二级可选项 -->
					<div class="preference-children">
						<div v-for="(child, cIndex) in parent.childrenList" :key="cIndex" class="preference-tag"
							:class="{ active: postPushForm.positionTag.includes(child.postSkillName) }"
							@click="togglePreference(child.postSkillName)">
							<span>{{ child.postSkillName }}</span>
						</div>
					</div>
				</div>
				<!-- 已选择的自定义标签 -->
				<div v-for="(item, index) in customTags" :key="index" style="margin-right: 10px; display: inline-block;">
					<el-tag size="large" closable :disable-transitions="false" @close="handleClose(postPushForm.positionTag.indexOf(item))">
						{{ item }}
					</el-tag>
				</div>
				<!-- 自定义标签输入框 -->
				<el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" style="width: fit-content;"
					size="default" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
				<el-button v-else class="button-new-tag ml-1" size="default" @click="inputVisible = true">
					+ 新增
				</el-button>
				<el-empty v-if="industryList.length == 0" description="暂无从事方向" />
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	ElMessageBox,
	ElMessage,
} from 'element-plus'
import axios from 'axios';
import jsonp from 'axios-jsonp'
import agreement from '../agreement/agreement.vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {
	Editor,
	Toolbar
} from '@wangeditor/editor-for-vue'
export default {
	components: {
		agreement,
		Editor,
		Toolbar
	},
	props: {
		// 显示弹窗
		dialogPostPushs: {
			type: Boolean,
			default: false
		},
		//发布类型
		type: {
			type: String,
			default: 'save'
		},
		//岗位id
		postPushId: {
			type: String || Number,
			default: ''
		}
	},
	
	data() {
		return {
			workTypeList: [], //岗位类型
			workCurrent: 0,
			workSearch: '', //岗位搜索
			workDialog: false, //是否打开岗位选择
			dialogAgreements: false, //协议弹窗
			checked: false, //是否同意协议
			industryArrList: [], // 可选择的从事方向列表
			industryList: [], // 从事方向列表
			industryDialog: false, // 是否打开从事方向选择
			availableBackendTags: [], // 可用的后端标签
			inputValue: '',
			inputVisible: false,
			postTypeList: ["社招全职", "应届生校园招聘", "实习生招聘", "兼职招聘"],
			postPushForm: {
				isDue: 0,//岗位招聘模式
				postType: '', //岗位类型
				// stationName: '', //岗位名称
				ruleClassifyName: '', //岗位类型
				ruleClassifyId: '', //岗位id
				address: localStorage.getItem('companyAddressInfo') ? JSON.parse(localStorage.getItem('companyAddressInfo')).address : '', //工作地址
				experience: '', //经验要求
				education: '', //学历要求
				salaryRange: '', //薪资范围
				salaryTimes: '',
				positionTag: [], //从事方向（包含选择的和自定义的）
				welfareTag: [], //岗位福利
				positionDetails: '', //岗位介绍
				province: '', //省
				city: localStorage.getItem('companyAddressInfo') ? JSON.parse(localStorage.getItem('companyAddressInfo')).city : '', //市
				county: localStorage.getItem('companyAddressInfo') ? JSON.parse(localStorage.getItem('companyAddressInfo')).county : '', //区
				lng: localStorage.getItem('companyAddressInfo') ? JSON.parse(localStorage.getItem('companyAddressInfo')).lng : '',
				lat: localStorage.getItem('companyAddressInfo') ? JSON.parse(localStorage.getItem('companyAddressInfo')).lat : '',
				companyId: localStorage.getItem('companyId'),
				detailedAddress: localStorage.getItem('companyAddressInfo') ? JSON.parse(localStorage.getItem('companyAddressInfo')).detailedAddress : '', //详细地址
			},
			minSalary:'',
			maxSalary:'',
			loadingPostpush: false,
			dialogPostPush: false,
			workList: [], //经验要求列表
			schoolList: [], //学历列表
			moneyList: [{ value: "3k", label: "3k" },
				{ value: "4k", label: "4k" },
				{ value: "5k", label: "5k" },
				{ value: "6k", label: "6k" },
				{ value: "7k", label: "7k" },
				{ value: "8k", label: "8k" },
				{ value: "10k", label: "10k" },
				{ value: "12k", label: "12k" },
				{ value: "15k", label: "15k" },
				{ value: "18k", label: "18k" },
				{ value: "20k", label: "20k" },
				{ value: "25k", label: "25k" },
				{ value: "30k", label: "30k" },
				{ value: "35k", label: "35k" },
				{ value: "40k", label: "40k" },
				{ value: "45k", label: "45k" },
				{ value: "50k", label: "50k" },
				{ value: "55k", label: "55k" },
				{ value: "60k", label: "60k" },
				{ value: "65k", label: "65k" },
				{ value: "70k", label: "70k" },
				{ value: "75k", label: "75k" },
				{ value: "80k", label: "80k" },
				{ value: "85k", label: "85k" },
				{ value: "90k", label: "90k" },
				{ value: "95k", label: "95k" },
				{ value: "100k", label: "100k" }], //薪资列表
			screenHeight: 0,
			flList: [
				"五险一金", "定期体检", "年终奖", "带薪年假",
				"员工旅游", "节日福利", "绩效奖金", "零食下午茶",
				"住房补贴", "交通补贴", "餐饮补贴", "通讯补贴"
			],
			salaryTimesList: [
				{
					"value": "12薪",
					"label": "12薪"
				},
				{
					"value": "13薪",
					"label": "13薪"
				},
				{
					"value": "14薪",
					"label": "14薪"
				},
				{
					"value": "15薪",
					"label": "15薪"
				},
				{
					"value": "16薪",
					"label": "16薪"
				},
				{
					"value": "17薪",
					"label": "17薪"
				},
				{
					"value": "18薪",
					"label": "18薪"
				},
				{
					"value": "19薪",
					"label": "19薪"
				},
				{
					"value": "20薪",
					"label": "20薪"
				},
				{
					"value": "21薪",
					"label": "21薪"
				},
				{
					"value": "22薪",
					"label": "22薪"
				},
				{
					"value": "23薪",
					"label": "23薪"
				}
			],
			price: 0,
			editorRef: '',
			editorConfig: {
				placeholder: '请输入岗位介绍'
			},
			lastDueTimes: 0,
			lastPostTimes: 0
		}
	},
	watch: {
		//监听从事方向选择变化
		'postPushForm.positionTag': {
			handler(newItems) {
				newItems.map(item => {
					this.industryList.map(ite => {
						if (ite.childrenList) {
							ite.childrenList.map(it => {
								if (item == it.postSkillName) {
									it.select = true;
								}
							});
						}
					});
				});
			},
			deep: true // 使用deep属性来监听数组中元素的变化
		},
		minSalary(val) {
			this.updateSalaryRange()
		},
		maxSalary(val) {
			this.updateSalaryRange()
		}
	},
	computed: {
		rightList() {
			return this.workTypeList.length > 0 ? this.workTypeList[this.workCurrent].childrens : []
		},
		positionTagDisplay() {
			return this.postPushForm.positionTag.join(',')
		},
		customTags() {
			// 过滤出真正的自定义标签（不在后端标签列表中的标签）
			return this.postPushForm.positionTag.filter(tag => {
				return !this.availableBackendTags.includes(tag);
			});
		}
	},
	mounted() {
		this.screenHeight = window.innerHeight
		this.dialogPostPush = this.dialogPostPushs
		if (this.postPushId) {
			this.getJobInfo()
		}
		// this.getPostType()
		this.IntentionChen()
		this.getSchoolList()
		this.getUserInfoVipList();
		// this.getMoneyList()
		// this.getFuliList()
	},
	methods: {
		//获取vip个人信息
		getUserInfoVipList() {
			this.$Request.get("/app/user/vipData").then((res) => {
				if (res.code == 0) {
					this.lastDueTimes = res.data.lastDueTimes || 0;
					this.lastPostTimes = res.data.lastPostTimes || 0;
				}
			});
		},
		updateSalaryRange() {
			if (this.minSalary && this.maxSalary) {
				const min = this.parseK(this.minSalary)
				const max = this.parseK(this.maxSalary)
				if (max >= min) {
					this.postPushForm.salaryRange = `${this.minSalary}-${this.maxSalary}`
				} else {
					this.postPushForm.salaryRange = ''
				}
			} else {
				this.postPushForm.salaryRange = ''
			}
		},
		parseK(val) {
			return Number(val.replace('k', ''))
		},
		numberToK(num) {
			return `${num / 1000}k`
		},
		// 切换从事方向选择状态
		togglePreference(skillName) {
			// 查找索引
			const index = this.postPushForm.positionTag.indexOf(skillName);

			if (index > -1) {
				// 如果已选择，则取消选择
				this.postPushForm.positionTag.splice(index, 1);
			} else {
				// 如果未选择，检查是否达到选择上限
				if (this.postPushForm.positionTag.length >= 20) {
					ElMessage({
						message: '最多添加二十条',
						type: 'info',
						duration: 1500,
						offset: this.screenHeight / 2
					});
					return;
				}
				// 添加选择
				this.postPushForm.positionTag.push(skillName);
			}
		},
		removeTag(e) {
			this.industryList.map(item => {
				if (item.childrenList.length > 0) {
					item.childrenList.map(ite => {
						if (ite.postSkillName == e) {
							ite.select = false;
						}
					});
				}
			});
		},
		selectJob(info) {
			this.postPushForm.ruleClassifyName = info.ruleClassifyName
			this.postPushForm.ruleClassifyId = info.ruleClassifyId
			this.price = info.price
			this.workDialog = false
		},
		//选择岗位
		handleSelectWork(item) {
			this.postPushForm.ruleClassifyName = item.ruleClassifyName
			this.postPushForm.ruleClassifyId = item.ruleClassifyId
			this.price = item.price
			this.workDialog = false
		},
		// 岗位的搜索
		querySearchAsyncWork(queryString, cd) {
			if (!queryString) {
				cd([])
				return
			}
			let data = {
				ruleClassifyName: queryString
			}
			this.$Request.get('/app/rule/userGetClassify', {
				params: data
			}).then(res => {
				if (res.code == 0) {
					let arr = res.data
					arr.map(item => {
						item.value = item.ruleClassifyName
					})
					cd(arr)
				}
			})
		},
		//editor渲染完成后获取实例
		handleCreated(editor) {
			this.editorRef = editor
		},
		workInput() {
			this.postPushForm.province = '' //省
			this.postPushForm.city = '' //市
			this.postPushForm.county = '' //区
			this.postPushForm.lng = ''
			this.postPushForm.lat = ''
		},
		openAgree() {
			this.dialogAgreements = true
		},
		closeAgree(data) {
			this.dialogAgreements = data
		},
		//发布岗位
		pay(datas, postPushId) {
			this.loadingPostpush = true
			let data = datas;
			if (postPushId) {
				data.postPushId = postPushId
			}
			let companyAddressInfo = {
				city: data.city,
				county: data.county,
				address: data.address,
				lat: data.lat,
				lng: data.lng,
				detailedAddress: data.detailedAddress,
			}
			// 缓存公司地址
			localStorage.setItem('companyAddressInfo', JSON.stringify(companyAddressInfo))
			data.address = data.address + '--' + data.detailedAddress
			this.$Request.post('/app/postPush/savePostPush', data, {
				type: 'json'
			}).then(res => {
				if (res.code == 0) {
					ElMessage({
						message: '发布成功',
						type: 'success',
						duration: 1500,
						offset: this.screenHeight / 2
					})
					this.loadingPostpush = false
					this.dialogPostPush = false

				} else {
					this.loadingPostpush = false
					// ElMessage({
					// 	message: res.msg,
					// 	type: 'error',
					// 	duration: 1500,
					// 	offset: this.screenHeight / 2
					// })
				}
			})
		},
		//获取岗位详情
		getJobInfo() {
			let data = {
				postPushId: this.postPushId
			}
			this.$Request.get('/app/postPush/selectPostPushDetails', {
				params: data
			}).then(res => {
				if (res.code == 0) {
					let obj = res.data
					this.postPushForm.postType = obj.type
					// this.postPushForm.stationName = obj.stationName
					this.postPushForm.ruleClassifyName = obj.ruleClassifyName
					this.postPushForm.ruleClassifyId = obj.ruleClassifyId
					this.postPushForm.address = obj.address.split('--')[0]
					this.postPushForm.detailedAddress = obj.address.split('--')[1]
					this.postPushForm.experience = obj.experience
					this.postPushForm.education = obj.education
					// this.postPushForm.salaryRange = obj.salaryRange
					this.minSalary = obj.minSalary ? this.numberToK(obj.minSalary) : ''
					this.maxSalary = obj.maxSalary ? this.numberToK(obj.maxSalary) : ''
					this.postPushForm.positionTag = obj.positionTag ? obj.positionTag.split(',') : []
					this.postPushForm.welfareTag = obj.welfareTag ? obj.welfareTag.split(';') : []
					this.postPushForm.positionDetails = obj.positionDetails
					this.postPushForm.province = obj.province
					this.postPushForm.city = obj.city
					this.postPushForm.county = obj.county
					this.postPushForm.lng = obj.lng
					this.postPushForm.lat = obj.lat
					this.postPushForm.status = obj.status
					this.postPushForm.salaryTimes = obj.salaryTimes
					// 如果有岗位ID，加载从事方向列表，确保标签能够正确回显
					if (this.postPushForm.ruleClassifyId) {
						this.getIndustryList(false);
					}
					if (this.type == 'save') {
						this.getJobPrice(obj.ruleClassifyId)
					} else if (this.postPushForm.status == 3) {
						this.getJobPrice(obj.ruleClassifyId)
					}
				}
			})
		},
		//获取岗位价格
		getJobPrice(ruleClassifyId) {
			let data = {
				ruleClassifyId: ruleClassifyId
			}
			this.$Request.get('/app/rule/ruleClassifyId', {
				params: data
			}).then(res => {
				if (res.code == 0) {
					this.price = res.data.price
					// 同时更新表单其他字段
					// if (res.data.minSalary && res.data.maxSalary) {
					// 	this.postPushForm.salaryRange = res.data.minSalary + '-' + res.data.maxSalary
					// }
					this.minSalary = res.data.minSalary ? this.numberToK(res.data.minSalary) : ''
					this.maxSalary = res.data.maxSalary ? this.numberToK(res.data.maxSalary) : ''
					if (res.data.salaryTimes) {
						this.postPushForm.salaryTimes = res.data.salaryTimes
					}
					if (res.data.experience) {
						this.postPushForm.experience = res.data.experience
					}
					if (res.data.education) {
						this.postPushForm.education = res.data.education
					}
				}
			})
		},
		// 打开从事方向选择弹窗
		openIndustry() {
			// 检查是否已选择岗位类型
			if (!this.postPushForm.ruleClassifyId) {
				ElMessage({
					message: '请先选择岗位类型',
					type: 'warning',
					duration: 1500,
					offset: this.screenHeight / 2
				});
				return;
			}
			
			// 获取从事方向列表
			this.getIndustryList();
		},
		// 获取从事方向列表
		getIndustryList(openDialog = true) {
			let data = {
				ruleClassifyId: this.postPushForm.ruleClassifyId
			};
			
			this.$Request.get('/app/userFirst/getPostSkill', { params: data }).then(res => {
				if (res.code == 0) {
					// 处理返回的层级数据，添加展开状态
					this.industryList = res.data.map(item => ({
						...item,
						isOpen: false
					}));
					
					// 构建可选择的从事方向列表（扁平化）
					let flatList = [];
					this.industryList.forEach(parent => {
						parent.childrenList.forEach(child => {
							flatList.push(child);
						});
					});
					this.industryArrList = flatList;
					
					// 保存所有可用的后端标签名称
					this.availableBackendTags = flatList.map(item => item.postSkillName);
					
					// 根据参数决定是否打开弹窗
					if (openDialog) {
						this.industryDialog = true;
					}
				} else {
					ElMessage({
						message: res.msg,
						type: 'error',
						duration: 1500,
						offset: this.screenHeight / 2
					});
				}
			});
		},

		//发布岗位
		savePostPush() {
			let formPost = this.$refs.formPost;
			formPost.validate((valid) => {
				if (valid) {
					let obj = JSON.parse(JSON.stringify(this.postPushForm))
					if (!obj.lng || !obj.lat) {
						ElMessage({
							message: '请选择搜索出来的地址',
							type: 'info',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						return
					}
					obj.welfareTag = obj.welfareTag.join(';')
					obj.positionTag = obj.positionTag.join(',')
					obj.type = obj.postType;
					if (this.type == 'save') {
						this.pay(obj, this.postPushId)
					} else if (this.type == 'updata') {
						if (this.postPushForm.status == 3) { //拒绝重新发布
							this.pay(obj)
						} else {
							//发布岗位
							this.pay(obj, this.postPushId)
						}
					} else {
						//发布岗位
						this.pay(obj)
					}

				}
			})
		},
		// 确定选择
		addHangye() {
			this.industryDialog = false;
		},
		//删除关键词
		handleClose(index) {
			this.postPushForm.positionTag.splice(index, 1)
		},
		//确认
		handleInputConfirm() {
			if (this.inputValue) {
				// 检查是否达到选择上限
				if (this.postPushForm.positionTag.length >= 20) {
					ElMessage({
						message: '最多添加二十条',
						type: 'info',
						duration: 1500,
						offset: this.screenHeight / 2
					});
					this.inputVisible = false;
					this.inputValue = '';
					return;
				}
				
				this.postPushForm.positionTag.push(this.inputValue)
				this.inputVisible = false
				this.inputValue = ''
			} else {
				this.inputVisible = false
			}

		},
		// 工作经验
		getSchoolList() {
			let data = {
				type: '学历'
			}
			this.$Request.get('/app/dict/list', {
				params: data
			}).then(res => {
				if (res.code == 0) {
					this.schoolList = res.data
				}
			})
		},
		// 工作经验
		IntentionChen() {
			let data = {
				type: '工作经验'
			}
			this.$Request.get('/app/dict/list', {
				params: data
			}).then(res => {
				if (res.code == 0) {
					this.workList = res.data
				}
			})
		},
		//关闭组件
		close() {
			this.$emit('closePostPush', false)
		},
		//打开岗位选择弹窗
		openPostPush() {
			this.workSearch = ''
			this.$Request.get('/app/rule/getClassifyList').then(res => {
				if (res.code == 0) {
					if (res.data) {
						this.workTypeList = res.data
						this.workDialog = true
					}

				}
			})
		},
		//选择地址
		handleSelect(item) {
			this.postPushForm.companyId = localStorage.getItem('companyId')
			this.postPushForm.province = item.province
			this.postPushForm.city = item.city
			this.postPushForm.county = item.district
			this.postPushForm.lng = item.location.lng
			this.postPushForm.lat = item.location.lat
		},
		//地址搜索
		querySearchAsync(queryString, cd) {
			if (!queryString) {
				cd([])
				return
			}
			let data = {
				key: "ZBABZ-ZWECU-UQTVV-4LYDR-COK3F-5SF75", //申请的密钥
				keyword: queryString, //搜索内容
				output: 'jsonp',
			};
			let url =
				"https://apis.map.qq.com/ws/place/v1/suggestion"
			axios.get(url, {
				params: data,
				adapter: jsonp
			}).then(res => {
				if (res.data.status == 0) {
					let arr = res.data.data
					arr.map(item => {
						item.value = item.title
					})
					cd(arr)
				}
			}).catch(err => {
				console.log(err)
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.my-header {
	padding: 20px 20px 0 20px;
	background: linear-gradient(45deg, #f2fffa, #FFFFFF);
	border-radius: 18px 0 0 0;
}

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

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


}

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

:deep(.w-e-text-container) {
	background-color: #f5f5f5 !important;
	min-height: 200px !important;
}

:deep(.w-e-text-placeholder) {
	top: 5px !important;
}

.row45 {
	width: 45%;
}

.myHy {
	width: 100%;
	height: 500px;

	.myHy-box {
		width: calc(100% - 40px);
		height: calc(100% - 40px);
		overflow: hidden;
		overflow-y: scroll;
	}

	.myHy-box-item {
		width: 100%;
	}

	.myHy-box-item-l {
		width: 200px;
		line-height: 36px;
		text-align: left;
		color: #333;
		font-size: 14px;
		font-weight: bold;
	}

	.myHy-box-item-r {
		width: calc(100% - 220px);

		.myHy-box-item-r-item {
			width: calc((100% - 24px) / 4);
			line-height: 36px;
			margin-bottom: 8px;
			cursor: pointer;
			// background-color: red;
		}
	}
}

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

	.zhiwei-item {
		width: 100%;
	}

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

	.zhiwei-item-r {
		width: 60%;
	}

	.zhiwei-item-r-txt {
		width: 100%;
		font-weight: 500;
		color: #999999;
	}

	.zhiwei-item-r-i {

		margin-bottom: 10px;
	}

	.zhiwei-item-r-i-i {
		margin-top: 10px;
		margin-right: 10px;
		cursor: pointer;
		font-size: 14px;
	}

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

::-webkit-scrollbar {
	/* Chrome, Safari, Opera */
	width: 4px;
}

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

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

.work {
	width: 100%;
	height: 500px;

	.work-left {
		width: 160px;
		height: 100%;
		// border-right: 4px solid #F5f5f5;

		.work-left-box {
			width: 100%;
			height: 100%;
			// background-color: aqua;
			overflow: hidden;

		}

		.work-left-box-list {
			width: 100%;
			height: 100%;
			list-style: none;
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		.workActive {
			background-color: #c9ffec !important;
			color: #00DD9A;
			font-weight: bold;
		}

		.work-left-box-list-item:hover {
			color: #00DD9A;
		}

		.work-left-box-list-item {
			width: calc(100% - 12px);
			height: 40px;
			margin: 0 6px;
			cursor: pointer;
			border-radius: 4px;
			margin-top: 10px;
		}

		.work-left-box-list-items {
			width: calc(100% - 20px);
			height: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			line-height: 40px;
		}

		.work-left-box-list::-webkit-scrollbar {
			width: 6px;
			/* 修改滚动条的宽度 */
		}

		.work-left-box-list::-webkit-scrollbar-track {
			background: #f1f1f1;
			/* 修改滚动条轨道的背景色 */
		}

		.work-left-box-list::-webkit-scrollbar-thumb {
			background: #ddd;
			border-radius: 10px;
			/* 修改滚动条的背景色 */
		}

		.work-left-box-list::-webkit-scrollbar-thumb:hover {
			background: #ddd;
			/* 修改滚动条悬停时的背景色 */
		}

	}

	.work-right {
		width: calc(100% - 160px);
		height: 100%;

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

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

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

		.work-right-box {
			width: calc(100% - 20px);
			height: calc(100% - 20px);
			overflow: hidden;
			overflow-y: scroll;
		}

		.work-right-box-item {
			margin-bottom: 10px;
			color: #333;
		}

		.work-right-box-item-title {
			font-weight: bold;
			margin-bottom: 10px;
		}

		.work-right-box-item-names {
			margin-right: 10px;
			margin-bottom: 10px;
			cursor: pointer;
		}

		.work-right-box-item-names:hover {
			color: #00DD9A;
		}
	}
}
/* 从事方向选择样式 */
.preference-grid {
	padding: 20px;
	max-height: 400px;
	overflow-y: auto;
}

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

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

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

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

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

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