<template>
    <el-dialog title="PDF查看" :visible.sync="dialogVisiblePdf" :append-to-body="true" width="95%" :before-close="handleClose"
        class="dialog_diy">
        <div style="height: 100%;">
            <iframe ref="viframe" style="width: 100%; height: 99%; border: none"
                :src="'https://cloud.cocorobo.cn/pdf.js/web/viewer.html?file=' + encodeURIComponent(url)"></iframe>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close">关 闭</el-button>
        </span>
    </el-dialog>
</template>
  
<script>
export default {
    props: {
        dialogVisiblePdf: {
            type: Boolean,
            default: false
        },
        url: {
            type: String,
        }
    },
    data() {
        return {
        }
    },
    methods: {
        handleClose(done) {
            this.close()
            done();
        },
        close() {
            this.$emit('update:dialogVisiblePdf', false)
        }
    },
}
</script>
  
<style scoped>
.dialog_diy>>>.el-dialog {
    height: 100%;
    margin: 0 auto !important;
}

.dialog_diy>>>.el-dialog__header {
    background: #454545 !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__body {
    height: calc(100% - 124px);
    box-sizing: border-box;
    padding: 0px;
}


.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}


.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
    background: #fafafa;
}
</style>