<script setup lang="ts"></script>

<template>
  <el-tag class="tag-content-box" type="primary">
    <div class="tag-text-content">
      <img class="check-icon" src="/image/check.svg" />
      <el-tooltip :content="$t('SP_TASK_RECOMMENDED')" trigger-keys placement="top">
        <div class="tag-text">{{ $t('SP_TASK_RECOMMENDED') }}</div>
      </el-tooltip>
    </div>
  </el-tag>
</template>
<style lang="scss">
.tag-content-box {
  padding: 0 3px !important;
  min-width: 0px !important;
}
.tag-text-content {
  display: flex !important;
  align-items: center;
  .check-icon {
    margin-right: 2px;
  }
  .tag-text {
    max-width: 88px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
