<template>
  <div>
    <a-tag :color="enums.fileColor[getFileExtension(fileName).toLowerCase()]">{{ fileName }}</a-tag>
    <a-button v-show="isOpen" shape="circle" size="small" icon="search" @click="FileView()" />
    <a-modal v-model="visibleFileView" :title="'[' + fileName + '] 文件查看'" width="1000px" :dialog-style="{ top: '10%' }" :footer="null" destroyOnClose>
      <preview-file v-model="fileUrl" :fileName="fileName"></preview-file>
    </a-modal>
  </div>
</template>

<script>
import { checkImageFileType, checkDocumentFileType, getFileExtension, enums } from "@/views/utils/common"
import previewFile from '@/views/components/common/previewFile'

export default {
  name: 'documentView',
  components: {
    previewFile
  },
  data() {
    return {
      visibleFileView: false,
      enums: enums,
    };
  },
  props: {
    fileUrl: {
      type: String,
      default() {
        return null;
      },
    },
    fileName: {
      type: String,
      default() {
        return null;
      },
    },
    imageArray: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    isOpen: function () {
      return checkDocumentFileType(this.fileName)
    }
  },
  methods: {
    getFileExtension,
    FileView () {
      if (checkImageFileType(this.fileName)) {//文件为图片
        this.$viewerApi({ images: this.imageArray })
      } else {
        if (checkDocumentFileType(this.fileName))
          this.visibleFileView = true
      }
    },
  }
};
</script>