<template>
    <q-input class="text-h6" :label="labelText" outlined v-model="currVal" readonly>
        <template v-slot:prepend>
            <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                    <q-date v-model="currVal" :mask="maskVal" today-btn @update:model-value="postingDateUpdate">
                        <div class="row items-center justify-end">
                            <q-btn v-close-popup label="关闭" color="primary" flat />
                        </div>
                    </q-date>
                </q-popup-proxy>
            </q-icon>
        </template>
        <template v-slot:append v-if="showTime">
            <q-icon name="access_time" class="cursor-pointer">
                <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                    <q-time v-model="currVal" :mask="maskVal" format24h>
                        <div class="row items-center justify-end">
                            <q-btn v-close-popup label="关闭" color="primary" flat />
                        </div>
                    </q-time>
                </q-popup-proxy>
            </q-icon>
        </template>
    </q-input>
</template>
<script setup lang="ts">
import { date } from 'quasar';
import { ref } from 'vue';

const props = defineProps({
    val: {
        type: String,
        required: true,
        default: ''
    },
    labelText: {
        type: String,
        required: true,
        default: '日期'
    },
    showTime: {
        type: Boolean,
        default: true
    }
});

const maskVal = ref(props.showTime == false ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss');
const currVal = ref(props.val)

const postingDateUpdate = (value: any, reason: any, details: any) => {
    const timeStamp = Date.now();
    let month = ''
    if (details.month < 10) {
        month = '0' + details.month;
    } else {
        month = details.month;
    }
    const currDate = `${details.year}-${month}-${details.day}`
    if (props.showTime) {
        const formattedString = date.formatDate(timeStamp, 'HH:mm:ss')
        currVal.value = `${currDate} ${formattedString}`
        return
    }
    currVal.value = currDate
}



</script>