<template>
	<a-range-picker @Change="getRange" />
</template>

<script lang="ts" setup>
	import { ref, onMounted, watch, computed } from 'vue';
	import { useCommon } from '@/hooks/useCommon';
	let { commomParams, dayjs } = useCommon();
	const dayjsRef = ref(dayjs);
	let props = defineProps(['search_params']);
	const emit = defineEmits();
	
	interface listType {
		start_date:  String,
		end_date: String
	}
	
	commomParams.value.search = commomParams.value.search as listType;
	commomParams.value.search.start_date = '2020-01-01';
	commomParams.value.search.end_date =  dayjs().format('YYYY-MM-DD');
	commomParams.value.search.sort = 'major';
	
	watch(() => props.search_params, (newVal) => {
		emit('searchData', commomParams.value.search)
	}, {
		immediate: true
	})
	
	const getRange = (val) => {
		commomParams.value.search.start_date = dayjsRef.value(val[0]).format('YYYY-MM-DD');
		commomParams.value.search.end_date = dayjsRef.value(val[1]).format('YYYY-MM-DD');
		emit('searchData', commomParams.value.search);
	}
	
	const getData = () => {
		emit('searchData', commomParams.value.search);
	}
	
	// 清空搜索
	const clearSearch = () => {
		commomParams.value.search = {
			page: 1,
			pagesize: 10,
			sort: 'major',
			sortby: 'asc',
			keyword: ''
		}
		emit('clearData', commomParams.value.search);
	}
	
	const onClose = () => {
		clearSearch()
	}
</script>

<style>
</style>