<template>
  <el-dialog
    :visible.sync="visible"
    :title="fileData.name"
    :fullscreen="true"
    append-to-body
    custom-class="base-dialog-wrapper"
    :before-close="close"
  >
    <div class="base-modal-body" style="border: 2px solid #ccc; padding: 10px">
      <PreviewFile
        v-if="visible"
        :file-path="fileData.path"
        :file-type="fileData.name"
        :isLocal="true"
      />
    </div>
  </el-dialog>
</template>
<script>
import PreviewFile from "@/components/PreviewFile/index";
export default {
  name: "PreviewFileDialog",
  components: { PreviewFile },
  props: {
    fileData: {
      required: true,
      type: Object,
      default: () => {
        return {};
      },
    },
    visible: {
      required: true,
      type: Boolean,
      default: false,
    },
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
</style>