<template>
  <div class="file_view">
    <a-tag :color="enums.fileColor[getFileExtension(fileName).toLowerCase()]" class="file_name" :title=" fileName">{{ fileName }}</a-tag>
    <a-button v-show="isOpen" shape="circle" size="small" icon="search" @click="FileView()" class="btn" />
    <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>
    <a class="ant-dropdown-link dlw" style="margin-left:6px" :href="fileUrl" :download="fileName">
      <a-icon type="download" />
    </a>
  </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_view {
  position: relative;
  .file_name {
    max-width: calc(100% - 55px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
  }
  .btn {
    position: absolute;
    right: 26px;
  }
  .dlw {
    position: absolute;
    right: 10px;
  }
}
</style>