<template>
  <view class="summary-view">
    <qy-up-down-flat v-for="(item, index) in studySummary" :key="index" :data="item" />
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { minToHour } from '@/utils';
import { UpDownFlatState, UpDownFlatType } from '@/components/up-down-flat/index';

const props = withDefaults(
  defineProps<{
    report: any;
  }>(),
  {
    report: {},
  },
);

const studySummary = computed(() => {
  const studyVideoState = [UpDownFlatState.FLAT, UpDownFlatState.UP, UpDownFlatState.DOWN];
  const exercisesState = [UpDownFlatState.FLAT, UpDownFlatState.UP, UpDownFlatState.DOWN];
  const correctnessState = [UpDownFlatState.FLAT, UpDownFlatState.UP, UpDownFlatState.DOWN];

  return [
    {
      title: '已学视频',
      type: UpDownFlatType.NORMAL,
      value: [props.report.studyVideoCount],
      unit: '个',
      state: studyVideoState[props.report.studyVideoCountCompare],
    },
    {
      title: '练习题数',
      type: UpDownFlatType.NORMAL,
      value: [props.report.exercisesCount],
      unit: '道',
      state: exercisesState[props.report.exercisesCountCompare],
    },
    {
      title: '答题正确率',
      type: UpDownFlatType.NORMAL,
      value: [`${props.report.correctness}%`],
      state:
        props.report.correctnessCompare === -1
          ? UpDownFlatState.DOWN
          : correctnessState[props.report.correctnessCompare],
    },
    {
      title: '实际督学时长',
      type: UpDownFlatType.TIME,
      value: minToHour(props.report.inspectorTimeMinute),
    },
  ];
});
</script>

<style scoped lang="scss">
.summary-view {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  &-item {
    width: 305rpx;
    height: 155rpx;
    border-radius: 20rpx;
    background: #f7faff;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 20rpx;

    &-title {
      display: grid;
      place-content: center;
      height: 76rpx;
      background-color: #ebf2ff;
      color: #333;
      font-size: 26rpx;
      font-style: normal;
      font-weight: 500;
    }

    &-content {
      display: flex;
      gap: 10rpx;
      height: 79rpx;
      align-items: center;
      place-content: center;

      .normal-text {
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
      }

      .value-text {
        font-size: 28rpx;
        font-style: normal;
        font-weight: 500;
      }

      .up-icon {
        width: 26rpx;
        height: 26rpx;
        background: url('~@/static/svg/up.svg') no-repeat;
        background-size: 100% 100%;
      }

      .up-color {
        color: #3fd15f;
      }

      .down-icon {
        width: 26rpx;
        height: 26rpx;
        background: url('~@/static/svg/decline.svg') no-repeat;
        background-size: 100% 100%;
      }

      .down-color {
        color: #ff2828;
      }

      .flat-icon {
        width: 26rpx;
        height: 26rpx;
        background: url('~@/static/svg/flat.svg') no-repeat;
        background-size: 100% 100%;
      }

      .flat-color {
        color: #ff8d5f;
      }
    }
  }
}
</style>
