<template>
	<a-row :gutter="[10,16]" type="flex" justify="center" style="margin-bottom: 30px;">
		<a-col span="18">
			<a-input v-model:value="commomParams.search.keyword" :placeholder="'请输入要搜索的'+searchType" size="large">
				<template #addonBefore>
					<a-select v-model:value="searchType" style="width: 90px;"  @change="searchTypeChange">
						<a-select-option value="职位">职位</a-select-option>
						<a-select-option value="企业">企业</a-select-option>
					</a-select>
				</template>
				<template #addonAfter>
					<div @click="getData" style="width: 100%;height: 100%; padding: 0 20px;color: #fff;cursor: pointer;">
						搜索
					</div>
				</template>
			</a-input>
		</a-col>
		<a-col span="24">
			<div style="width: 100%; background-color: #fff;padding: 16px;border-radius: 10px;">
				<template v-if="searchType == '职位'">
					<a-form>
						<a-form-item label="工作地区">
							<template v-for="(item,index) in xiaolanList">
								<a-checkable-tag v-model:checked="item.checked" @change="cityChange(index,item)"> <span
										v-if="item.name == '小榄镇'" style="font-weight: bold;">{{item.name}}</span>
									<span v-else>{{item.name}}</span></a-checkable-tag>
							</template>
							<div>
								<template v-for="(item,index) in zhongshanList">
									<a-checkable-tag v-model:checked="item.checked" @change="cityChange(index,item)">
										<span v-if="item.name == '中山市'" style="font-weight: bold;">{{item.name}}</span>
										<span v-else>{{item.name}}</span>
									</a-checkable-tag>
								</template>
							</div>
						</a-form-item>
						<a-form-item label="职位性质">
							<template v-for="(item,index) in jobNatureList">
								<a-checkable-tag v-model:checked="item.checked"
									@change="handleChange(item)">{{item.name}}</a-checkable-tag>
							</template>
						</a-form-item>
						<a-form-item label="薪酬范围">
							<template v-for="(item,index) in payList">
								<a-checkable-tag v-model:checked="item.checked"
									@change="payChange(item)">{{item.name}}</a-checkable-tag>
							</template>
						</a-form-item>
						<a-form-item label="学历要求">
							<template v-for="(item,index) in educationList">
								<a-checkable-tag v-model:checked="item.checked"
									@change="educationChange(item)">{{item.name}}</a-checkable-tag>
							</template>
						</a-form-item>
						<template v-if="isExpand">
							<a-form-item label="公司规模">
								<template v-for="(item,index) in guimoList">
									<a-checkable-tag v-model:checked="item.checked"
										@change="guimoChange(item)">{{item.name}}</a-checkable-tag>
								</template>
							</a-form-item>
							<a-form-item label="公司性质">
								<template v-for="(item,index) in natureList">
									<a-checkable-tag v-model:checked="item.checked"
										@change="natureChange(item)">{{item.name}}</a-checkable-tag>
								</template>
							</a-form-item>
							<a-form-item label="更新时间">
								<template v-for="(item,index) in updateList">
									<a-checkable-tag v-model:checked="item.checked"
										@change="updateChange(item)">{{item.name}}</a-checkable-tag>
								</template>
							</a-form-item>
							<a-form-item label="急招职位">
								<a-radio-group v-model:value="commomParams.search.urgent" button-style="solid"
									size="small" @change="urgentChange">
									<a-radio-button :value="1">是</a-radio-button>
									<a-radio-button :value="2">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</template>

						<a-divider>
							<a-button size="small" type="primary" @click="clickMore">
								<template v-if="isExpand">
									关闭更多筛选
									<UpOutlined />
								</template>
								<template v-else>
									更多筛选条件
									<DownOutlined />
								</template>
							</a-button>
						</a-divider>
						<a-form-item label="重置搜索条件">
							<a-button size="small" type="primary" @click="clearSearch">重置</a-button>
						</a-form-item>
					</a-form>
				</template>
				<template v-if="searchType == '企业'">
					<a-form>
						<a-form-item label="公司规模">
							<template v-for="(item,index) in guimoList">
								<a-checkable-tag v-model:checked="item.checked"
									@change="qiyeGuimoChange(item)">{{item.name}}</a-checkable-tag>
							</template>
						</a-form-item>
						<a-form-item label="公司性质">
							<template v-for="(item,index) in natureList">
								<a-checkable-tag v-model:checked="item.checked"
									@change="qiyeNatureChange(item)">{{item.name}}</a-checkable-tag>
							</template>
						</a-form-item>
						<a-form-item label="知名企业">
							<a-radio-group v-model:value="commomParams.search.famous" button-style="solid" size="small"
								@change="famousChange">
								<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 label="见习基地">
							<a-radio-group v-model:value="commomParams.search.probation" button-style="solid" size="small"
								@change="probationChange">
								<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 label="重置搜索条件">
							<a-button size="small" type="primary"  @click="clearSearch">重置</a-button>
						</a-form-item>
					</a-form>
				</template>

			</div>
		</a-col>
	</a-row>

</template>

<script setup lang="ts">
	import { ref, onMounted, watch, computed } from 'vue';
	import { GetDictTree } from '@/apis/models';
	import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, dayjs, richOption, ExclamationCircleOutlined, Modal } = useCommon();
	let props = defineProps(['mode']);
	const emit = defineEmits();
	let isExpand = ref<Boolean>(false)
	let searchType = ref<String>('职位')

	const searchTypeChange = (val) => {
		if (val == '企业') {
			interface listQiyeType {
				probation ?: Number,
				famous ?: Number,
				nature ?: Number,
				scale ?: Number
			}
			commomParams.value.search = commomParams.value.search as listQiyeType;
			commomParams.value.search.pagesize = 12;
			commomParams.value.search.probation = 0;
			commomParams.value.search.famous = 0;
			commomParams.value.search.campus = 0;
			emit('searchData', {search: commomParams.value.search,mode: 2})
		} else {
			interface listType {
				fulltime ?: Number,
				parttime ?: Number,
				casual ?: Number,
				practical ?: Number,
				campus ?: Number,
				city ?: Number,
				district ?: Number,
				street ?: Number,
				pay_range ?: Number,
				school_degree_rq ?: Number,
				scale ?: Number,
				character_flag ?: Number,
				update_time_range ?: Number,
				urgent ?: Number,
			}
			commomParams.value.search = commomParams.value.search as listType;
			commomParams.value.search.pagesize = 12;
			commomParams.value.search.fulltime = 1;
			commomParams.value.search.parttime = 2;
			commomParams.value.search.casual = 2;
			commomParams.value.search.practical = 2;
			commomParams.value.search.campus = 2;
			commomParams.value.search.city = 0;
			commomParams.value.search.district = 0;
			commomParams.value.search.street = 0;
			commomParams.value.search.pay_range = 0;
			commomParams.value.search.school_degree_rq = 0;
			commomParams.value.search.scale = 0;
			commomParams.value.search.character_flag = 0;
			commomParams.value.search.update_time_range = 0;
			commomParams.value.search.urgent = 0;
			emit('searchData', {search: commomParams.value.search,mode: 1})
		}
	}



	watch(() => props.mode, (newVal) => {
		emit('searchData', {search: commomParams.value.search,mode: newVal})
	}, {
		immediate: true
	})

	const getData = () => {
		if (searchType.value == '企业') {
			emit('searchData', {search: commomParams.value.search,mode: 2})
		} else {
			emit('searchData', {search: commomParams.value.search,mode: 1})
		}
	}

	// 清空搜索
	const clearSearch = () => {
		commomParams.value.search = {
			page: 1,
			pagesize: 12,
			sort: 'id',
			sortby: 'asc',
			keyword: ''
		}
		if (searchType.value == '企业') {
			guimoList.value.forEach((item, index) => {
				item.checked = index === 0 ? true : false;
			});
			natureList.value.forEach((item, index) => {
				item.checked = index === 0 ? true : false;
			});
			emit('clearData', {search: commomParams.value.search,mode: 2})
		} else {
			commomParams.value.search.district = 100004;
			xiaolanList.value.forEach((item, index) => {
				item.checked = index === 1 ? true : false;
			});
			zhongshanList.value.forEach((item, index) => {
				item.checked = false;
			});
			jobNatureList.value.forEach((item, index) => {
				item.checked = index === 0 ? true : false;
			});
			
			payList.value.forEach((item, index) => {
				item.checked = index === 0 ? true : false;
			});
			educationList.value.forEach((item, index) => {
				item.checked = index === 0 ? true : false;
			});
			guimoList.value.forEach((item, index) => {
				item.checked = index === 0 ? true : false;
			});
			natureList.value.forEach((item, index) => {
				item.checked = index === 0 ? true : false;
			});
			updateList.value.forEach((item, index) => {
				item.checked = index === 0 ? true : false;
			});
			emit('clearData', {search: commomParams.value.search,mode: 1})
		}

	}



	let xiaolanList = ref<Object[]>([]);
	let zhongshanList = ref<Object[]>([]);
	const getCity = () => {
		GetDictTree({ code: "2009000100030002" }).then(res => {
			res.data.dicts.map(item => {
				return item.checked = false
			})
			res.data.dicts.unshift({
				id: 100004,
				name: '小榄镇',
				checked: true
			})
			res.data.dicts.unshift({
				id: 0,
				name: '不限',
				checked: false
			})
			xiaolanList.value = res.data.dicts
		})

		GetDictTree({ code: "200900010003" }).then(res => {
			res.data.dicts.map(item => {
				return item.checked = false;
			})
			res.data.dicts = res.data.dicts.filter(item => item.id !== 100004);
			res.data.dicts.unshift({
				id: 1000037,
				name: '中山市',
				checked: false
			})
			zhongshanList.value = res.data.dicts
		})
	}


	const cityChange = (idx, item) => {
		xiaolanList.value.forEach((i) => {
			i.checked = i.value === item.value;
		});

		zhongshanList.value.forEach((i) => {
			i.checked = i.value === item.value;
		});

		if (item.id == 0) {
			commomParams.value.search.city = 0;
			commomParams.value.search.district = 0;
			commomParams.value.search.street = 0;
			xiaolanList.value.forEach((i) => {
				i.checked = i.id === item.id;
			});
			zhongshanList.value.forEach((i) => {
				i.checked = i.id === item.id;
			});
		}

		if (item.id == 100004) {
			commomParams.value.search.city = 0;
			commomParams.value.search.district = item.id;
			commomParams.value.search.street = 0;
			xiaolanList.value.forEach((i) => {
				i.checked = i.id === item.id;
			});
			zhongshanList.value.forEach((i) => {
				i.checked = i.id === item.id;
			});
		} else {
			if (xiaolanList.value.some(i => i.id === item.id)) {
				commomParams.value.search.street = item.id;
				commomParams.value.search.district = 0;
				commomParams.value.search.city = 0;
				xiaolanList.value.forEach((i) => {
					i.checked = i.id === item.id;
				});
			}
		}

		if (item.id == 1000037) {
			commomParams.value.search.city = item.id;
			commomParams.value.search.district = 0;
			commomParams.value.search.street = 0;
			xiaolanList.value.forEach((i) => {
				i.checked = i.id === item.id;
			});
			zhongshanList.value.forEach((i) => {
				i.checked = i.id === item.id;
			});
		} else {
			if (zhongshanList.value.some(i => i.id === item.id)) {
				commomParams.value.search.district = item.id;
				commomParams.value.search.street = 0;
				commomParams.value.search.city = 0;
				zhongshanList.value.forEach((i) => {
					i.checked = i.id === item.id;
				});
			}
		}

		emit('searchData', {search: commomParams.value.search,mode: 1})
		console.log(commomParams.value.search);
	}

	let jobNatureList = ref<Object[]>([{
		name: '全职',
		value: 'fulltime',
		checked: true
	}, {
		name: '兼职',
		value: 'parttime',
		checked: false
	}, {
		name: '临时',
		value: 'casual',
		checked: false
	}, {
		name: '实习',
		value: 'practical',
		checked: false
	}, {
		name: '校园招聘',
		value: 'campus',
		checked: false
	}])

	const natureKeysToChange = ['fulltime', 'parttime', 'casual', 'practical', 'campus'];
	const handleChange = (item) => {
		jobNatureList.value.forEach((i) => {
			i.checked = i.value === item.value;
		});

		for (const key of natureKeysToChange) {
			if (key === item.value) {
				commomParams.value.search[key] = 1;
			} else if (commomParams.value.search.hasOwnProperty(key)) {
				commomParams.value.search[key] = 2;
			}
		}
		emit('searchData', {search: commomParams.value.search,mode: 1})
	}

	// 薪酬范围
	let payList = ref<Object[]>([]);
	const getPay = () => {
		GetDictTree({ code: "2005" }).then(res => {
			res.data.dicts.unshift({
				id: 0,
				name: '不限',
				checked: true
			})
			payList.value = res.data.dicts
		})
	}

	const payChange = (item) => {
		payList.value.forEach((i) => {
			i.checked = i.id === item.id;
		});
		commomParams.value.search.pay_range = item.id;
		emit('searchData', {search: commomParams.value.search,mode: 1})
	}

	// 学历要求
	let educationList = ref<Object[]>([]);
	const getEducation = () => {
		GetDictTree({ code: "2006" }).then(res => {
			res.data.dicts.unshift({
				id: 0,
				name: '不限',
				checked: true
			})
			educationList.value = res.data.dicts
		})
	}

	const educationChange = (item) => {
		educationList.value.forEach((i) => {
			i.checked = i.id === item.id;
		});
		commomParams.value.search.school_degree_rq = item.id;
		emit('searchData', {search: commomParams.value.search,mode: 1})
	}

	const clickMore = () => {
		isExpand.value = !isExpand.value
	}

	// 企业规模
	let guimoList = ref<Object[]>([]);
	const getGuimo = () => {
		GetDictTree({ code: "2003" }).then(res => {
			res.data.dicts.unshift({
				id: 0,
				name: '不限',
				checked: true
			})
			guimoList.value = res.data.dicts
		})
	}
	

	const guimoChange = (item) => {
		guimoList.value.forEach((i) => {
			i.checked = i.id === item.id;
		});
		commomParams.value.search.scale = item.id;
		emit('searchData', {search: commomParams.value.search,mode: 1})
	}
	
	const qiyeGuimoChange = (item) => {
		guimoList.value.forEach((i) => {
			i.checked = i.id === item.id;
		});
		commomParams.value.search.scale = item.id;
		emit('searchData', {search: commomParams.value.search,mode: 2})
	}
	// 企业性质
	let natureList = ref<Object[]>([]);
	const getNature = () => {
		GetDictTree({ code: "2002" }).then(res => {
			res.data.dicts.unshift({
				id: 0,
				name: '不限',
				checked: true
			})
			natureList.value = res.data.dicts
		})
	}

	const qiyeNatureChange = (item) => {
		natureList.value.forEach((i) => {
			i.checked = i.id === item.id;
		});
		commomParams.value.search.nature = item.id;
		emit('searchData', {search: commomParams.value.search,mode: 2})
	}

	// 更新时间
	let updateList = ref<Object[]>([]);
	const getUpdate = () => {
		GetDictTree({ code: "2022" }).then(res => {
			res.data.dicts.unshift({
				id: 0,
				name: '不限',
				checked: true
			})
			updateList.value = res.data.dicts
		})
	}
	const updateChange = (item) => {
		updateList.value.forEach((i) => {
			i.checked = i.id === item.id;
		});
		commomParams.value.search.update_time_range = item.id;
		emit('searchData', {search: commomParams.value.search,mode: 1})
	}

	const probationChange = (item) => {
		emit('searchData', {search: commomParams.value.search,mode: 2})
	}
	
	const famousChange = (item) => {
		emit('searchData', {search: commomParams.value.search,mode: 2})
	}


	onMounted(() => {
		getCity();
		getPay();
		getEducation();
		getGuimo();
		getNature();
		getUpdate();
	})
</script>

<style lang="less" scoped>
	/deep/ .ant-form-item {
		margin-bottom: 0;
	}

	/deep/ .ant-tag-checkable-checked {
		background-color: #4FBE70;
	}

	/deep/ .ant-input-group-addon {
		background-color: #4FBE70;
	}
	
	:deep(.ant-select-selection-item) {
		color: #ffffff !important;
	}
</style>