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

<script setup>
import { defineProps, defineEmits, ref } from 'vue'
import { ElMessage } from 'element-plus'

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

const emit = defineEmits(['close'])

const close = () => emit('close')

let activeIndex = ref(null);

// 兜底方案：传统复制方法
function fallbackCopyTextToClipboard(index, text) {
    activeIndex.value = index;
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.left = '-999999px';
    textArea.style.top = '-999999px';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();

    try {
        const successful = document.execCommand('copy');
        if (successful) {
            ElMessage.success('复制成功');
        } else {
            ElMessage.error('复制失败1');
        }
    } catch (err) {
        ElMessage.error('复制失败2');
    }

    document.body.removeChild(textArea);
}
</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.active {
    box-shadow: 0 0 15px 3px rgba(74, 144, 226, 0.7);
    border: 1px solid #4a90e2;
}

.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;
}

.center-justify {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
</style>