<template>
  <div class="word-uploader">
    <div class="el-upload">
      <img v-if="value.uuid" :src="value.url" class="imageicon" @click="handleOpenViewer">
      <div v-else :class="imageIcon" class="imageicon" />
      <div v-if="value.uuid" class="file-name">{{ value.name }}</div>
      <div v-else class="el-upload__tip">{{ tip }}</div>
    </div>
    <image-viewer v-if="showViewer" :z-index="2000" :initial-index="0" :on-close="handleCloseViewer" :url-list="previewList" />
  </div>
</template>

<script>
import ImageViewer from '@/components/Uploader/image-viewer'
import './uploadFile.scss'

export default {
  name: 'PreviewFile',
  components: { ImageViewer },
  props: {
    // 双向绑定的值
    value: {
      type: Object,
      default: () => ({})
    },
    // 上传文件类型 picture: 图片 word: word文档
    type: {
      type: String,
      default: 'picture'
    },
    // 上传水平照片还是垂直
    vertical: {
      type: Boolean,
      default: false
    },
    tip: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showViewer: false
    }
  },
  computed: {
    /**
     * 兜底展位图
     */
    placeholderImage() {
      // 如果当前是word
      if (this.type === 'word') {
        return require('@/assets/components/upload/ico_word.png')
      }
      // 如果当前是照片则判断横竖
      if (this.type === 'picture') {
        return this.vertical ? require('@/assets/components/upload/ico_pic_v.png') : require('@/assets/components/upload/ico_pic_h.png')
      }
      return ''
    },

    /**
     * 图片icon的class类名
     */
    imageIcon() {
      // 如果当前是word
      if (this.type === 'word') {
        return 'icon-word'
      }
      if (this.type === 'picture') {
        return this.vertical ? 'icon-pic-v' : 'icon-pic-h'
      }
    },

    /**
     * 预览列表
     */
    previewList() {
      return [this.value.url]
    }
  },
  methods: {
    /**
     * 打开viewer，预览图片
     */
    handleOpenViewer() {
      // 如果是图片，则开始预览
      if (this.type === 'picture') {
        this.showViewer = true
      } else {
        window.location.href = this.value.fileUrl
      }
    },

    /**
     * 关闭预览图片
     */
    handleCloseViewer() {
      this.showViewer = false
    }
  }
}
</script>
