<!--用户选择组件-->
<template>
  <el-dialog
    resizable
    :visible.sync="visible"
    modal-append-to-body
    append-to-body
    :fullscreen="fullscreen"
    ref="iframeViewDialog"
    :show-close="false"
    custom-class="iframe-view-dialog"
    width="80%"
    v-drag-dialog
  >
    <div slot="title" class="iframe-view-dialog__header">
      <div class="iframe-view-dialog__header-title">附件预览</div>
      <div class="iframe-view-dialog__header-operation">
        <div class="iframe-view-dialog__header-btn" v-show="fullscreen" @click="fullscreen = false" title="缩小">
          <i class="el-icon-copy-document"></i>
          <span class="text">缩小</span>
        </div>
        <div class="iframe-view-dialog__header-btn" v-show="!fullscreen" @click="fullscreen = true" title="全屏">
          <i class="el-icon-full-screen"></i>
          <span class="text">全屏</span>
        </div>

        <div class="iframe-view-dialog__header-btn" title="" @click="openedWindow">
          <i class="el-icon-paperclip"></i>
          <span class="text">在新窗口中打开</span>
        </div>
        <div class="iframe-view-dialog__header-btn" @click="visible = false">
          <i class="el-icon-close"></i>
          <span class="text">关闭</span>
        </div>
      </div>
    </div>
    <div :style="{ height: fullscreen ? '100%' : '720px' }">
      <iframe :src="src" style="height: 100%; border: none; width: 100%; vertical-align: bottom" border="none"></iframe>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "AceIframeView",
  components: {},
  created() {
    this.fullscreen = this.isFullScreen;
  },
  computed: {},
  props: {
    src: {
      type: String,
      default: "",
    },
    isFullScreen: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    fullscreen(val) {
      if (val) {
        const iframeViewDialogEl = this.$refs.iframeViewDialog.$el;
        const dialogEl = iframeViewDialogEl.querySelector(".iframe-view-dialog");
        dialogEl.style.cssText = `top:0px;left:0px`;
        // dialogEl.style.top="0px"
        // dialogEl.style.left="0px"
      }
    },
  },
  data() {
    return {
      visible: false,
      fullscreen: false,
    };
  },
  methods: {
    openedWindow() {
      window.open(this.src, "_blank", `width=1200px,height=800px,top=40px,left=40px`);
      this.visible = false;
    },
    show() {
      this.visible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../theme-chalk/src/scss/mixi.scss";
::v-deep .iframe-view-dialog {
  display: flex;
  flex-direction: column;
  border-radius: 0 !important;
  .iframe-view-dialog__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    &-title {
      flex: 1;
    }
    &-operation {
      display: flex;
    }
    &-btn {
      font-size: 16px;
      display: flex;
      align-items: center;
      padding: 8px;
      cursor: pointer !important;
      .text {
        font-size: 12px;
        margin-left: 6px;
      }
      &:hover {
        background-color: rgba(0, 0, 0, 0.1);
      }
    }
  }
  .el-dialog__header {
    padding: 0 8px 0 16px !important;
    .el-dialog__headerbtn {
      top: 6px;
    }
  }
  .el-dialog__body {
    padding: 0 !important;
    height: 100%;
    max-height: none;
  }
}
</style>
