<template>
    <div class="time-period-search">
        <el-select class="time-period-search__unit" :model-value="unit" @update:model-value="handleUnitChange">
            <el-option v-for="item in timePeriodUnitOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-button
            class="time-period-search__button"
            :icon="ArrowLeft"
            :title="`上一个${unitLabel}`"
            @click="shiftPeriod(-1)"
        />

        <el-date-picker
            class="time-period-search__picker"
            :model-value="baseDate"
            :type="getTimePeriodPickerType(props.unit)"
            :format="getTimePeriodPickerFormat(props.unit)"
            :clearable="false"
            :editable="false"
            :placeholder="`选择${unitLabel}`"
            @update:model-value="handleDateChange"
        />

        <el-button
            class="time-period-search__button"
            :icon="ArrowRight"
            :title="`下一个${unitLabel}`"
            @click="shiftPeriod(1)"
        />

        <el-button
            class="time-period-search__button"
            :icon="Clock"
            :title="`当前${unitLabel}`"
            @click="setCurrentPeriod"
        />
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ArrowLeft, ArrowRight, Clock } from '@element-plus/icons-vue'
import {
    getTimePeriodPickerFormat,
    getTimePeriodPickerType,
    resolveTimePeriodUnitLabel,
    shiftTimePeriod,
    timePeriodUnitOptions,
    type TimePeriodUnit
} from './timePeriod'

defineOptions({
    name: 'TimePeriodSearch'
})

const props = defineProps<{
    unit: TimePeriodUnit
    modelValue: Date | string | number
}>()

const emit = defineEmits<{
    'update:unit': [value: TimePeriodUnit]
    'update:modelValue': [value: Date]
}>()

const baseDate = computed(() => new Date(props.modelValue))
const unitLabel = computed(() => resolveTimePeriodUnitLabel(props.unit))

const handleUnitChange = (value: TimePeriodUnit) => {
    emit('update:unit', value)
}

const handleDateChange = (value: Date | string | number | null) => {
    if (!value) return
    emit('update:modelValue', new Date(value))
}

const shiftPeriod = (offset: number) => {
    emit('update:modelValue', shiftTimePeriod(props.unit, baseDate.value, offset))
}

const setCurrentPeriod = () => {
    emit('update:modelValue', new Date())
}
</script>

<style scoped lang="scss">
.time-period-search {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 4px;
}

.time-period-search__unit {
    width: 56px;
    flex: 0 0 56px;
}

.time-period-search__picker {
    width: 112px;
    flex: 0 0 112px;
}

.time-period-search__button {
    width: 28px;
    flex: 0 0 28px;
    padding: 8px 6px;
}
</style>
