<template>
    <el-date-picker v-model="dateVlaue" type="daterange" :editable="false" :shortcuts="shortcuts" range-separator="至"
        start-placeholder="开始时间" end-placeholder="结束时间" :clearable="false" :style="{ width: `${props.width}px` }"
        @change="dateConfirm" />
</template>

<script setup>
import { ref } from 'vue'
import { dayjs } from 'element-plus'

const props = defineProps({
    width: {
        type: [String, Number],
        default: 200
    }
})

const emits = defineEmits(['success'])

const shortcuts = [
    {
        text: '今天',
        value: () => {
            return [
                dayjs()
                    .startOf("day"),
                dayjs()
                    .endOf("day")
            ]
        },
    },
    {
        text: '本月',
        value: () => {
            return [
                dayjs()
                    .startOf("month"),
                dayjs()
                    .endOf("month")
            ]
        },
    },
    {
        text: '最近三个月',
        value: () => {
            return [
                dayjs()
                    .add(-3, "M"),
                dayjs()
                    .endOf("month")
            ]
        },
    },
    {
        text: '本年',
        value: () => {
            return [
                dayjs()
                    .startOf("year"),
                dayjs()
                    .endOf("year")
            ]
        },
    },
]

const dateVlaue = ref([])
const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];

// 确认选择时间
function dateConfirm(value) {
    // console.log(value);
    emits('success', [
        dayjs(value[0]).format(format[0]),
        dayjs(value[1]).format(format[1]),
    ])
}

// 重置
function reset() {
    dateVlaue.value = []
}

defineExpose({
    reset
})

// onMounted(() => {
//     // 创建组件后执行一次时间传递
//     emits('success', [
//         dayjs(dateVlaue[0]).format(format[0]),
//         dayjs(dateVlaue[1]).format(format[1]),
//     ])
// })
</script>