<template>
  <div class="params-analysis-tooltip">
    <div class="row">
      <div class="label">分析值</div>
      ：
      <div class="showVal">{{ row.targetValue || '--' }}</div>
    </div>
    <div class="row">
      <div class="label">所属项目</div>
      ：
      <div class="showVal">{{ row.projectName || '--' }}</div>
    </div>
    <div class="row">
      <div class="label">所属节点</div>
      ：
      <div class="showVal">{{ row.phaseName || '--' }}</div>
    </div>
    <div class="row">
      <div class="label">所属学科</div>
      ：
      <div class="showVal">{{ row.disciplineName || '--' }}</div>
    </div>
    <div class="row">
      <div class="label">所属分析项</div>
      ：
      <div class="showVal">{{ row.taskName || '--' }}</div>
    </div>
    <div class="row">
      <div class="label">达标方式</div>
      ：
      <!-- COMPLIANCE_METHOD -->
      <div class="showVal">{{ row.method || '--' }}</div>
    </div>
    <div class="row">
      <div class="label">目标值</div>
      ：
      <div class="showVal">{{ row.highValue || '--' }}</div>
    </div>
    <div class="row">
      <div class="label">单位</div>
      ：
      <div class="showVal">{{ PERFORMANCE_UNIT.O[row.unit] || '--' }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useDict } from '@/utils/useDict';

const { PERFORMANCE_UNIT } = useDict('PERFORMANCE_UNIT');

defineProps({
  row: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
</script>

<style lang="scss" scoped>
.params-analysis-tooltip {
  background-color: var(--el-bg-color);
  border-radius: 4px;
  padding: 10px 16px;
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    line-height: 14px;
    color: var(--el-text-color-regular);
    // 通过伪元素在前面增加一个icon
    &::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--el-color-primary);
      margin-right: 8px;
    }
    .label {
      width: 5em;
      font-weight: 600;
      text-align-last: justify;
    }
    .showVal {
      margin-left: 8px;
      flex: 1;
    }
  }
}
</style>
