<template>
  <view>
    <van-nav-bar fixed :border="false">
      <template #left>
        <van-icon
          name="arrow-left"
          style="font-size: 32rpx; color: #111"
          @click="back"
        />
      </template>
      <template #title>
        <view
          style="
            font-size: 32rpx;
            color: #111;
            font-family: PingFang SC;
            font-weight: 800;
          "
          >考试成绩</view
        >
      </template>
    </van-nav-bar>
    <view class="examScoreMain">
      <view class="exam_Progress">
        <!-- <van-circle
          :value="dataList.TotalScore"
          :rate="dataList.Publish.ExamScore"
          :speed="100"
          :size="200"
          color="#ffffff"
          layer-color="#0097db"
          :stroke-width="5"
        >
          <template>
            <view class="score">{{ dataList.TotalScore }}</view>
          </template>
        </van-circle> -->
        <image
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/Dashboard.png"
          style="width: 180px; position: absolute; top: 20px; left: 20px"
          mode="widthFix"
          class="canvasBg"
        />
        <canvas
          style="width: 200px; height: 200px"
          canvas-id="firstCanvas"
          id="firstCanvas"
        ></canvas>
      </view>
      <view>
        <img
          style="width: 100%; height: 644rpx"
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/examTop.png"
          alt=""
        />
      </view>
    </view>
    <view class="exam_Bottom">
      <view class="exam_View" @click="jumpPage">
        <img
          style="width: 40rpx; height: 42rpx; margin-right: 20rpx"
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/exam_Edit.png"
          alt=""
        />
        回顾试卷
      </view>
      <view class="exam_Pingyu">
        <view class="teacher_Say">老师评语</view>
        <view class="teacher_Inner" v-if="dataList.StuComment">
          {{ dataList.StuComment }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
} from "vue";
import { getPaperDetail } from "../../api/exam";
export default {
  props: {},
  setup(props, ctx) {
    let data = reactive({
      value: 50,
      Exam_Student_Id: 0,
      msg: {
        GuestId: 0,
        PaperId: 0,
        PublishId: 0,
        isShowAnswer: true,
      },
      dataList: {},
    });
    let methods = {
      //返回首页
      back() {
        uni.navigateBack();
      },
      async getPaperDetail() {
        let res = await getPaperDetail(data.msg);
        if (res) {
          if (res.Code == 1) {
            data.dataList = res.Data;
            let Remark = "";
            if (res.Data.TotalScore > 0 && res.Data.TotalScore <= 60) {
              Remark = "要加油哦";
            }
            if (res.Data.TotalScore > 60 && res.Data.TotalScore <= 90) {
              Remark = "不错哦";
            }
            if (res.Data.TotalScore > 90) {
              Remark = "你好棒";
            }
            that.initCanvas(
              res.Data.TotalScore,
              Remark,
              res.Data.Publish.ExamScore
            );
          }
        }
      },
      jumpPage() {
        uni.navigateTo({
          url:
            "/pages/exam/examPaper?showScore=true" +
            "&&PaperId=" +
            data.msg.PaperId +
            "&&Id=" +
            data.msg.PublishId +
            "&&GuestId=" +
            data.msg.GuestId +
            "&&Exam_Student_Id=" +
            data.Exam_Student_Id +
            "&&ExamStatus=" +
            data.dataList.ExamStatus,
        });
      },
      initCanvas(score, comment, tatalScore) {
        let end = (score / tatalScore) * (2.25 - 0.75) + 0.75;
        let ctx = uni.createCanvasContext("firstCanvas");
        ctx.beginPath();
        console.log(end);
        ctx.arc(110, 110, 86, 0.75 * Math.PI, end * Math.PI);
        ctx.lineWidth = 7;
        ctx.lineCap = "round";
        ctx.textAlign = "center";
        ctx.strokeStyle = "#fff";
        ctx.font = "50px bold  Arial";
        ctx.fillStyle = "#fff";
        ctx.fillText(score, 110, 110);
        ctx.font = "20px Arial";
        ctx.fillStyle = "#FFF";
        ctx.fillText(comment, 110, 150);
        ctx.stroke();
        ctx.draw();
      },
    };
    let that = methods;
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onLoad(options) {
    if (options.GuestId) {
      this.msg.GuestId = options.GuestId;
    }
    if (options.PaperId) {
      this.msg.PaperId = options.PaperId;
    }
    if (options.Id) {
      this.msg.PublishId = options.Id;
    }
    if (options.Exam_Student_Id) {
      this.Exam_Student_Id = options.Exam_Student_Id;
    }
    this.getPaperDetail();
    // this.initCanvas(100, "再接再厉", 100);
  },
};
</script>

<style scoped>
.examScoreMain {
  position: relative;
}
.exam_Progress {
  position: absolute;
  top: 200rpx;
  left: 50%;
  transform: translateX(-50%);
}
.exam_Bottom {
  padding: 30rpx;
}
.exam_View {
  width: 100%;
  height: 100rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #111111;
  font-size: 26rpx;
  font-weight: bold;
  box-shadow: 0px 5px 25px 0px rgba(218, 220, 230, 0.85);
}
.exam_Pingyu {
  padding: 30rpx;
  /* height: 490rpx; */
  border-radius: 20rpx;
  background-color: #fff;
  margin-top: 30rpx;
  box-shadow: 0px 5px 25px 0px rgba(218, 220, 230, 0.85);
  overflow-y: auto;
}
.teacher_Say {
  font-size: 32rpx;
  color: #0f1b35;
  font-weight: bold;
}
.teacher_Inner {
  color: #0f1b35;
  font-size: 26rpx;
  margin-top: 24rpx;
  line-height: 45rpx;
  height: 350rpx;
  overflow-y: scroll;
  font-family: PingFang SC;
}
/deep/.van-nav-bar {
  background-color: transparent;
}
/deep/.van-icon-arrow-left {
  font-size: 32rpx;
}
.score {
  font-size: 100rpx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #ffffff;
}
</style>
