<template>
  <div class="import-status">
    <lz-svg-icon icon-class="success" v-if="props.status === 'SUCCESS'" class="el-icon"></lz-svg-icon>
    <lz-svg-icon icon-class="cs" v-else-if="props.status === 'FAILED'" class="el-icon"></lz-svg-icon>
    <el-icon v-else class="loading">
      <Refresh />
    </el-icon>
    {{text}}
  </div>
</template>
<script lang="ts" setup>

import { computed } from 'vue'

const props = withDefaults(defineProps<{ status: 'IMPORTING' | 'PROCESSING' | 'TAGGING' | 'SUCCESS' | 'FAILED' }>(), {})


const text = computed(() => {
  switch (props.status) {
    case 'IMPORTING':
      return '导入中'
    case 'PROCESSING':
      return '处理中'
    case 'TAGGING':
      return '打标签中'
    case 'SUCCESS':
      return '导入成功'
    case 'FAILED':
      return '导入失败'
  }
})
</script>
<style lang="scss" scoped>
.import-status {
  display: flex;
  align-items: center;
  .el-icon {
    margin-right: 4px;

  }
  .loading {
    animation: spin 1s linear infinite;
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }
}
</style>
