<template>
    <view class="complete">
        <view class="complete-con">
            <view class="complete-con-tit">
                {{title}}
                <view class="complete-con-card" @click="viewCard" v-if="type == 0 || type == 2 || type == 99 ">答题卡</view>
            </view>
            <view class="complete-con-progress">
                <l-circle v-model:current="score" :percent="score">
                    <text>{{score}}分</text>
                </l-circle>
            </view>
            <view class="complete-con-section">
                <view class="sec">
                    <image :src="staticUrl('/static/complete-01.png')"></image>
                    <view class="txt">
                        正确率
                        <text>{{score}}%</text>
                    </view>
                </view>
                <view class="sec">
                    <image :src="staticUrl('/static/complete-02.png')"></image>
                    <view class="txt">
                        完成时间
                        <text>{{use_time?use_time:'00:00:00'}}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="complete-btns">
            <view class="btn btn-1">
                <image :src="staticUrl('/static/complete-03.png')"></image>
                分享给朋友
                <button open-type="share"></button>
            </view>
            <view class="btn btn-2" @click="openPage()">
                <image :src="staticUrl('/static/complete-04.png')"></image>
                继续刷题
            </view>
        </view>
        <pop-card :showPop="showCard" :successNum="correct_num" :errorNum="error_num" :list="cardList" @selItem="selCardItem" @close="showCard = false"></pop-card>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                modelVale: 20,
                score: 0,
                error_num: 0,
                times: 10 * 1000,
                use_time: "",
                title: "'",
                img: "",
                showCard: false,
                correct_num: 0,
                list: [],
                cardList:[],
                type: null,
                logId: null,
            }
        },
        onLoad(o) {
            this.img = uni.getStorageSync("shareImg1");
            this.score = o.score;
            this.error_num = o.error_num;
            this.correct_num = o.correct_num;
            this.use_time = decodeURIComponent(o.use_time);
            this.title = uni.getStorageSync("categoryTitle")
            this.type = o.type
            this.logId = o.logId
            console.log(this.title)
            if(this.type == 0 || this.type == 2 || this.type == 99) {
                this.questionLogInfo()
            }
        },
        mounted() {
            // this.$refs.down.start();
        },
        methods: {
            openPage() {
                uni.switchTab({
                    url: "/pages/question/index"
                })
            },
            viewCard() {
                this.showCard = true
            },
            selCardItem(index) {
              this.showCard = false
              uni.navigateTo({
                url: "/pages/exercises/answerCard/answerCard?index="+index + "&error_num="+this.error_num +"&correct_num="+ this.correct_num,
                
              })  
            },
            async questionLogInfo() {
                uni.showLoading({
                	title: "加载中"
                })
                const { code, data, msg } = await this.$api.questionLogInfo({
                	log_id: this.logId?this.logId:0
                })
                if (code == 200) {
                   uni.hideLoading(); 
                   this.cardList = data
                   uni.setStorageSync("cardList", JSON.stringify(data))
                }else{
                	uni.hideLoading();
                	uni.showToast({
                		icon: "none",
                		title: msg
                	})
                }
            }
        },
        /**
         * 分享当前页面
         */
        onShareAppMessage() {
            return {
                title: this.title,
                imageUrl: this.img,
                path: "/pages/question/index"
            }
        },

        /**
         * 分享到朋友圈
         * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
         * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
         */
        onShareTimeline() {
            return {
                title: this.title,
                imageUrl: this.img,
                path: "/pages/question/index"
            }
        }
    }
</script>

<style lang="scss" scoped>
    .complete {
        width: 100%;
        min-height: calc(100vh - 44px);
        background-color: #f6f6f6;
        padding: 0 25rpx 25rpx;
        overflow: hidden;
        box-sizing: border-box;

        &-con {
            padding: 40rpx 20rpx;
            overflow: hidden;
            border-radius: 20rpx;
            margin-top: 20rpx;
            background-color: #fff;

            &-tit {
                position: relative;
                height: 60rpx;
                line-height: 60rpx;
                font-size: 34rpx;
                color: #222222;
                text-align: center;
            }

            &-card {
                position: absolute;
                top: 0;
                right: 0;
                padding: 6rpx 30rpx;
                font-size: 28rpx;
                line-height: 57rpx;
                color: #FFFFFF;
                text-align: center;
                background: linear-gradient(-90deg, #3399EA, #38BCFF);
                border-radius: 29rpx;
            }

            &-progress {
                display: flex;
                justify-content: center;
                margin: 50rpx auto;

                .num {
                    font-size: 40rpx;
                    font-weight: bold;
                    color: #f24646;

                    text {
                        font-size: 75rpx;
                        font-weight: bold;
                        color: #f01b1b;
                    }
                }
            }

            &-section {
                display: flex;
                justify-content: space-between;
                padding-top: 50rpx;
                border-top: 1px solid #f5f5f5;

                .sec {
                    display: flex;
                    justify-content: start;
                    width: 42%;
                    padding: 30rpx 3%;
                    background-color: #f2f3f5;
                    border-radius: 20rpx;

                    image {
                        width: 80rpx;
                        height: 80rpx;
                        margin-right: 20rpx;
                    }

                    .txt {
                        font-size: 28rpx;
                        color: #464646;

                        text {
                            display: block;
                            font-size: 32rpx;
                            font-weight: bold;
                            color: #363636;
                        }
                    }
                }
            }
        }

        &-btns {
            width: 90%;
            margin: 36rpx auto 0;
            display: flex;
            justify-content: space-between;

            .btn {
                width: 48%;
                padding: 26rpx 0;
                font-size: 30rpx;
                color: #ffffff;
                border-radius: 84rpx;
                text-align: center;

                image {
                    width: 44rpx;
                    height: 44rpx;
                    margin-right: 12rpx;
                    vertical-align: middle;
                }

                position: relative;

                button {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 2;
                    opacity: 0;
                }
            }

            .btn-1 {
                background: linear-gradient(-90deg, #14baa1, #52d4c0);
            }

            .btn-2 {
                background: linear-gradient(-90deg, #3399EA, #38BCFF);
            }
        }
    }
</style>
