<template>
  <li class="file-item" :class="{ 'is-error': file.status === 'fail' }">
    <el-icon :class="{ 'is-loading': file.status === 'uploading' }"><component :is="statusIcon" /></el-icon>
    <span class="file-item-name">{{ file.name }}</span>
    <el-icon v-if="!disabled" @click="onDelete" size="16" class="close"><Close /></el-icon>
  </li>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { type UploadUserFile } from 'element-plus'

const props = withDefaults(
  defineProps<{
    file: UploadUserFile
    disabled?: boolean
  }>(),
  {
    disabled: true
  }
)
// 取消文件上传
const emits = defineEmits<{
  (e: 'on-abort', value: UploadUserFile): void
}>()
const statusIcon = computed(() => {
  if (props.file.status === 'ready' || props.file.status === 'uploading') {
    return 'Loading'
  } else if (props.file.status === 'fail') {
    return 'Warning'
  } else {
    return 'Document'
  }
})
function onDelete() {
  emits('on-abort', props.file)
}
</script>
<style lang="less" scoped>
.file-item {
  height: 30px;
  line-height: 30px;
  font-size: var(--font-size-s);
  padding: 0 var(--cacp-padding-space-s);
  display: flex;
  align-items: center;
  &:hover {
    background-color: var(--el-fill-color-light);
  }
  &.is-error {
    background-color: var(--el-color-error-light-9);
    .file-item-name {
      color: var(--el-color-error);
    }
  }
}
.file-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 var(--cacp-margin-space-s);
}
.close {
  cursor: pointer;
  &:hover {
    color: var(--el-color-primary);
  }
}
// .file-item
</style>
