<template>
    <el-radio-group v-model="radioValue" style="padding-left: 20px;" @change="handleModeChange">
        <el-radio label="立即發送">立即發送</el-radio>

        <el-radio label="預約發送">
            預約發送：
            <el-date-picker v-model="selectedDate"
                            type="datetime"
                            placeholder="選擇時間"
                            format="YYYY-MM-DD HH:mm"
                            value-format="YYYY-MM-DD HH:mm"
                            :editable="false"
                            :disabled="radioValue !== '預約發送'"
                            style="margin-left: 8px; width: 240px;"
                            @change="updateMessage" />
        </el-radio>
    </el-radio-group>

    <div style="margin-top: 16px;">
        <p>您選擇的時間是：{{ selectedDate }}</p>
        <p>儲存的消息是：{{ newMsgSend }}</p>
    </div>
</template>

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

    // 狀態變數
    const radioValue = ref('立即發送')
    const selectedDate = ref(null)
    const newMsgSend = ref('')

    // 切換模式時，自動設定時間
    const handleModeChange = (val) => {
        if (val === '預約發送') {
            const now = dayjs().second(0).millisecond(0)
            selectedDate.value = now.format('YYYY-MM-DD HH:mm')
            updateMessage(selectedDate.value)
        } else {
            selectedDate.value = null
            newMsgSend.value = ''
        }
    }

    // 更新儲存的時間
    const updateMessage = (date) => {
        newMsgSend.value = date
    }
</script>