<template>
    <div v-if="visible" class="dialog-overlay" @click.self="close">
        <div class="dialog-content">
            <h3 class="text-lg font-bold mb-4">最近一条的消息翻译</h3>
            <div class="chat-box">
                <div class="left-message">
                    <div class="bubble left">{{ leftMsg }}</div>
                </div>
                <div class="right-message">
                    <div class="bubble right">{{ rightMsg }}</div>
                </div>
            </div>
            <!-- <button class="close-btn" @click="close">关闭</button> -->
        </div>
    </div>
</template>

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

const props = defineProps({
    leftMsg: String,
    rightMsg: String,
    visible: Boolean
})

// const emit = defineEmits(['close'])

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

<style scoped>
.dialog-overlay {
    /* position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; */
    /* background: rgba(0, 0, 0, 0.5); */
    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;
}

.left-message {
    align-self: flex-start;
}

.right-message {
    align-self: flex-end;
    text-align: right;
}

.bubble {
    padding: 10px 14px;
    border-radius: 18px;
    max-width: 70%;

    display: inline-block;
    /* 👈 使气泡宽度自适应内容 */
    padding: 10px 14px;
    border-radius: 18px;
    max-width: 70%;
    word-break: break-word;
    /* 防止英文单词太长撑爆 */
}

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

.bubble.right {
    background-color: rgb(0, 169, 214);
    color: white;

}

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