<template>
    <div id="message_all">
        <!-- 上：标题区 -->
        <div class="message-header">
            <h1>留言板</h1>
        </div>
        <!-- 中：留言内容区 -->
        <div class="message-list">
            <div class="message-item" v-for="msg in messages" :key="msg.id">
                <div class="message-nickname">{{ msg.nickname }}</div>
                <div class="message-content">{{ msg.content }}</div>
                <div class="message-time">{{ msg.time }}</div>
            </div>
            <div v-if="messages.length === 0" class="message-empty">还没有留言，快来抢沙发吧！</div>
        </div>
        <!-- 下：留言输入区 -->
        <div class="message-form-section">
            <h2>发送评论（请正确填写邮箱地址，否则将会当成垃圾评论处理）</h2>
            <el-form :model="form" label-width="0">
                <el-form-item>
                    <el-input v-model="form.content" placeholder="评论内容" type="textarea" rows="4" clearable />
                </el-form-item>
                <div class="form-input-row">
                    <el-form-item>
                        <el-input v-model="form.nickname" placeholder="昵称" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.email" placeholder="邮箱/QQ号" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.captcha" placeholder="验证码" clearable />
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">发送</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

const messages = ref([
    { id: 1, nickname: 'A', content: '这里是A！', time: '2025-09-26 10:00' },
    { id: 2, nickname: 'B', content: '这里是B！', time: '2025-09-26 10:05' },
    { id: 3, nickname: 'C', content: '这里是C！', time: '2025-09-26 10:10' }
])

const form = reactive({
    content: '',
    nickname: '',
    email: '',
    captcha: ''
})

const onSubmit = () => {
    if (!form.content || !form.nickname) return
    messages.value.push({
        id: messages.value.length + 1,
        nickname: form.nickname,
        content: form.content,
        time: new Date().toLocaleString()
    })
}
</script>

<style scoped>
#message_all {
    width: var(--content-width);
    margin: var(--content-margin);
}

.message-header {
    background: rgba(102, 161, 216, 0.9);
    border-radius: 12px;
    padding: 20px 0;
    text-align: center;
    margin-bottom: 20px;
}

.message-list {
    margin-bottom: 24px;
    background: #f8fafd;
    border-radius: 12px;
    padding: 16px;
    min-height: 120px;
}

.message-item {
    background: #fff;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.message-nickname {
    font-weight: bold;
    color: #409eff;
    margin-bottom: 4px;
}

.message-content {
    margin-bottom: 4px;
    color: #333;
}

.message-time {
    font-size: 12px;
    color: #aaa;
    text-align: right;
}

.message-empty {
    color: #bbb;
    text-align: center;
    padding: 32px 0;
}

.message-form-section {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.message-form-section h2 {
    font-size: 1.1rem;
    margin-bottom: 18px;
    color: #333;
}

.form-input-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.form-input-row .el-form-item {
    flex: 1;
}

.el-form-item .el-input__inner,
.el-form-item .el-textarea__inner {
    min-height: 45px;
    font-size: 1rem;
}

@media (max-width: 768px) {
    #message_all {
        padding: 8px 0;
    }

    .message-form-section {
        padding: 12px;
    }

    .form-input-row {
        flex-direction: column;
        gap: 8px;
    }
}
</style>