<template>
  <div class="status-text" :class="getStatusClass()">
    {{ injectData.status }}
  </div>
</template>

<script>
export default {
  name: 'StatusLabel',
  props: {
    injectData: {
      type: Object,
      default: () => ({}),
      required: true
    }
  },
  methods: {
    // 将中文状态转换为英文
    getStatusText() {
      const statusMap = {
        '暂停中': 'Paused',
        '已终止': 'Terminated',
        '已终止-回收': 'Terminated-Recycled',
        '已终止-待回收': 'Terminated-PendingRecycling',
        '异常': 'Abnormal',
        '执行中': 'InProgress',
        '已完成': 'Done',
        '未完成': 'Pending'
      };
      return statusMap[this.injectData.status] || this.injectData.status;
    },
    // 判断是否为含"已终止"的状态（用于绑定样式）
    getStatusClass() {
      const chineseStatus = this.injectData.status || '';
      // 包含"已终止"的中文状态统一归类为terminated类
      if (chineseStatus.includes('已终止')) {
        return 'terminated';
      }
      // 其他状态直接返回英文类名
      return this.getStatusText();
    }
  }
};
</script>

<style scoped>
.status-text {
  font-size: 14px;
  padding: 2px 8px 2px 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* 所有含"已终止"的状态共用样式 */
.status-text.terminated::before {
  content: '';
    position: absolute;
    left: 8px;
    width: 14px;
    height: 14px;
    /* border-radius: 2px; */
    background: url('../../../../assets/img/recycle.png') no-repeat;
    background-size: cover;
  /* 已终止系列统一色块 */
}

.status-text.terminated {
  color: rgba(89, 89, 89, 1);
  /* 已终止系列统一文字色 */
}

/* 暂停中样式 */
.status-text.Paused::before {
  content: '';
  position: absolute;
  left: 8px;
  width: 14px;
  height: 14px;
  /* border-radius: 2px; */
    background: url('../../../../assets/img/recycle.png') no-repeat;
      background-size: cover;
}

.status-text.Paused {
  color: rgba(245, 154, 36, 1);
}

/* 其他状态样式 */
.status-text.Abnormal {
  color: rgba(255, 0, 0, 1);
  padding: 2px 8px;
  /* 无左侧色块 */
}

.status-text.InProgress {
  color: rgba(0, 101, 255, 1);
  padding: 2px 8px;
}

.status-text.Done {
  color: #4CAF50;
  padding: 2px 8px;
}

.status-text.Pending {
  color: #FF9800;
  padding: 2px 8px;
}
</style>
