<template>
<div class="page_dialog">
    <!-- v-model="previewVisible" -->
    <!-- append-to-body -->
    <!-- style="max-height: 90vh;overflow: auto;max-width: 900px;" -->
    <el-dialog
        @close="HandleDialogClose"
        class="preview_dialog el_button"
        :model-value="props.previewVisible"
        :width="dialogWidth ? dialogWidth : '80%'"
        :title="props.title || '附件预览'"
        :align-center="true"
    >
        <div class="custom">
            <!-- 内部 class="preview_introduce" -->
            <slot></slot>
        </div>
      
        <template v-if="props.customFooter" #footer>
            <slot name="close">
                <el-button @click="HandleDialogClose" class="button_border_gray cancel" >取 消</el-button>
            </slot>
            <slot name="footer"></slot>
            <slot name="confirm">
                <el-button :disabled="props.disabledConfirm" :loading="props.submitLoading"  @click="props.disabledConfirm ? '' : HandleConfirmCheck()" class="button_background"  >确 定</el-button>
            </slot>
        </template>
    </el-dialog>
</div>
</template> 

<script setup lang="ts">
const props = defineProps({
    title:{
        type:String
    },
    customFooter:{
        type:Boolean,
        required:false
    },
    previewVisible:{
        type:Boolean,
        required:true
    },
    submitLoading:{
      type:Boolean,
      default:false,
    },
    disabledConfirm:{
        type:Boolean,
        default:false
    },
    dialogWidth:{
        type:String,
    }
})

const emit = defineEmits(['close','confirm'])


const HandleDialogClose = ()=>{
    emit('close')
    console.log('弹窗关闭===')
    // previewVisible.value = false
}

const HandleConfirmCheck = async () => {
    emit('confirm')
}

</script>


<style lang="scss" scoped>
.preview_dialog{
    overflow: auto;
    border-radius: 8px;
    padding: 0;
}
:deep(.el-dialog__header) {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-indent: 20px;
    background-color: #f5f7fa;
    border-bottom: 1px solid #f5f7fa;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    padding: 0 !important;
    text-align: left;
    .el-dialog__title {
    font-weight: 600;
    font-size: 16px;
    color: #303133;
    }
    button:focus, button:focus-visible {
    outline: none;
    }
}
//饿了么内容样式覆盖
:deep(.el-dialog__body) {
    overflow: auto;
    font-weight: 400;
    font-size: 16px;
    color: #333;
    padding: 20px;
    width: 100%;
    margin: auto;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-height: calc(90vh - 50px - 66px);
    
    .custom{
        .preview_introduce{
            background-color: #fafafa;
            border: solid #e9e9e9 1px !important;
            padding:10px;
            margin-bottom: 10px;
            border-radius: 8px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
        }
    }
}

</style>