<template>
  <el-dialog
      class="my-dialog yse-events"
      :align-center="true"
      with-header="false"
      destroy-on-close
      :model-value="showDialog"
      @close="closeDialog()"
      :modal="true"
  >
    <div class="dialog-box">
      <div class="title">
        <div class="myclose cursor-pointer" @click="closeDialog"></div>
      </div>
      <iframe class="my-body" :src="src"></iframe>
    </div>
  </el-dialog>
</template>

<script setup>
import {onMounted, toRefs, ref,watch} from "vue";
import {base_img_url2} from "../api/config"
import vueshowpdf from 'vueshowpdf'
const emit = defineEmits(["closeDialog"]);
const title = ref(null)
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: true,
  },
  title:{
    type:String,
    default:""
  },
  src:{
    type:String,
    default:""
  }
});
const {rowData, showDialog } = toRefs(props);
onMounted(async () => {

})

function closeDialog(){
  showDialog.value = false;
  emit("closeDialog")
}

</script>

<style lang="scss" scoped>
$title-height:44px;
$body-height:calc(100% - $title-height);

.dialog-box{
  font-family: PingFangSC-Regular, PingFang SC;
  position: fixed;
  left: calc(50% - 700px);
  top:0px;
  width: 1400px;
  height: calc(100% - 100px);
  background: rgba(1,17,22,0.8);
  box-shadow: 0px 0px 20px 0px #00FFF0;
  border-radius: 4px;
  border: 2px solid rgba(81,233,240,0.6);
  z-index: 99999;

  .title{
    position: relative;
    width: 100%;
    height: $title-height;
    box-sizing: border-box;
    background: rgba(0,77,101,0.8);
    border-radius: 4px 4px 0px 0px;
    border-bottom: 2px solid rgba(81,233,240,0.3);
    .myclose{
      position: absolute;
      right: 0px;
      top: calc($title-height / 2 - 8px);
      margin-right: 20px;
      width: 16px;
      height: 16px;
      background-image: url("@/assets/img/close.png");
      background-size: 100% 100%;
    }
  }
  .my-body{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

}

</style>
