<template>
	<a-form :model="createForm" :label-col="{span: 6}" labelAlign="right">
		<a-row :gutter="20">
			<a-col span="12">
				<a-row>
					<a-col span="24">
						<a-form-item label="是否紧急" name="urgent">
							<a-radio-group v-model:value="createForm.urgent" button-style="solid">
								<a-radio-button :value="1">是</a-radio-button>
								<a-radio-button :value="2">否</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col span="24">
						<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">
								<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="24">
						<a-form-item required label="职位名称" name="name">
							<a-input v-model:value="createForm.name" placeholder="请输入职位名称" />
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-form-item label="招聘人数" name="invite_count">
							<a-input v-model:value="createForm.invite_count" placeholder="请输入招聘人数" />
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-form-item required label="职位类别">
							<a-shujilian :dict="2004" placeholder="职位类别(最多三个,多选只取前三)" @saveTreeNode="jobTypeChange"
								:select_content="createForm.job_type"></a-shujilian>
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-form-item required label="工作区域">
							<a-shujilian :dict="2009" placeholder="工作区域(最多四个,多选只取前四)" @saveTreeNode="jobAddressChange"
								:select_content="createForm.job_location"></a-shujilian>
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-form-item required label="职位描述" name="describe_text">
							<QuillEditor theme="snow" :options="options" toolbar="full"
								v-model:content="addOtherForm.describe_content"
								@update:content="onEditorDescribeUpdate($event)" contentType="html" />
						</a-form-item>
					</a-col>
					<a-col span="24">
						<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="24">
						<a-form-item required label="有效天数" name="useful_life">
							<a-input-number :min="0" type="number" v-model:value="createForm.useful_life"
								placeholder="请输入有效天数" style="width: 100%;" />
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-form-item required label="到期日期">
							<a-date-picker v-model:value="addOtherForm.daoqi_date" @Change="disabledDateChange"
								style="width: 100%;" />
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-form-item label="关键词">
							<a-input v-model:value="createForm.key_word" placeholder="请输入关键词" />
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-form-item label="职位性质">
							<a-radio-group v-model:value="addOtherForm.job_nature" button-style="solid"
								@change="jobNatureChange">
								<a-radio-button :value="1">全职</a-radio-button>
								<a-radio-button :value="2">兼职</a-radio-button>
								<a-radio-button :value="3">临时</a-radio-button>
								<a-radio-button :value="4">实习</a-radio-button>
								<a-radio-button :value="5">校园招聘</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-form-item required label="食宿要求">
							<a-xuanze :dict="2016" placeholder="请选择食宿要求" @saveSelect="saveShisu"
								:select_content="addOtherForm.shisu_select"></a-xuanze>
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-form-item required label="节假日休息情况">
							<a-xuanze :dict="2017" placeholder="请选择节假日休息情况" @saveSelect="saveHolidays"
								:select_content="addOtherForm.holidays_select"></a-xuanze>
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-form-item required label="操作">
							<a-button type="primary" block @click="sumbitForm">下一步</a-button>
						</a-form-item>
					</a-col>
				</a-row>
			</a-col>
		</a-row>
	</a-form>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, watch, defineEmits, defineProps } from 'vue';
	import { GetDictTree, GetCompanyDepartmentList, PostCompanyJobAdd } from '@/apis/models';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { intersectionAlike } from '@/utils/dataHelper';
	const emit = defineEmits();
	const props = defineProps(['job_detail']);
	import dayjs from 'dayjs';
	import 'dayjs/locale/zh-cn';
	dayjs.locale('zh-cn');
	const dayjsRef = ref(dayjs);
	const options = ref({
		debug: 'info',
		modules: {
		},
		placeholder: '请输入企业简介'
	})


	let createForm : companyListType.addrFormType = ref({
		urgent: 2,
		department_id: 0,
		name: '',
		invite_count: '',
		job_type: [],
		job_location: [],
		describe_text: '',
		pay_range: 0,
		useful_life: 0,
		disabled_date: '',
		key_word: '',
		fulltime: 2,
		parttime: 2,
		casual: 2,
		practical: 2,
		campus: 2,
		shisu: 0,
		holidays: 0,
	})


	let addOtherForm = ref({
		department_name: null,
		describe_content: '',
		daoqi_date: '',
		job_nature: '',
		pay_range_cascader: '',
		shisu_select: '',
		holidays_select: '',
	})
	
	
	const job_id = ref<object>(null);
	watch(() => [props.job_detail], async (newVal : string[], oldVal) => {
		let res = await GetDictTree({ code: 2004 });
		jobTypeData.value = res.data.dicts;
		let res1 = await GetDictTree({ code: 2009 });
		jobAddressData.value = res1.data.dicts;
		if (newVal[0]) {
			job_id.value = newVal[0].id;
			createForm.value = intersectionAlike(createForm.value, newVal[0]);
			addOtherForm.value = {
				department_name: '请选择部门',
				describe_content: newVal[0].describe_text,
				daoqi_date: dayjsRef.value(newVal[0].disabled_date),
				pay_range_cascader: newVal[0].pay_range,
				shisu_select: newVal[0].shisu,
				holidays_select: newVal[0].holidays,
			}
			if(newVal[0].fulltime == 1) {
				addOtherForm.value.job_nature = 1
				return;
			} else if(newVal[0].parttime == 1) {
				addOtherForm.value.job_nature =2
				return;
			}else if(newVal[0].casual == 1) {
				addOtherForm.value.job_nature = 3
				return;
			}else if(newVal[0].practical == 1) {
				addOtherForm.value.job_nature =4
				return;
			}else if(newVal[0].campus == 1) {
				addOtherForm.value.job_nature = 5
				return;
			}
			sessionStorage.setItem("first", JSON.stringify(createForm.value))
			sessionStorage.setItem("firstOther", JSON.stringify(addOtherForm.value))
		} else {
			addOtherForm.value = sessionStorage.getItem('firstOther') ? JSON.parse(sessionStorage.getItem('firstOther')) : addOtherForm.value
			addOtherForm.value.daoqi_date = addOtherForm.value.daoqi_date ? dayjsRef.value(addOtherForm.value.daoqi_date) : ''
			createForm.value = sessionStorage.getItem('first') ? JSON.parse(sessionStorage.getItem('first')) : createForm.value
		}
	}, { immediate: true })
	


	
	onMounted(async () => {
		
	})

	// 选择部门
	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) => {
		createForm.value.job_type = data.arr1.slice(0, 3);
	}
	// 工作区域
	const jobAddressChange = (val) => {
		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) => {
		console.log(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 sumbitForm = () => {
		sessionStorage.setItem("first", JSON.stringify(createForm.value))
		sessionStorage.setItem("firstOther", JSON.stringify(addOtherForm.value))
		emit('saveSuccess', { key: "2" })
	}

	const resetForm = () => {
		addOtherForm.value = {
			department_name: '请选择部门',
			describe_content: '',
			daoqi_date: '',
			job_nature: '',
			pay_range_cascader: '',
			shisu_select: '',
			holidays_select: '',
		}
		createForm.value = {
			urgent: 2,
			department_id: 0,
			name: '',
			invite_count: '',
			job_type: [],
			job_location: [],
			describe_text: '',
			pay_range: 0,
			useful_life: 0,
			disabled_date: '',
			key_word: '',
			fulltime: 2,
			parttime: 2,
			casual: 2,
			practical: 2,
			campus: 2,
			shisu: 0,
			holidays: 0,
		}
	}
</script>

<style>
</style>