<script setup lang="ts">
const props = defineProps<{
  rightRate: number
}>()

defineOptions({ name: 'RightRateCard' })

const colorConfig = {
  // 字体颜色 背景svg色 progerss_border progress_bg progress_active
  primary: [
    '#2D39BC',
    'linear-gradient(92deg, #83B7FE -9.21%, #90E9FA 37.09%, #90E9FA 70.16%, #83B7FE 111.05%)',
    '#2D39BC',
    '#6B73E5',
    '#90FCF7',
  ],
  success: [
    '#2F8A5B',
    'linear-gradient(259deg, #4DE798 2.31%, #A2FB6E 40.46%, #A2FB6E 69.55%, #4DE798 97.69%)',
    '#27A363',
    '#25BF6E',
    '#1FFF8A',
  ],
  error: [
    '#fff',
    'linear-gradient(92deg, #FF2231 0%, #FFA370 38.1%, #FFA570 57.4%, #FF222F 98.96%)',
    '#B22731',
    '#CB3741',
    '#FF3542',
  ],
  warning: [
    '#a13c00',
    'linear-gradient(92deg, #FED769 -9.21%, #FFEF70 37.09%, #FFEF70 70.16%, #FED769 111.05%)',
    '#C08129',
    '#CC8A33',
    '#FFFE36',
  ],
}

const progressType = computed(() => {
  if (props.rightRate >= 10000) {
    return colorConfig['success']
  } else if (props.rightRate >= 8000) {
    return colorConfig['primary']
  } else if (props.rightRate >= 6000) {
    return colorConfig['warning']
  } else {
    return colorConfig['error']
  }
})
</script>

<template>
  <div class="right-rate-card" :style="{ background: progressType[1] }">
    <div :style="{ color: progressType[0] }">正确率：{{ rightRate / 100 }}%</div>
    <div class="progress-box">
      <ProgressBar
        :rate="rightRate / 10000"
        :bg="progressType[3]"
        :border="progressType[2]"
        :activeBg="progressType[4]"
      ></ProgressBar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.right-rate-card {
  width: 460px;
  height: 13.83vh;
  border-radius: 1.67vh;
  padding: 1.33vh 24px;
  font-family: $font-special;
  font-size: 2.33vh;

  .progress-box {
    margin-top: 2.75vh;
  }
}
</style>
