<!--
 * @description: 
 -->
<template>
  <div class="question-done">
    <view id="top_Echart" class="top_Echart"></view>

    <div class="question-result">
      <div class="question-result-item">
        测试得分
        <span class="result"> {{ questResult.erScore }}</span>
      </div>
      <div class="question-result-item">
        用时
        <span class="result"> {{ questResult.erExamTime }}</span>
      </div>
      <div class="question-result-item">
        错问题数
        <span class="result"> {{ questResult.erIncorrectCount }}</span>
      </div>
      <div class="question-result-item">
        正确率
        <span class="result"> {{ questResult.erCorrect }}%</span>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "QuestionDone",
  props: {
    doneData: {

    }
  },
  data() {
    return {
      questResult: {},
      echart: null,
      chartOption: {
        
      },
    }
  },
  mounted() {
    // this.initEcharts();
  },
  methods: {
    // 初始化图表
    initEcharts() {
      this.echart = echarts.init(document.getElementById('top_Echart'));
      this.echart.setOption(this.chartOption);
    },

    initDone(data) {
      this.questResult = data;
      const totalSeconds = data.erExamTime;
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
this.questResult.erExamTime = formattedTime;
      if (data) {
        const correct = data.erBingoCount;
        const incorrect = data.erIncorrectCount;
        const blank = data.erNotFilledCount;
        // const total = correct + incorrect + blank;
        console.log(correct)
                console.log(incorrect)

                        console.log(blank)

        //                         console.log(total)
        console.log("data========",data)

        const rate = data.erRate

        this.chartOption = {
          legend: {
            top: 'center',
            right: '30rpx',
            orient: 'vertical',
          },
          series: [
            {
              type: 'pie',
              radius: ['60%', '80%'],
              center: ['30%', '50%'],
              avoidLabelOverlap: false,
              label: {
                position: 'center',
                formatter: `{pie|${rate}%}\n{text|正确率}`,
                rich: {
                  pie: {
                    color: '#222',
                    fontSize: 24,
                    fontWeight: 'bold'
                  },
                  text: {
                    color: '#333',
                    fontSize: 12,
                  }
                }
              },
              data: [
                { value: correct, name: '正确', itemStyle: { color: '#4EA61A' } },
                { value: incorrect, name: '错误', itemStyle: { color: '#EA4949' } },
                { value: blank, name: '未答', itemStyle: { color: '#E4E4E4' } },
              ]
            }
          ],
        },




          this.initEcharts()

      }
    }
  }
}
</script>

<style lang="scss" scoped>
.question-done {
  padding: 96rpx 48rpx;
  background: #FFFFFF;
  box-shadow: 0 8rpx 32rpx 0 rgba(0, 0, 0, 0.1);
  border-radius: 32rpx;

  .top_Echart {
    width: 100%;
    height: 300rpx;
  }

  .question-result {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 36rpx 48rpx 28rpx;
    background: #F1F7FE;
    border-radius: 24rpx;
    font-size: 24rpx;
    color: #666666;
    line-height: 28rpx;

    .question-result-item {
      display: flex;
      flex-flow: column;
      align-items: center;

      .result {
        margin-top: 16rpx;
        font-size: 40rpx;
        color: #3D3D3D;
        line-height: 48rpx;
      }
    }
  }
}
</style>