<template>
    <view class="content">
        <scroll-view scroll-y="true" :scroll-into-view="intoindex" style="height: 1000px">
            <view v-for="(item,index) in list" :key='index' :id='"text"+index' class="li">
                <view class="tit">
                    {{index + 1}}、<view class="content" v-html="item.title"></view>
                </view>
                <view class="title_img" v-if="item.title_img">
                    <image mode="widthFix" :src="item.title_img"></image>
                </view>
                <view class="title_video" v-if="item.title_video">
                    <video :src="item.title_video"></video>
                </view>
               <view class="con" v-for="(a,index) in item.choice" :key="index"
                :class="{'right':a.name == item.answer.toUpperCase(),
                    'wrong':!item.is_correct && item.your_answer && a.name == item.your_answer.toUpperCase()}">
                    {{a.name}}.{{a.value}}
                    <view class="mark">
                        <image v-if="a.name == item.answer.toUpperCase()" 
                         :src="staticUrl('/static/icon-study-right.png')"></image>
                        <template v-else>
                            <image v-if="!item.is_correct && item.your_answer && a.name == item.your_answer.toUpperCase()" src="/static/icon-study-wrong.png"></image>
                        </template>
                    </view>
                </view>
                <view class="choice-wrap">
                    <view class="choice-item">
                        <text class="title">正确答案：</text>
                        <text class="correct">{{item.answer.toUpperCase()}}</text>
                    </view>
                    <view class="choice-item">
                        <text class="title">你的答案：</text>
                        <text class="correct" 
                            :class="{'wrong':!item.is_correct && item.your_answer}">
                            {{item.your_answer ? item.your_answer.toUpperCase() : '-'}}
                        </text>
                    </view>
                </view>
            </view>
        </scroll-view>
        <div class="card-bottom" @click="showCard= true">答题卡</div>
        <pop-card :showPop="showCard" :successNum="correct_num" :errorNum="error_num" :list="list" @selItem="selCardItem" @close="showCard = false"></pop-card>
    </view>

</template>

<script>
    export default {
        data() {
            return {
                showCard: false,
                index: 0,
                list: [],
                intoindex: '',
                error_num: 0,
                correct_num: 0
            };
        },
        methods: {
            onLoad(o) {
                this.index = o.index;
                this.error_num = o.error_num;
                this.correct_num = o.correct_num;
                const cardListStr = uni.getStorageSync("cardList")
                this.list = JSON.parse(cardListStr)
                this.scroll(this.index)
            },
            back() {
                uni.navigateBack()
            },
            selCardItem(index) {
                this.showCard = false
                this.scroll(index)
            },
            scroll(index) {
                this.$nextTick(() => {
                    this.intoindex = "text" + index
                });
                this.intoindex = '' //不清空再次跳到锚点位置会不起作用
            }
        }
    }
</script>

<style lang="scss" scoped>
    .list-item {
        width: 100%;
        height: 200px;
        line-height: 50px;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }
    .card-bottom{
    	position: fixed;
    	bottom: 50rpx; 
        right: 30rpx;
    	width: 151rpx;
        height: 151rpx;
        line-height: 151rpx;
        border-radius: 50%;
    	text-align: center;
        background-color: #3399EA;
        color: white;
    }
    .choice-wrap {
        display: flex;
        margin-top: 30rpx;
        .choice-item {
            flex: 1;
            font-size: 30rpx;
            .title {
                font-weight: bold;
            }
            .correct {
                color: #49c99c; 
            }
            .wrong {
                color: #fa6e6e; 
            }
        }
    }
    .li {
        width: 90%;
        margin: 20rpx auto 0;
        padding: 30rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(32, 79, 156, 0.06);
        border-radius: 20rpx;
    
        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20rpx;
    
            .tag {
                height: 50rpx;
                margin-left: -30rpx;
                padding-left: 30rpx;
                padding-right: 30rpx;
                background: url('../../../static/icon-tag-bg.png') no-repeat;
                background-size: 100% 100%;
                font-size: 1rpx;
                line-height: 50rpx;
                color: #ffffff;
    
                text {
                    font-size: 30rpx;
                }
            }
    
            .time {
                font-size: 24rpx;
                color: #3e8ff9;
                display: flex;
                align-items: center;
    
                image {
                    width: 25rpx;
                    height: 25rpx;
                    margin-right: 10rpx;
                }
            }
        }
    
        .tit {
            overflow: hidden;
            padding-bottom: 10rpx;
            color: #333333;
            display: flex;
            align-items: flex-start;
            font-size: 30rpx;
            font-weight: bold;
        }
    
        .title_img {
            width: 100%;
    
            image {
                width: 100%;
            }
        }
    
        .title_video {
            width: 100%;
            height: 300rpx;
    
            video {
                width: 100%;
                height: 100%;
            }
        }
    
        .con {
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20rpx;
            padding: 30rpx 60rpx 30rpx 30rpx;
            background: #F6F6F6;
            color: #333333;
            line-height: 50rpx;
            position: relative;
            font-size: 28rpx;
            &.right {
                color: #49c99c;
                background-color: #f3f8f6;
            }
    
            &.wrong {
                color: #fa6e6e;
                background-color: #fff3f3;
            }
    
            .mark {
                width: 60rpx;
                height: 60rpx;
                position: absolute;
                right: 10rpx;
                top: 50%;
                margin-top: -30rpx;
                z-index: 2;
    
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>
