<template>
    <el-dialog v-model="dialogVisible" style="width:1200px;height:600px;" :title="props.title">
        
        <template #header>
        <div class="dialog-header">
            <span class="dialog-title">{{props.title}}</span>
        </div>
        </template>
        <div class="dialog-body">
            <pre>{{props.content}}</pre>
        </div>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
            确定
            </el-button>
        </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue'
const props = defineProps({
    title: { type: String, required: true, default: '文件内容'},
    content: { type: String, required: true, default: '文件内容'},
})
const emit = defineEmits(['update:modelValue'])
const dialogVisible = ref(false)

const showDialog = (visible:boolean = true) => {
    dialogVisible.value = visible 
}
defineExpose({ showDialog})
</script>
<style scoped>
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center; 
}

.dialog-body {
    width: 100%;
    height: 450px; /* 可以根据需要调整 */
    overflow-y: auto; /* 当内容超出时显示滚动条 */ 
    text-wrap: wrap;
    word-wrap: normal;
}
.dialog-footer {
    display: flex;
    justify-content: flex-end; /* 按钮靠右对齐 */ 
}
</style>