<template>
    <view class="content">
        <u-navbar
            back-icon-color="#FFFFFF"
            :background="background"
            title-color="#fff"
            :border-bottom="false"
        ></u-navbar>
        <view class="title">考试结果</view>
        <view class="test">
            <view class="result"> 
                <view class="circle">{{ score }}</view>
            </view>
            <view class="test-explain">
                <view class="text1">
                    您已成功通过本次考试
                </view>
                <view class="text2">
                    通过本科目后，可进行其他科目考试
                </view>
            </view>
            <view class="btn">
                <button class="btnStyle btn2" @click="toIndex()">我知道了</button>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            text: "",
            examId: null,
            result: null,
            is_pass: false,
            score: 0,
            userExamId: null,
        };
    },
    onLoad(a) {
		getApp().trackPage('学习考试成功页')
        this.examId = a.examId;
        this.userExamId = a.userExamId;
        this.getCourseResult();
    },
    onUnload() {
        this.toIndex()
    },
    methods: {
        //考试结果
        getCourseResult: function () {
            this.$u.api
                .getExamResult(this.examId)
                .then((res) => {
                    if (res.code != 200) {
                        uni.showToast({
                            icon: "none",
                            title: "获取考试结果失败",
                        });
                    }
                    this.result = res.data;
                    this.text = res.data.examLevelResult;
                    this.score = this.result.examScore;
                })
                .catch((err) => {
                    uni.hideLoading();
                    uni.showToast({
                        icon: "none",
                        title: "获取考试信息失败",
                    });
                });
        },
        //下次再考跳转到学习主界面页面
        toIndex: function () {
            uni.switchTab({
                url: '/pages/index/learn'
            });
        },
    },
};
</script>

<style lang="scss">
.test {
    margin: 0 30rpx;
    overflow: hidden;
    border-radius: 12rpx;
    padding-bottom: 60rpx;
    // background-image: url(../../static/photo/examination.png);
    background-repeat: no-repeat;
    background-size: 66%;
    background-color: #fff;
    background-position: right bottom;
    min-height: 800rpx;
}

.content {
    width: 750rpx;
    height: 100vh;
    overflow: auto;
    background-color: #f4f5f7;
    background-image: linear-gradient(to top, #f4f5f7 0%, #2272ff 50%);
    background-size: 750rpx 600rpx;
    background-repeat: no-repeat;

    .title {
        padding: 30rpx 30rpx 46rpx;
        line-height: 40rpx;
        font-size: 40rpx;
        color: #fff;
        font-weight: bold;
    }
    
    .result {
        width: 320rpx;
        height: 320rpx;
        margin-top: 80rpx;
        margin-left: 186rpx;
        // color: red;
        // font-size: 66rpx;
        // text-align: center;
        // // border: 
        // border-bottom: 1px dashed #000000;
        // margin: 74rpx 0;
        // padding: 66rpx;
        
        background-image: linear-gradient(#47ABFF, #2272FF) ;
        border-radius:50%;
        text-align:center;
        padding:10rpx;
        font-size:28rpx;
        box-sizing:border-box;
    }
    
    .result .circle{
          width:100%;
          height:100%;
          background:#fff;
          border-radius:50%;
          font-size: 120rpx;
          
          color: #2272FF;
          text-align: center;
          padding-top: 20%;
    }
    
    .test-explain {
        margin-top: 80rpx;
        margin-left: 84rpx;
        margin-right: 84rpx;
        text-align: center;
        .text1 {
            font-size: 40rpx;
            font-weight: bold;
            color: #2272FF;
        }
        .text2 {
            font-size: 24rpx;
            color: #666666;
            margin-top: 30rpx;
        }
    }
    .btn {
        margin-top: 100rpx;
        display: flex;
        font-size: 32rpx;
        font-weight: bold;
        .btnStyle {
            width: 600rpx;
            height: 104rpx;
            background-color: #ffffff;
            color: #2272FF;
            line-height: 90rpx;
            margin: 20rpx auto;
            border: 2rpx solid #2272FF;
            border-radius: 52rpx;
        }
        .btn2 {
            background-color: #2272FF;
            color: #ffffff;
        }
    }
}
</style>
