<template>
  <div class="material-file" :style="customStyle">
    <el-image v-if="fileInfo.type === 'image'" class="size-full" :src="props.url" fit="contain" />
    <div v-else-if="fileInfo.type === 'video'" class="size-full">
      <video class="size-full bg-black" :src="props.url" />
      <div class="video-play">
        <el-icon :size="24"><VideoPlay /></el-icon>
      </div>
    </div>
    <div v-else class="material-file__type">
      <el-icon color="var(--el-color-primary)" :size="20" v-if="!fileInfo.name">
        <Document />
      </el-icon>
      <template v-if="extractNumber(props.fileSize) >= 60">
        <div class="file-type" v-if="fileInfo.extension">{{ fileInfo.extension }}</div>
        <div class="file-name" v-if="fileInfo.name">{{ fileInfo.name }}</div>
      </template>
    </div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { addUnit, extractNumber, getFileType } from '@/utils/util'
import settings from '@/settings'

// 组件属性
const props = withDefaults(
  defineProps<{
    url: string
    name?: string
    fileSize?: string | number
  }>(),
  {
    fileSize: 100
  }
)
// 内容样式
const customStyle = computed(() => {
  return {
    width: addUnit(props.fileSize),
    height: addUnit(props.fileSize)
  }
})
// 获取文件信息
const fileInfo = computed(() => {
  const result = {
    type: '',
    name: props.name || '',
    extension: getFileType(props.url).toLowerCase()
  }
  if (settings.imageType.includes(`.${result.extension}`)) {
    result.type = 'image'
  } else if (settings.videoType.includes(`.${result.extension}`)) {
    result.type = 'video'
  }
  if (extractNumber(props.fileSize) < 80) result.name = ''
  return result
})
</script>

<style lang="scss" scoped>
.material-file {
  @apply rounded relative overflow-hidden bg-br-extra-light;

  .video-play {
    @apply absolute inset-0 flex items-center justify-center;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
  }

  &__type {
    @apply size-full border border-br rounded bg-primary-light-9;
    @apply flex flex-col items-center justify-center gap-1.5 text-center;
    padding: 2% 10%;

    .file-type {
      @apply w-full text-lg font-medium leading-none text-primary truncate uppercase;
    }

    .file-name {
      @apply text-xs leading-tight text-info;
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
