<script setup lang="ts">
    import dayjs from 'dayjs'

    const props = defineProps({
        type: {
            type: String,
            default: '5',
        },
    })

    const opts = [
        { label: '小时级', value: '4', format: 'MM月DD日HH时', valueFormat: 'YYYY-MM-DD HH' },
        { label: '分钟级', value: '5', format: 'MM月DD日HH时mm分', valueFormat: 'YYYY-MM-DD HH:mm' },
    ]

    const _type = ref<string>(props.type)

    const active = computed(() => opts.find((v) => v.value === _type.value))

    // 是否显示
    const show = ref<boolean>(true)

    // 开始时间
    const sTime = ref<string>(dayjs().subtract(1, 'day').format(active.value.valueFormat))

    // 结束时间
    const eTime = ref<string>(dayjs().format(active.value.valueFormat))

    watch(
        () => props.type,
        (val) => {
            _type.value = val
        },
    )

    // 时间组件改变
    function change(e) {
        const format = active.value.valueFormat

        const { startDate, endDate } = toRaw(e)

        sTime.value = dayjs(toRaw(startDate).result).format(format)
        eTime.value = dayjs(toRaw(endDate).result).format(format)
    }

    function cancel() {
        show.value = false
    }
</script>

<template>
    <view class="h-84 lh-10 flex text-28 bg-#fff p-2 pt-0 pb-0 pos-relative">
        <fui-icon name="wait" size="40" />
        <text class="ml-1">小时级：</text>
        <text class="text-#1890FF" @click="show = !show">
            {{ dayjs(sTime).format(active.format) }}
            -
            {{ dayjs(eTime).format(active.format) }}
        </text>
        <fui-icon name="arrowright" size="45" class="absolute right-16" color="#000000" />
        <!-- 时间组件 -->
        <fui-date-picker
            range
            :value="dayjs(sTime).format(active.valueFormat)"
            :show="show"
            :type="type"
            @change="change"
            @cancel="cancel"
        />
    </view>
</template>
