<template>
  <div class="view-other">
    <el-image :src="viewOffImage" class="view-off-icon">
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
    <p>
      {{ file.name }}.{{ file.type
      }}<span class="size-item">{{ getFileSize }}</span>
    </p>
    <p>
      <big><strong>该类型文件不支持在线预览，请下载后查看。</strong></big>
    </p>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import commJs from "@/comm_js/index"
import viewOffImage from "../../assets/view_off.svg"

const props = defineProps({
  file: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

const getFileSize = computed(() => {
  return commJs.fileSizeFormat(props.file.size, "KB")
})
</script>

<style lang="less" scoped>
.view-other {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  .size-item {
    margin-left: 10px;
  }
}
</style>
