<template>
    <div v-if="visible" class="dialog-overlay" @click.self="close">
        <div class="dialog-content">
            <h3 class="text-lg font-bold mb-4">最近一条的消息翻译</h3>
            <el-scrollbar class="chat-box">
                <div v-for="(msg, index) in messages" :key="index"
                    :class="msg.position === 'left' ? 'left-message' : 'right-message'">
                    <div :class="['bubble', msg.position]">{{ msg.text }}</div>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
    visible: Boolean,
    messages: {
        type: Array,
        required: true,
        default: () => [],
    },
})

const emit = defineEmits(['close'])

const close = () => emit('close')
</script>

<style scoped>
.dialog-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialog-content {
    background: rgb(246, 246, 246);
    padding: 0px 20px 20px 20px;
    border-radius: 12px;
    width: 300px;
}

.chat-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 80vh;
}

.left-message {
    align-self: flex-start;
    margin-bottom: 20px;
}

.right-message {
    align-self: flex-end;
    text-align: right;
    margin-bottom: 20px;

}

.bubble {
    padding: 10px 14px;
    border-radius: 18px;
    max-width: 70%;
    display: inline-block;
    word-break: break-word;
}

.bubble.left {
    background-color: #ffffff;
}

.bubble.right {
    background-color: rgb(0, 169, 214);
    color: white;
    text-align: left;
    /* ✅ 关键：强制文字左对齐 */
}

.close-btn {
    margin-top: 20px;
    padding: 8px 12px;
    background-color: #409EFF;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
</style>