<template>
  <view class="shadow-card sticky bottom-20 px-16 py-26 bg-white rounded-15 mt-20">
    <view class="text-30 text-fore-title font-bold">得分分布</view>
    <view class="mt-20 mx-10 flex items-center bg-back rounded-10 py-30">
      <view class="flex-1 text-center">
        <view class="text-40 text-fore-title font-bold">{{ stats.maxScore}}</view>
        <view class="mt-5 text-28 text-fore-light">最高分</view>
      </view>
      <view class="flex-1 text-center">
        <view class="text-40 text-fore-title font-bold">{{ stats.averageScore }}</view>
        <view class="mt-5 text-28 text-fore-light">平均分</view>
      </view>
      <view class="flex-1 text-center">
        <view class="text-40 text-fore-title font-bold">{{ hitRate }}%</view>
        <view class="mt-5 text-28 text-fore-light">击败考生</view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { Study } from '@/types';

const props = defineProps<{
  data: Study.Examinee;
}>();
const stats = computed(() => {
  return props.data.stats || {};
});
const hitRate = computed(() => {
  return stats.value.hitRate === 100 ? 99 : stats.value.hitRate;
});
</script>
<style lang="scss" scoped></style>