<template>
  <div class="iframe-container">
    <el-dialog class="dialog-container" :model-value="modelValue" width="75%"  :show-close="false" @close="close">
      <div style="height: 75vh;">
        <div class="close" @click="close"><el-icon :size="30"><CircleClose /></el-icon></div>
        <iframe :src="src" frameborder="0" width="100%" height="100%"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }, title: {
    type: String,
    default: '提示'
  }, showFooter: {
    type: Boolean,
    default: true
  }, src: {
    type: String,
    default: ''
  }

})
const emit = defineEmits(['update:modelValue', 'submit', 'close'])
const close = () => {
  emit('update:modelValue', false)
  emit('close')
}
const submit = () => {
  emit('submit')
}
</script>

<style lang="scss" scoped>
.iframe-container {
  ::v-deep .el-dialog__header {
display: none;
  }
.close{
  position: absolute;
  top: 0px;
  right: -35px;
  cursor: pointer;
  border-radius: 50%;
  color: #fff;
}
  ::v-deep .el-dialog__body {
    padding: 0 !important;
  }
}
</style>
