<template>
  <van-cell
    :title="fileName"
    :label="file[fileSizeKey]|numberFormatter"
    clickable
    class="ibps-uploader-file ibps-flex-c"
  >
    <template #icon>
      <ibps-avatar
        :thumb="getFileImage(file[fileExtKey])"
        :text="file[labelKey]"
        width="34"
        height="34"
        class="ibps-uploader-file_pd"
        @click="onClick"
      />
    </template>
    <template>
      <slot
        name="right-icon"
      />
    </template>
  </van-cell>
</template>

<script>
import { allFileTypes } from '@/business/platform/file/constants/fileTypes'
import IbpsAvatar from '@/components/ibps-avatar'
export default {
  components: {
    IbpsAvatar
  },
  props: {
    file: {
      type: Object
    },
    labelKey: {
      type: String,
      default: 'fileName'
    },
    fileExtKey: {
      type: String,
      default: 'ext'
    },
    fileSizeKey: {
      type: String,
      default: 'totalBytes'
    }
  },
  computed: {
    fileName() {
      if (this.$utils.isEmpty(this.file)) { return '' }
      if (this.file[this.fileExtKey]) {
        return this.file[this.labelKey] + '.' + this.file[this.fileExtKey]
      }
      return this.file[this.labelKey]
    }
  },
  methods: {
    // 获取展示图片
    getFileImage(ext) {
      if (allFileTypes.indexOf(ext) === -1) {
        ext = 'attachment'
      }
      // 如果是图片显示图片缩略图

      return `./images/file/${ext}.png`
    },
    // 获取展示图片
    getFileIcon(ext) {
      if (allFileTypes.indexOf(ext) === -1) {
        return 'file-unknown'
      }
      return `file-${ext}`
    },
    onClick() {
      this.$emit('click')
    }
  }

}
</script>
<style lang="scss">
.ibps-uploader-file{
  .van-cell__title{
    span{
      table-layout: fixed;
      word-break: break-all;
      overflow: hidden;
    }
  }
  .ibps-uploader-file_pd{
    padding-right: 10px;
  }
  .van-cell__title{
    flex-grow: 2;
  }
}

</style>
