<template>
  <div class="file_doc_v">
    <div>
      <a class="ant-dropdown-link dlw" style="width: calc(100% - 4px);margin-left:6px;display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :href="fileUrl" :download="fileName">
        <a-tag :color="enums.fileColor[getFileExtension(fileName).toLowerCase()]" class="file_name" :title=" fileName" style="cursor: pointer;">{{ fileName }}</a-tag>
      </a>
    </div>
    <a-button v-show="isOpen" shape="circle" size="small" icon="search" @click="FileView()" class="btn" style="margin: 0 2px;" />
    <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>
<style scoped lang="less">
.file_doc_v {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  > div:nth-child(1) {
    max-width: calc(100% - 20px);
  }
  .ant-tag-blue {
    background: none !important;
  }
  .ant-tag {
    display: inline !important;
    border:0 !important;
    font-size: 14px;
  }
}
</style>