<template>
	<a-c-form :createForm="createForm">
		<a-form-item required label="简历是否可见" name="简历是否可见">
			<a-radio-group v-model:value="createForm.hide_resume" 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-form-item required label="家政版块是否可见" name="createForm.house_keeping_status">
			<a-radio-group v-model:value="createForm.house_keeping_status" 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-form-item required label="姓名" name="name">
			<a-input v-model:value="createForm.name" placeholder="请输入姓名" />
		</a-form-item>
		<a-form-item required label="身份证" name="id_number">
			<a-input v-model:value="createForm.id_number" placeholder="请输入身份证" />
		</a-form-item>
		<a-form-item required label="性别" name="createForm.gender">
			<a-radio-group v-model:value="createForm.gender" button-style="solid">
				<a-radio-button value="男">男</a-radio-button>
				<a-radio-button value="女">女</a-radio-button>
			</a-radio-group>
		</a-form-item>
		<a-form-item required label="出生日期" name="dob">
			<a-date-picker v-model:value="createForm.dob" :locale="locale" :format="dateFormat"  @panelChange="dobChange"/>
		</a-form-item>
		<a-form-item required label="工作经验（年）" name="work_experience">
			<a-input v-model:value="createForm.work_experience" placeholder="请输入工作经验" />
		</a-form-item>
		<a-form-item label="学历" name="education">
			<a-c-select :dict="2006" :placeholder="educationPlaceholder" @saveSelect="saveEducation"></a-c-select>
		</a-form-item>
		<a-form-item label="户口所在地">
			<a-c-cascader :dict="2009" @saveCascader="regLevelSave" placeholder="请选择户口所在地" ></a-c-cascader>
		</a-form-item>
		<a-form-item label="现居地">
			<a-c-cascader :dict="2009" @saveCascader="nowLevelSave" placeholder="请选择现居地" ></a-c-cascader>
		</a-form-item>
		<a-form-item label="职称">
			<a-c-select :dict="2014" :placeholder="titlePlaceholder" @saveSelect="saveTitle"></a-c-select>
		</a-form-item>
		<a-form-item label="婚姻状况">
			<a-c-select :dict="2011" :placeholder="maritalStatusPlaceholder"
				@saveSelect="saveMaritalStatus"></a-c-select>
		</a-form-item>
		<a-form-item label="民族">
			<a-c-select :dict="2012" :placeholder="ethnicityPlaceholder" @saveSelect="saveEthnicity"></a-c-select>
		</a-form-item>
		<a-form-item label="身高(厘米cm)">
			<a-input-number :min="0" type="number" v-model:value="createForm.height" placeholder="请输入身高" />
		</a-form-item>
		<a-form-item label="体重(千克kg)">
			<a-input-number :min="0" type="number" v-model:value="createForm.weight" placeholder="请输入体重" />
		</a-form-item>
		<a-form-item label="政治面貌">
			<a-c-select :dict="2010" :placeholder="politicalStatusPlaceholder"
				@saveSelect="savePoliticalStatus"></a-c-select>
		</a-form-item>
		<a-form-item label="籍贯">
			<a-c-cascader :dict="2009" @saveCascader="nativePlaceSave"  placeholder="请选择籍贯"></a-c-cascader>
		</a-form-item>
		<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
			<a-button type="primary" @click="onSubmit">保存</a-button>
			<a-button style="margin-left: 10px">重置</a-button>
		</a-form-item>
	</a-c-form>
</template>

<script lang="ts" setup>
	import { ref, onMounted, watch, computed } from 'vue';
	import moment, { Moment } from 'moment';
	import 'moment/dist/locale/zh-cn';
	import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
	let createForm = ref({
		hide_resume: 0,
		house_keeping_status: 0,
		photo: 'aaa.jpg',
		name: '',
		id_number: '',
		gender: "女",
		dob: ref<Moment>(),
		work_experience: '',
		education: 0,
		reg_level1: 0,
		reg_level2: 0,
		reg_level3: 0,
		reg_level4: 0,
		now_level1: 0,
		now_level2: 0,
		now_level3: 0,
		now_level4: 0,
		title: 0,
		marital_status: 0,
		ethnicity: 0,
		height: '',
		weight: '',
		political_status: 0,
		native_place: 0
	})

	const onSubmit = () => {
		console.log(createForm.value)
	}

	const resetForm = () => {
		createForm.value = {
			hide_resume: 0,
			house_keeping_status: 0,
			photo: 'aaa.jpg',
			name: '',
			id_number: '',
			gender: "女",
			dob: ref<Moment>(),
			work_experience: '',
			education: 0,
			reg_level1: 0,
			reg_level2: 0,
			reg_level3: 0,
			reg_level4: 0,
			now_level1: 0,
			now_level2: 0,
			now_level3: 0,
			now_level4: 0,
			title: 0,
			marital_status: 0,
			ethnicity: 0,
			height: '',
			weight: '',
			political_status: 0,
			native_place: 0
		}
	}
	
	// 出生日期
	const dateFormat = ref('YYYY-MM-DD');
	const dobChange = (val) => {
		moment(val, 'YYYY-MM-DD');
		console.log(val)
	}
	
	// 学历
	const educationPlaceholder = ref('请选择学历');
	const saveEducation = (data) => {
		createForm.value.education = data.val;
	}

	// 职称
	const titlePlaceholder = ref('请选择职称')
	const saveTitle = (data) => {
		createForm.value.title = data.val;
	}

	// 婚姻状态
	const maritalStatusPlaceholder = ref('请选择婚姻状态')
	const saveMaritalStatus = (data) => {
		createForm.value.marital_status = data.val;
	}

	// 民族
	const ethnicityPlaceholder = ref('请选择民族')
	const saveEthnicity = (data) => {
		createForm.value.ethnicity = data.val;
	}

	// 政治面貌
	const politicalStatusPlaceholder = ref('请选择政治面貌')
	const savePoliticalStatus = (data) => {
		createForm.value.political_status = data.val;
	}


	// 户口所在地
	const regLevelSave = (data) => {
		for (let i = 0; i < 4; i++) {
			createForm.value[`reg_level${i + 1}`] = data.arr1[i] || 0;
		}
	}

	// 户口所在地
	const nowLevelSave = (data) => {
		for (let i = 0; i < 4; i++) {
			createForm.value[`now_level${i + 1}`] = data.arr1[i] || 0;
		}
	}

	// 户口所在地
	const nativePlaceSave = (data) => {
		if (data.arr1.length == 1) {
			return false;
		} else {
			createForm.value.native_place = data.arr1[1];
		}
	}
</script>

<style>
</style>