<template>
    <div class="score" :class="{'single': value?.length === 1, 'horizontal': horizontal}" v-if="targets?.length">
      <span class="score-value">
        <template v-if="value">
          <span v-for="val in value">
            <strong class="green" v-if="Number(val.value) >= 60">{{ val.code }}: {{ val.value }}</strong>
            <strong class="red" v-else>{{ val.code }}: {{ val.value }}</strong>
          </span>
        </template>
        <template v-else-if="failed">
          <span class="emoji"><i class="fa-regular fa-face-frown"></i></span>
          <span><small>打分失败</small></span>
        </template>
        <template v-else>
          <span class="emoji">
            <van-loading type="spinner" size="12" color="#555"/>
          </span>
          <span>打分中...</span>
        </template>
        <van-icon v-if="!!icon" size="14" :name="icon" color="#999999"/>
      </span>
      <span class="score-icons" v-if="!simple">
        <i class="fa-solid fa-robot"></i>
        <van-popover v-model:show="showPopover">
          <div class="score-info">智能打分为实验功能，分数值仅供参考。A代表精准度，R代表完成度</div>
          <template #reference>
            <i class="fa-solid fa-info-circle"></i>
          </template>
        </van-popover>
      </span>
    </div>
    <i class="text-gray" v-else>没有打分</i>
</template>
<script lang="ts">
import {defineComponent, computed} from 'vue'
import {Popover, Loading, Icon} from 'vant';
import {Score, TaskFrom, TaskStatuses, TaskTypes} from '~/types';

export default defineComponent({
    name: "score-show",
    components: {
        [Popover.name]: Popover,
        [Loading.name]: Loading,
        [Icon.name]: Icon
    },
    props: {
        horizontal: {
            type: Boolean,
            default: false
        },
        simple: {
            type: Boolean, default: false
        },
        target: {type: String},
        icon: {type: String},
        scores: Array<Score>
    },
    data() {
        return {showPopover: false}
    },
    computed: {
        value() {
            let score = this.targets?.find(s => !!s.multi_scores?.vals?.length);
            if (score) {
                let {vals} = score.multi_scores;
                return vals.map(v => ({
                    code: v.score_type.substring(0, 1).toUpperCase(),
                    value: Number(v.score_val).toFixed(1)
                }))
            }
        },
        targets() {
            return this.scores?.filter(s => {
                if (this.target) {
                    let compare_url = s.meta?.meta?.compare_url?.trim();
                    return compare_url === this.target.trim() || compare_url === this.target.trim().replace("_compressed", "")
                }
                return true;
            })
        },
        failed() {
            return this.targets?.length && this.targets?.every(s => s.tasks?.vals.filter(t => t.task_from === TaskFrom.TaskServer && t.task_type === TaskTypes.AI_SCORE).every(t => t.task_status === TaskStatuses.FAILED))
        }
    }
})


</script>
<style scoped lang="less">
.score {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  &.single {
    flex-direction: column;

    .score-icons {
      flex-direction: row;
      margin-left: 0;
      width: 100%;
    }
  }

  &.horizontal {
    .score-value, .score-icons {
      flex-direction: row;

      strong, i {
        margin-left: 5px;
      }
    }
  }

  .score-value {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.24rem;

    .green {
      color: var(--van-tag-success-color);
    }

    .red {
      color: var(--van-danger-color);
    }

    .emoji {
      margin-right: 3px;
    }
  }

  .score-icons {
    margin-left: 3px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: #3788d8;

    :deep(.van-popover__wrapper) {
      line-height: normal;;
    }
  }
}

.score-info {
  font-size: 0.24rem;
  padding: 0.24rem;
  color: var(--van-gray-6);
}
</style>
