<template>
	<a-card title="职位信息" :headStyle="{ 'background-color': '#f0f0f0' }">
		<a-form :model="createForm" layout="vertical">
			<a-steps :current="current" :items="steps"></a-steps>
			<div class="steps-content">
				<div v-show="current == 0">
					<a-row :gutter="20">
						<a-col span="12">
							<a-form-item label="是否紧急" name="urgent">
								<a-radio-group v-model:value="createForm.urgent" button-style="solid" size="large"
									style="width: 100%">
									<a-radio-button :value="1" style="width: 50%">是</a-radio-button>
									<a-radio-button :value="2" style="width: 50%">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="选择部门" name="department_id">
								<a-select v-model:value="addOtherForm.department_name" @change="departmentChange"
									placeholder="请进行搜索选择部门" show-search :filter-option="false" label-in-value
									@search="departmentSearch" size="large">
									<a-select-option v-for="item in department_list" :key="item.id" :value="item.id"
										:label="item.name" label-in-value>{{item.name}}</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="职位名称" name="name">
								<a-input v-model:value="createForm.name" placeholder="请输入职位名称" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="招聘人数" name="invite_count">
								<a-input v-model:value="createForm.invite_count" placeholder="请输入招聘人数" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="职位类别">
								<a-shujilian :dict="2004" placeholder="职位类别(最多三个,多选只取前三)" @saveTreeNode="jobTypeChange"
									:tree_content="createForm.job_type"></a-shujilian>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="工作区域">
								<a-shujilian :dict="2009" placeholder="工作区域(最多四个,多选只取前四)"
									@saveTreeNode="jobAddressChange"
									:tree_content="createForm.job_location"></a-shujilian>
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item label="职位描述" name="describe_text">
								<QuillEditor theme="snow" :options="richOption" toolbar="full"
									v-model:content="addOtherForm.describe_content"
									@update:content="onEditorDescribeUpdate($event)" contentType="html" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="薪资范围" name="pay_range">
								<a-xuanze :dict="2005" placeholder="请选择月薪要求范围" @saveSelect="savePayRange"
									:select_content="addOtherForm.pay_range_cascader"></a-xuanze>
							</a-form-item>
						</a-col>

						<a-col span="12">
							<a-form-item label="有效天数" name="useful_life">
								<a-input-number :min="0" type="number" v-model:value="createForm.useful_life"
									placeholder="请输入有效天数" style="width: 100%;" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="到期日期">
								<a-date-picker v-model:value="addOtherForm.daoqi_date" @Change="disabledDateChange"
									style="width: 100%;" size="large" :disabled-date="disabledDate"/>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="关键词">
								<a-input v-model:value="createForm.key_word" placeholder="请输入关键词" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="职位性质">
								<a-radio-group v-model:value="addOtherForm.job_nature" button-style="solid"
									@change="jobNatureChange" style="width: 100%;" size="large">
									<a-radio-button :value="1" style="width: 20%;">全职</a-radio-button>
									<a-radio-button :value="2" style="width: 20%;">兼职</a-radio-button>
									<a-radio-button :value="3" style="width: 20%;">临时</a-radio-button>
									<a-radio-button :value="4" style="width: 20%;">实习</a-radio-button>
									<a-radio-button :value="5" style="width: 20%;">校园招聘</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="食宿要求">
								<a-xuanze :dict="2016" placeholder="请选择食宿要求" @saveSelect="saveShisu"
									:select_content="addOtherForm.shisu_select"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="节假日休息情况">
								<a-xuanze :dict="2017" placeholder="请选择节假日休息情况" @saveSelect="saveHolidays"
									:select_content="addOtherForm.holidays_select"></a-xuanze>
							</a-form-item>
						</a-col>
					</a-row>
				</div>
				<div v-show="current == 1">
					<a-row gutter="20">
						<a-col span="12">
							<a-form-item label="工作经验">
								<a-xuanze :dict="2021" placeholder="请选择工作经验" @saveSelect="saveExperience"
									:select_content="createForm.experience"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="学历">
								<a-xuanze :dict="2006" placeholder="请选择学历" @saveSelect="saveSchoolDegree"
									:select_content="createForm.school_degree"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="含最高学历" name="degree_better">
								<a-radio-group v-model:value="createForm.degree_better" button-style="solid"
									style="width: 100%;" size="large">
									<a-radio-button :value="1" style="width: 50%;">是</a-radio-button>
									<a-radio-button :value="2" style="width: 50%;">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="职称要求">
								<a-xuanze :dict="2014" placeholder="请选择职称要求" @saveSelect="saveProfelevel"
									:select_content="createForm.profelevel"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="技能认证">
								<a-xuanze :dict="2015" placeholder="请选择技能认证" @saveSelect="saveCertification"
									:select_content="createForm.certification"></a-xuanze>
							</a-form-item>
						</a-col>

						<a-col span="12">
							<a-form-item label="语言要求">
								<a-xuanze :dict="2007" placeholder="请选择语言要求" @saveSelect="saveLanguage"
									:select_content="createForm.language"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="掌握程度">
								<a-xuanze :dict="2008" placeholder="请选择掌握程度" @saveSelect="saveLanguageDegree"
									:select_content="createForm.language_degree"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="性别要求" name="sex">
								<a-radio-group v-model:value="createForm.sex" button-style="solid" style="width: 100%;"
									size="large">
									<a-radio-button :value="1" style="width: calc(100% / 3);">男</a-radio-button>
									<a-radio-button :value="2" style="width: calc(100% / 3);">女</a-radio-button>
									<a-radio-button :value="3" style="width: calc(100% / 3);">不限</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="最小年龄" name="age_min">
								<a-input-number :min="0" type="number" v-model:value="createForm.age_min"
									placeholder="请输入最小年龄" style="width: 100%;" size="large" />
							</a-form-item>
						</a-col>

						<a-col span="12">
							<a-form-item label="最大年龄" name="age_max">
								<a-input-number :min="0" type="number" v-model:value="createForm.age_max"
									placeholder="请输入最大年龄" style="width: 100%;" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="婚姻状况" name="marital_status">
								<a-radio-group v-model:value="createForm.marital_status" button-style="solid"
									style="width: 100%;" size="large">
									<a-radio-button :value="1" style="width: calc(100% / 3);">已婚</a-radio-button>
									<a-radio-button :value="2" style="width: calc(100% / 3);">未婚</a-radio-button>
									<a-radio-button :value="3" style="width: calc(100% / 3);">不限</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="专业" name="major">
								<a-input v-model:value="createForm.major" placeholder="请输入专业" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="证书要求">
								<a-checkbox-group v-model:value="createForm.license" size="large">
									<a-row>
										<template v-for="(item, index) in licenseOption">
											<a-col span="8">
												<a-checkbox :value="item.id" size="large">{{item.name}}</a-checkbox>
											</a-col>
										</template>
									</a-row>
								</a-checkbox-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="籍贯要求" name="mandarin">
								<a-jilian :dict="2009" @saveCascader="compantJiguanSave" placeholder="请选择籍贯"
									:cascader_content="addOtherForm.company_jiguan_cascader"></a-jilian>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="所在地要求" name="mandarin">
								<a-jilian :dict="2009" @saveCascader="compantSuozaidiSave" placeholder="请选择所在地"
									:cascader_content="addOtherForm.company_suozaidi_cascader"></a-jilian>
							</a-form-item>
						</a-col>
					</a-row>
				</div>
				<div v-show="current == 2">
					<a-row gutter="20">
						<a-col span="12">
							<a-form-item label="联系人" name="contact">
								<a-input v-model:value="createForm.contact" placeholder="请输入联系人" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="担任职位" name="possession">
								<a-input v-model:value="createForm.possession" placeholder="请输入联系人职位" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="联系电话" name="phone">
								<a-input v-model:value="createForm.phone" placeholder="请输入联系电话" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="是否公开联系电话" name="phone_public">
								<a-radio-group v-model:value="createForm.phone_public" button-style="solid"
									style="width: 100%;" size="large">
									<a-radio-button :value="1" style="width: 50%;">是</a-radio-button>
									<a-radio-button :value="2" style="width: 50%;">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="手机" name="mobile">
								<a-input v-model:value="createForm.mobile" placeholder="请输入手机" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="是否公开手机" name="mobile_public">
								<a-radio-group v-model:value="createForm.mobile_public" button-style="solid"
									style="width: 100%;" size="large">
									<a-radio-button :value="1" style="width: 50%;">是</a-radio-button>
									<a-radio-button :value="2" style="width: 50%;">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="邮箱" name="email">
								<a-input v-model:value="createForm.email" placeholder="请输入邮箱" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="是否公开邮箱" name="email_public">
								<a-radio-group v-model:value="createForm.email_public" button-style="solid"
									style="width: 100%;" size="large">
									<a-radio-button :value="1" style="width: 50%;">是</a-radio-button>
									<a-radio-button :value="2" style="width: 50%;">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="传真" name="fax">
								<a-input v-model:value="createForm.fax" placeholder="请输入传真" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="是否公开传真" name="fax_public">
								<a-radio-group v-model:value="createForm.fax_public" button-style="solid"
									style="width: 100%;" size="large">
									<a-radio-button :value="1" style="width: 50%;">是</a-radio-button>
									<a-radio-button :value="2" style="width: 50%;">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="其他地址" name="other_address">
								<a-input v-model:value="createForm.other_address" placeholder="请输入其他地址" size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="面试地址" name="interview_address">
								<a-input v-model:value="createForm.interview_address" placeholder="请输入面试地址"
									size="large" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="地图上选择经度">
								<a-input v-model:value="createForm.longitude" placeholder="选择经度" disabled/>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="地图上选择纬度">
								<a-input v-model:value="createForm.latitude" placeholder="选择纬度" disabled/>
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item label="选择经纬度">
								<a-flex justify="center">
									<div style="width: 90%;">
										<a-switch v-model:checked="showMap"> </a-switch>
										<div v-if="showMap">
											<v-map @getLoc="getLoc"></v-map>
										</div>
									</div>
								</a-flex>
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-flex justify="flex-end">
								<a-space>
									<a-button type="primary" @click="sumbitForm" size="large">发布招聘</a-button>
								</a-space>
							</a-flex>
						</a-col>
					</a-row>
				</div>
			</div>
			<div class="steps-action">
				<a-button v-if="current > 0" @click="prev">上一步</a-button>
				<a-button v-if="current < steps.length - 1" type="primary" style="margin-left: 12px"
					@click="next">下一步</a-button>
			</div>
		</a-form>
	</a-card>

</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import { PostCompanyJobAdd, PostCompanyJobEdit, GetDictTree, GetCompanyDepartmentList, GetCompanyJobInfo } from '@/apis/models';
	import vMap from '@/components/map/map-iframe.vue'
	import { intersectionAlike } from '@/utils/dataHelper';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { steps, dataForm, otherDataForm, reset } from '@/components/company/invite/position/data.ts';
	import { useCommon } from '@/hooks/useCommon';
	let { store, dayjs, richOption, message, disabledDate } = useCommon();
	const dayjsRef = ref(dayjs);
	let props = defineProps(['job_id']);
	const emit = defineEmits();
	const current = ref<number>(0);
	const next = () => {
		current.value++;
	};
	const prev = () => {
		current.value--;
	};

	const options = ref(richOption)
	const job_id = ref<object>(null);
	let licenseOption = ref<Object[]>([])
	let createForm = ref(dataForm)
	let addOtherForm = ref(otherDataForm)



	onMounted(async () => {
		departmentSearch()
		let res = await GetDictTree({ code: 2018 })
		licenseOption.value = res.data.dicts;
	})

	// 选择部门
	let department_list = ref<Object[]>([])
	const departmentSearch = (val) => {
		GetCompanyDepartmentList({ keyword: val }).then(res => {
			department_list.value = res.data.rows;
		})
	}
	const departmentChange = (val : Object) => {
		addOtherForm.value.department_name = val.option.label;
		createForm.value.department_id = val.key;
	}

	// 职位类别
	const jobTypeChange = (data) => {
		console.log(data)
		createForm.value.job_type = data.arr1.slice(0, 3);
	}
	// 工作区域
	const jobAddressChange = (data) => {
		createForm.value.job_location = data.arr1.slice(0, 4);
	}

	// 职位描述
	const onEditorDescribeUpdate = (data) => {
		createForm.value.describe_text = data
	}

	// 薪资范围
	const savePayRange = (data) => {
		addOtherForm.value.pay_range_cascader = data.val.option.label;
		createForm.value.pay_range = data.val.key;
	}

	// 到期日期
	const disabledDateChange = (val) => {
		createForm.value.disabled_date = dayjsRef.value(val).format('YYYY-MM-DD');
		console.log(createForm.value.disabled_date)
	}

	const jobNatureChange = (val) => {
		switch (val.target.value) {
			case 1:
				createForm.value.fulltime = 1;
				createForm.value.parttime = 2;
				createForm.value.casual = 2;
				createForm.value.practical = 2;
				createForm.value.campus = 2;
				break;
			case 2:
				createForm.value.fulltime = 2;
				createForm.value.parttime = 1;
				createForm.value.casual = 2;
				createForm.value.practical = 2;
				createForm.value.campus = 2;
				break;
			case 3:
				createForm.value.fulltime = 2;
				createForm.value.parttime = 2;
				createForm.value.casual = 1;
				createForm.value.practical = 2;
				createForm.value.campus = 2;
				break;
			case 4:
				createForm.value.fulltime = 2;
				createForm.value.parttime = 2;
				createForm.value.casual = 2;
				createForm.value.practical = 1;
				createForm.value.campus = 2;
				break;
			case 5:
				createForm.value.fulltime = 2;
				createForm.value.parttime = 2;
				createForm.value.casual = 2;
				createForm.value.practical = 2;
				createForm.value.campus = 1;
				break;
		}
	}

	// 食宿要求
	const saveShisu = (data) => {
		addOtherForm.value.shisu_select = data.val.option.label;
		createForm.value.shisu = data.val.key;
	}

	// 节假日要求
	const saveHolidays = (data) => {
		addOtherForm.value.holidays_select = data.val.option.label;
		createForm.value.holidays = data.val.key;
	}

	// 工作经验
	const saveExperience = (data) => {
		createForm.value.experience = data.val.key;
	}

	// 学历要求
	const saveSchoolDegree = (data) => {
		createForm.value.school_degree = data.val.key;
	}

	// 职称要求
	const saveProfelevel = (data) => {
		createForm.value.profelevel = data.val.key;
	}

	// 技能认证
	const saveCertification = (data) => {
		createForm.value.certification = data.val.key;
	}

	// 语言要求
	const saveLanguage = (data) => {
		createForm.value.language = data.val.key;
	}

	// 掌握程度
	const saveLanguageDegree = (data) => {
		createForm.value.language_degree = data.val.key;
	}

	// 选择籍贯
	const compantJiguanSave = (data) => {
		addOtherForm.value.company_jiguan_cascader = data.arr1;
		createForm.value.household_province = data.arr1[0] ? data.arr1[0] : 0;
		createForm.value.household_city = data.arr1[1] ? data.arr1[1] : 0;
	}

	// 选择所在地
	const compantSuozaidiSave = (data) => {
		addOtherForm.value.company_suozaidi_cascader = data.arr1;
		createForm.value.location_province = data.arr1[0] ? data.arr1[0] : 0;
		createForm.value.location_city = data.arr1[1] ? data.arr1[1] : 0;
		createForm.value.location_town = data.arr1[2] ? data.arr1[2] : 0;
	}
	
	let showMap = ref<Boolean>(false);
	// 经纬度
	const getLoc = (mapData : Object) => {
		createForm.value.latitude = mapData.latlng.lat;
		createForm.value.longitude = mapData.latlng.lng;
		showMap.value = false;
	}

	const sumbitForm = () => {
		if (!job_id.value) {
			PostCompanyJobAdd(createForm.value).then(res => {
				successToast('保存成功');
				resetForm();
			}).catch(err => {
			})
		} else {
			PostCompanyJobEdit(createForm.value).then(res => {
				successToast('编辑成功');
				resetForm();
			}).catch(err => {
			})

		}
	}

	const resetForm = () => {
		addOtherForm.value = reset().otherDataForm;
		createForm.value = reset().dataForm;
		emit('send')
	}



	const addToLocationArray = (data) => {
		let locationArray = [];
		if (data.location_province !== 0) {
			locationArray.push(data.location_province);
		}
		if (data.location_city !== 0) {
			locationArray.push(data.location_city);
		}
		if (data.location_town !== 0) {
			locationArray.push(data.location_town);
		}
		return locationArray;
	}

	watch(() => props.job_id, (newVal) => {
		job_id.value = newVal;
		if (newVal) {
			GetCompanyJobInfo({ id: job_id.value }).then(res => {
				let resData = res.data;
				createForm.value = intersectionAlike(createForm.value, resData);
				createForm.value.id = resData.id;
				addOtherForm.value = {
					department_name: resData.department_id,
					describe_content: resData.describe_text,
					daoqi_date: dayjsRef.value(resData.disabled_date),
					pay_range_cascader: resData.pay_range,
					shisu_select: resData.shisu,
					holidays_select: resData.holidays,
					company_jiguan_cascader: [resData.household_province, resData.household_city],
					company_suozaidi_cascader: addToLocationArray(resData)
				}
				if (resData.fulltime == 1) {
					addOtherForm.value.job_nature = 1
				} else if (resData.parttime == 1) {
					addOtherForm.value.job_nature = 2
				} else if (resData.casual == 1) {
					addOtherForm.value.job_nature = 3
				} else if (resData.practical == 1) {
					addOtherForm.value.job_nature = 4
				} else if (resData.campus == 1) {
					addOtherForm.value.job_nature = 5
				}

			})

		}
	}, { immediate: true })
</script>


<style scoped>
	.steps-content {
		margin-top: 16px;
		border: 1px dashed #e9e9e9;
		border-radius: 6px;
		background-color: #fafafa;
		min-height: 200px;
		padding: 20px;
	}

	.steps-action {
		margin-top: 12px;
	}

	:deep(.ant-steps-item-icon) {
		background-color: #4FBE70 !important;
		border-color: #4FBE70 !important;
	}
	

</style>