<template>
	<a-form :model="commomParams.search">
		<a-row :gutter="20">
			<a-col span="6">
				<a-form-item>
					<a-select v-model:value="commomParams.search.department_id" @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="6">
				<a-form-item>
					<a-select v-model:value="commomParams.search.job_id" @change="jobChange"
						placeholder="请进行搜索选择职位" show-search :filter-option="false" label-in-value
						@search="jobSearch">
						<a-select-option v-for="item in job_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="6">
				<a-form-item>
					<a-select v-model:value="commomParams.search.status" @change="statusChange"
						placeholder="简历查看状态">
						<a-select-option :key="1">已查看</a-select-option>
						<a-select-option :key="2">未查看</a-select-option>
					</a-select>
				</a-form-item>
			</a-col>
			<a-col span="6">
				<a-button type="primary" @click="clearSearch">重置</a-button>
			</a-col>
		</a-row>
	</a-form> 
</template>

<script lang="ts" setup>
	import { ref, onMounted, watch, computed } from 'vue';
	import { GetCompanyDepartmentList, PostCompanyJobList } from '@/apis/models';
	import { useCommon } from '@/hooks/useCommon';
	let { commomParams } = useCommon();
	let props = defineProps(['search_params']);
	const emit = defineEmits();
	
	interface listType {
		department_id : String
		job_id : String
		status : String,
		customer_name : String
	}
	
	commomParams.value.search = commomParams.value.search as listType;
	commomParams.value.search.department_id = null;
	commomParams.value.search.job_id = null;
	commomParams.value.search.status = null;
	commomParams.value.search.customer_name = '';


	watch(() => props.search_params, (newVal) => {
		emit('searchData', commomParams.value.search)
	})

	const getData = () => {
		emit('searchData', commomParams.value.search)
	}

	// 清空搜索
	const clearSearch = () => {
		commomParams.value.search = {
			page: 1,
			pagesize: 10,
			sort: 'id',
			sortby: 'asc',
			keyword: ''
		}
		emit('clearData', commomParams.value.search)
	}
	
	onMounted(() => {
		departmentSearch()
		JobSearch()
	})
	
	// 选择部门
	let department_list = ref<Object[]>([])
	const departmentSearch = (val) => {
		GetCompanyDepartmentList({pagesize: 100,  keyword: val }).then(res => {
			department_list.value = res.data.rows;
		})
	}
	const departmentChange = (val : Object) => {
		commomParams.value.search.department_id = val.key;
		getData()
	}
	
	// 选择职位
	let job_list = ref<Object[]>([])
	const JobSearch = (val) => {
		PostCompanyJobList({pagesize: 100, keyword: val }).then(res => {
			job_list.value = res.data.list;
		})
	}
	const jobChange = (val : Object) => {
		commomParams.value.search.job_id = val.key;
		getData()
	}
	
	const statusChange = (val : Object) => {
		commomParams.value.search.status = val;
		getData()
	}
	
	
	
</script>

<style>
</style>