<template>
    <el-container>
        <el-header>
            <h2>訊息展示頁面</h2>
        </el-header>

        <!-- 履歷紀錄-->
        <el-main>
            <el-table :data="messages" style="width: 100%">
                <el-table-column label="主題" prop="subject" />
                <el-table-column label="內容" prop="content" />
                <el-table-column label="搜尋內容" prop="searchContent" />
                <el-table-column label="寄送時間" prop="sendTime" />
                <el-table-column label="發送時間" prop="deliveryTime" />
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button @click="viewMessage(row)" type="primary" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>

    <!-- 彈出框 -->
    <el-dialog v-model="dialogFormVisible" title="訊息詳情" width="50%">
        <el-form label-width="100px">

            <el-form-item label="發送類型">
                <el-input :model-value="'端外'" disabled />
            </el-form-item>

            <el-form-item label="發送對象">
                <el-input :model-value="'台北學區，文化大學'" disabled />
            </el-form-item>


            <el-form-item label="主題">
                <el-input v-model="form.subject" disabled />
            </el-form-item>
            <el-form-item label="內容">
                <el-input v-model="form.content" type="textarea" rows="3" disabled />
            </el-form-item>
            <el-form-item label="搜尋內容">
                <el-input v-model="form.searchContent" disabled />
            </el-form-item>
            <el-form-item label="寄送時間">
                <el-input v-model="form.sendTime" disabled />
            </el-form-item>
            <el-form-item label="發送時間">
                <el-input v-model="form.deliveryTime" disabled />
            </el-form-item>
        </el-form>

        <!-- 彈出框的底部按鈕 -->
        <template #footer>
            <el-button type="primary" @click="dialogFormVisible = false">返回</el-button>
            <el-button type="primary" @click="reuseMessage">復用此消息</el-button>
        </template>
    </el-dialog>
</template>

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

    const dialogFormVisible = ref(false);  // 控制彈窗的顯示
    const form = ref({
        subject: '',
        content: '',
        searchContent: '',
        sendTime: '',
        deliveryTime: ''
    });

    const messages = ref([
        {
            subject: '學校公告',
            content: '歡迎來到我們的學校網站！',
            searchContent: '網站，歡迎',
            sendTime: '2025-03-25 10:00:00',
            deliveryTime: '2025-03-25 10:05:00'
        },
        {
            subject: '家長會通知',
            content: '請注意：明天有家長會，請準時出席。',
            searchContent: '家長會，出席',
            sendTime: '2025-03-24 14:30:00',
            deliveryTime: '2025-03-24 14:35:00'
        },
        {
            subject: '成績更新',
            content: '最新的成績已經上線，請家長查看。',
            searchContent: '成績，家長',
            sendTime: '2025-03-23 09:00:00',
            deliveryTime: '2025-03-23 09:05:00'
        },
        {
            subject: '清潔通知',
            content: '學期結束後將進行學校清潔，請協助。',
            searchContent: '清潔，協助',
            sendTime: '2025-03-22 16:45:00',
            deliveryTime: '2025-03-22 16:50:00'
        },
        {
            subject: '寒假安排',
            content: '假期安排：寒假將於12月1日開始。',
            searchContent: '寒假，安排',
            sendTime: '2025-03-21 11:00:00',
            deliveryTime: '2025-03-21 11:05:00'
        }
    ]);

    const viewMessage = (message) => {
        // 將選中的訊息填充到 `form`
        form.value = { ...message };
        // 打開彈窗
        dialogFormVisible.value = true;
    };

    // 用來處理復用消息的邏輯
    const reuseMessage = () => {
        alert('已復用');
        // 在這裡添加你的復用邏輯，例如將訊息再利用，或儲存到其他地方
    };
</script>

<style scoped>
    h2 {
        text-align: center;
        margin: 20px 0;
    }
</style>