<template>
	<div class="flex-center-center">
		<el-segmented
			v-model="dateType"
			:options="[
				{ label: '按日统计', value: 'date' },
				{ label: '按周统计', value: 'week' },
				{ label: '按月统计', value: 'month' },
				{ label: '按时间段统计', value: 'datetimerange' },
			]"
			@change="changeDateType"
			class="mr10"
			:disabled="disabled"
		/>
		<el-date-picker
			v-model="date"
			type="date"
			placeholder="请选择日期"
			:clearable="clearable"
			v-if="dateType === 'date'"
			@change="changeDate"
			:editable="editable"
		/>
		<el-date-picker
			v-model="date"
			type="week"
			placeholder="请选择日期"
			:clearable="clearable"
			v-if="dateType === 'week'"
			format="YYYY 第ww周"
			@change="changeDate"
			:editable="editable"
		/>
		<el-date-picker
			v-model="date"
			type="month"
			placeholder="请选择日期"
			:clearable="clearable"
			v-if="dateType === 'month'"
			@change="changeDate"
			:editable="editable"
		/>
		<el-date-picker
			v-model="timeRange"
			type="datetimerange"
			unlink-panels
			range-separator="至"
			start-placeholder="开始时间"
			end-placeholder="结束时间"
			:shortcuts="shortcuts"
			v-if="dateType === 'datetimerange'"
			:clearable="clearable"
			@change="changeDate"
			value-format="YYYY-MM-DD[T]HH:mm:ss"
			:default-time="defaultTimeStartEnd"
			:editable="editable"
		/>
	</div>
</template>
<script setup lang="ts" name="statisticalTime">
import { ref, watch } from 'vue';
import { defaultDate, defaultTimeStartEnd, shortcuts } from '@/utils/constants';
import dayjs from 'dayjs';

const props = defineProps({
	clearable: {
		type: Boolean,
		default: false,
	},
	modelValue: {
		type: Array,
		default: () => [],
	},
	dateType: {
		type: String,
		default: 'date',
	},
	editable: {
		type: Boolean,
		default: true,
	},
	disabled: {
		type: Boolean,
		default: false,
	},
});
const emit = defineEmits(['change', 'update:modelValue', 'update:dateType']);
const dateType = ref(props.dateType);
const date = ref<string>(dayjs().format('YYYY-MM-DD[T]HH:mm:ss'));
const timeRange = ref<EmptyArrayType>(defaultDate);
const changeDate = (val: any) => {
	let emitValue: EmptyObjectType;
	if (val) {
		switch (dateType.value) {
			case 'date':
				emitValue = [dayjs(val).startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'), dayjs(val).endOf('day').format('YYYY-MM-DD[T]HH:mm:ss')];
				emit('update:modelValue', emitValue);
				emit('change', emitValue);
				break;
			case 'week':
				emitValue = [dayjs(val).startOf('week').format('YYYY-MM-DD[T]HH:mm:ss'), dayjs(val).endOf('week').format('YYYY-MM-DD[T]HH:mm:ss')];
				emit('update:modelValue', emitValue);
				emit('change', emitValue);
				break;
			case 'month':
				emitValue = [dayjs(val).startOf('month').format('YYYY-MM-DD[T]HH:mm:ss'), dayjs(val).endOf('month').format('YYYY-MM-DD[T]HH:mm:ss')];
				emit('update:modelValue', emitValue);
				emit('change', emitValue);
				break;
			case 'datetimerange':
				emitValue = val;
				emit('update:modelValue', val);
				emit('change', emitValue);
				break;
			default:
				break;
		}
		emit('update:dateType', dateType.value);
	} else {
		switch (dateType.value) {
			case 'date':
				emitValue = [dayjs().startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD[T]HH:mm:ss')];
				date.value = dayjs().format('YYYY-MM-DD[T]HH:mm:ss');
				emit('update:modelValue', emitValue);
				emit('change', emitValue);
				break;
			case 'week':
				emitValue = [dayjs().startOf('week').format('YYYY-MM-DD[T]HH:mm:ss'), dayjs().endOf('week').format('YYYY-MM-DD[T]HH:mm:ss')];
				date.value = dayjs().format('YYYY-MM-DD[T]HH:mm:ss');
				emit('update:modelValue', emitValue);
				emit('change', emitValue);
				break;
			case 'month':
				emitValue = [dayjs().startOf('month').format('YYYY-MM-DD[T]HH:mm:ss'), dayjs().endOf('month').format('YYYY-MM-DD[T]HH:mm:ss')];
				date.value = dayjs().format('YYYY-MM-DD[T]HH:mm:ss');
				emit('update:modelValue', emitValue);
				emit('change', emitValue);
				break;
			case 'datetimerange':
				emitValue = [dayjs().startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD[T]HH:mm:ss')];
				timeRange.value = [dayjs().startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD[T]HH:mm:ss')];
				emit('update:modelValue', emitValue);
				emit('change', emitValue);
				break;
			default:
				break;
		}
		emit('update:dateType', dateType.value);
	}
};
const changeDateType = () => {
	let emitValue: EmptyObjectType;
	switch (dateType.value) {
		case 'date':
			emitValue = [dayjs(date.value).startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'), dayjs(date.value).endOf('day').format('YYYY-MM-DD[T]HH:mm:ss')];
			emit('update:modelValue', emitValue);
			emit('change', emitValue);
			break;
		case 'week':
			emitValue = [
				dayjs(date.value).startOf('week').format('YYYY-MM-DD[T]HH:mm:ss'),
				dayjs(date.value).endOf('week').format('YYYY-MM-DD[T]HH:mm:ss'),
			];
			emit('update:modelValue', emitValue);
			emit('change', emitValue);
			break;
		case 'month':
			emitValue = [
				dayjs(date.value).startOf('month').format('YYYY-MM-DD[T]HH:mm:ss'),
				dayjs(date.value).endOf('month').format('YYYY-MM-DD[T]HH:mm:ss'),
			];
			emit('update:modelValue', emitValue);
			emit('change', emitValue);
			break;
		case 'datetimerange':
			emitValue = timeRange.value;
			emit('update:modelValue', timeRange.value);
			emit('change', emitValue);
			break;
		default:
			break;
	}
	emit('update:dateType', dateType.value);
};
watch(
	() => props.dateType,
	(newValue) => {
		dateType.value = newValue;
	}
);
// 重置
const reset = () => {
	dateType.value = 'date';
};
defineExpose({
	reset,
});
</script>
