<template>
  <div class="education-training">
    <div class="title">
      <span class="line"></span>
      <span class="text">安全教育培训</span>
    </div>
    <div class="education-training__content">
      <div class="content-item" v-for="item in educationTrainingContent" :key="item.name">
        <span class="name">{{ item.name }}</span>
        <span class="value">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { getEducationTraining } from '@/api/institute-safety';

  interface EducationTrainingContent {
    name: string;
    value: number;
  }

  const educationTrainingContent = ref<EducationTrainingContent[]>([]);

  onMounted(() => {
    getEducationTraining().then((res) => {
      educationTrainingContent.value = [
        { name: '安全知识培训(次)', value: res.trainingCount },
        { name: '参加人总计(人)', value: res.participateNum },
      ];
    });
  });
</script>

<style scoped lang="scss">
  .title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;

    .line {
      width: 3px;
      height: 16px;
      background: #1777ff;
    }

    .text {
      font-weight: 500;
      font-size: 16px;
      color: #000000;
      line-height: 22px;
    }
  }

  .education-training__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    .content-item {
      width: 150px;
      height: 72px;
      background: linear-gradient(180deg, #eaefff 0%, #ffffff 100%);
      border-radius: 4px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 2px;

      .name {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 20px;
      }

      .value {
        font-family: DINAlternate;
        font-weight: 600;
        font-size: 22px;
        color: #333333;
        line-height: 26px;
      }
    }
  }
</style>
