<template>
    <view>
        <slot></slot>
        <reservation-evaluate ref="_baseEvaluatePop" />
        <qiandao-popup ref="_qianDaoPopup" />
        <!-- 预约信息弹窗组件 -->
        <ReservationPopup ref="_reservationPopup" />
        <up-datetime-picker :show="_upDatesTimePicker.show" :filter="_upDatesTimePicker.filter"
            :formatter="_upDatesTimePicker.formatter" v-model="_upDatesTimePicker.value" mode="datetime"
            :minDate="_upDatesTimePicker.minDate" @cancel="_upDatesTimePicker.onCancel"
            @confirm="_upDatesTimePicker.onConfirm" :title="_upDatesTimePicker.title"
            :hasInput="false"></up-datetime-picker>
    </view>

</template>
<script setup>
import { ref, onMounted, provide } from 'vue'
import ReservationEvaluate from '@/components/com/page/reservation-evaluate.vue'
import ReservationPopup from '@/components/com/index/ReservationPopup.vue'
import QiandaoPopup from '@/components/com/page/qiandao-popup.vue'
import dayjs from 'dayjs';
const _baseEvaluatePop = ref(null)
const _reservationPopup = ref(null)
const _qianDaoPopup = ref(null);

const openEvaluatePop = async (reservation) => {
    _baseEvaluatePop.value && _baseEvaluatePop.value.show(reservation)
}
const openReservationPopup = async (reservation) => {
    console.log("openReservationPopup", reservation)
    _reservationPopup.value && _reservationPopup.value.show(reservation)
}
const openQianDaoPop = async (reservation) => {
    console.log("openQianDaoPop", reservation)
    _qianDaoPopup.value && _qianDaoPopup.value.show(reservation)
}
const _upDatesTimePicker = ref({
    refId: null,
    show: false,
    value: Date.now(),
    title: '',
    minDate: Date.now(),
    filter: (mode, options) => {
        // console.log("filter", mode, options)
        if (mode == "minute") {
            return options.filter((option) => option % 5 === 0);
        }
        return options;
    },
    formatter(type, value) {
        if (type === 'year') {
            return `${value}年`
        }
        if (type === 'month') {
            return `${value}月`
        }
        if (type === 'day') {
            return `${value}日`
        }
        if (type === 'hour') {
            return `${value}时`
        }
        if (type === 'minute') {
            return `${value}分`
        }
        return value
    },
    onCancel: () => {
        if (_upDatesTimePicker.value.onError != null) {
            _upDatesTimePicker.value.onError();
        }
        _upDatesTimePicker.value.show = false;
    },
    onConfirm: (options) => {
        if (_upDatesTimePicker.value.onCallback != null) {
            // const date = dayjs(options.value);
            _upDatesTimePicker.value.onCallback(options.value);
        }
        _upDatesTimePicker.value.show = false;
    },
    onCallback: null,
    onError: null
});

const openUpDatesTimePicker = (value, minDate, title) => {
    return new Promise((resolve, reject) => {
        // 1. 获取当前时间
        const now = dayjs();

        // 2. 当前时间加 1 小时
        const oneHourLater = now.add(1, 'hour');
        const timestamp = oneHourLater.valueOf();
        _upDatesTimePicker.value.onCallback = resolve;
        _upDatesTimePicker.value.onError = reject;

        if (value != null && value != "" && value != 0) {
            _upDatesTimePicker.value.value = value;
        } else {
            _upDatesTimePicker.value.value = timestamp;
        }
        if (minDate != null && minDate != "" && minDate != 0) {
            _upDatesTimePicker.value.minDate = minDate;
        } else {
            _upDatesTimePicker.value.minDate = timestamp;
        }
        if (title != null) {
            _upDatesTimePicker.value.title = title;
        } else {
            _upDatesTimePicker.value.title = '';
        }
        _upDatesTimePicker.value.show = true;
    })
}

defineExpose({ openEvaluatePop, openReservationPopup, openUpDatesTimePicker,openQianDaoPop })


// onMounted(() => {
//     console.log("container-basecontainer-basecontainer-basecontainer-base onMounted")
//     // 确保 _containerBase 已经是有效的组件实例
//     provide('openEvaluatePop', (reservation) => {
//         _baseEvaluatePop.value.show(reservation)
//     })

//     provide('openReservationPopup', (reservation) => {
//         _reservationPopup.value.show(reservation)
//     })
// });
</script>
<style lang="scss" scoped></style>