<template>
  <uni-popup ref="popupRef" background-color="#fff" :animation="false" :is-mask-click="false" :mask-click="false">
    <view class="exam-score-popup">
      <customNavbarVue class="exam-score-navBar-box" title="考试得分"></customNavbarVue>
      <view class="score-content-box">
        <view class="score-content-name">{{data[nameKey]}}</view>
        <view class="content-score-box">
          <view>
            <view class="score-content-text">正确数量：{{data.rightCount}}</view>
            <view class="score-content-text">试题总数：{{data.shitiTotal}}</view>
            <view class="score-content-text">及格分数：{{data.okScore}}</view>
            <view class="score-content-text">{{labelName}}：{{data.ksScore}}</view>
          </view>
          <view class="score-content-text"><text>{{data.userScore}}</text>分</view>
        </view>
      </view>

      <view class="progress-text-btn-box">
        <text class="progress-text">正确率</text>
        <c-progress-circle :progress='data.userAccuracy/100' color='#0856e6' size='280rpx'
                           boderWidth="280rpx" class="progress-circle-box"></c-progress-circle>
        <view class="score-dialog-btn" @click="handleCheckSj">查看成绩</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import customNavbarVue from "@/components/custom-navbar/custom-navbar.vue";
import {
  ref,
  reactive
} from "vue";
const popupRef = ref(null)
const data = reactive({
  ksName: '',
  lxName: '',
  ksScore: '',
  okScore: '',
  rightCount: '',
  shitiTotal: '',
  userScore: '',
})

defineProps({
  title: {
    type: String,
    default: '考试得分'
  },
  labelName: {
    type: String,
    default: '考试总分'
  },
  nameKey: {
    type: String,
    default: 'ksName'
  }
})

const emits = defineEmits(['confirm', 'close'])

function handleClose() {
  emits('close');
  popupRef.value.close()
}

function handleCheckSj() {
  emits('confirm', data);
  popupRef.value.close()
}

function showDialog(options) {
  data.ksName = options.ksName;
  data.lxName = options.lxName;
  data.ksScore = options.ksScore;
  data.okScore = options.okScore;
  data.rightCount = options.rightCount;
  data.shitiTotal = options.shitiTotal;
  data.userScore = options.userScore;
  data.userAccuracy = options.userAccuracy;
  popupRef.value.open()
}

defineExpose({
  showDialog
})
</script>

<style lang="scss">
.content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20rpx;
  font-size: 28rpx;
}
.btnBox{
  width: 100%;
  display: flex;
  align-items: center;
  margin-top:30rpx;
}
</style>