<template>
  <div>
    <van-popup
      v-if="fileVisible"
      ref="filePopupRef"
      v-model="fileVisible"
      class="file-popup-detail"
      get-container="body"
      position="left"
      :close-on-click-overlay="false"
      :overlay="true"
      style="width: 100vw; height: 100vh"
      @click-overlay="closeFilePopup"
    >
      <van-sticky>
        <van-nav-bar left-arrow title="预览" @click-left="closeFilePopup" />
      </van-sticky>
      <div class="container">
        <iframe
          ref="fileIframe"
          class="file-iframe"
          :src="fileUrl"
          frameborder="0"
          style="width: 100vw; height: calc(100vh - 40px)"
          allowfullscreen
        ></iframe>
      </div>
    </van-popup>
  </div>
</template>
<script>
  export default {
    name: 'HtFilePreviewDialog',
    data() {
      return {
        fileVisible: false,
        fileUrl: '',
      }
    },
    methods: {
      closeFilePopup() {
        this.fileVisible = false
      },
      showDialog(url) {
        this.fileUrl = url
        this.fileVisible = true
      },
    },
  }
</script>
<style lang="scss" scoped></style>
