<!--
 * @Author: your name
 * @Date: 2021-12-14 16:22:43
 * @LastEditTime: 2022-06-18 22:20:00
 * @LastEditors: 陈伟亮 1186723967@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \local-backstage\src\views\modules\learn-statistics\paper.vue
-->
<template>
    <div 
    :style="{width:'900px'}"
    class="container">
        <div  class="title">{{listData.name}}</div>
        <div v-html="listData.describe"></div>
        <!-- 以下是题目 -->
        <div v-for="(item,index) in listData.list" :key="item.formItemId" class="problem">
            <div class="problemTitle" :class="item.marks==0?'falseP':'trueP'">{{index+1+'.'+item.label}}<span style="padding-left:20px;padding-right:20px">本题分数:{{item.score}}</span></div>
            <!-- 选项 -->
            <div class="options">
                 <el-radio
                    class='option'
                  :key="option.label" v-for="option in item.expand.options"
                  :class="{'selectO':option.isChosen,'falseO':!option.isAnswer&&option.isChosen}"
                  :label="true"
                  :value="option.isAnswer||option.isChosen"
                    >{{option.label}}<span :class="{'isAnswer':option.isAnswer}">{{option.isAnswer?'(答案)':''}}</span></el-radio>
            </div>
           
        </div>
    </div>
</template>
<script>
export default {
    props:{
        paper:{type:Object,default:()=>{}},//试卷信息
        width:{type:String,default:'900px'},
    },
    data(){
        return{

        }
    },
    computed:{
        listData(){
            console.log('paper:',this.paper)
            return this.paper
        }
    }
}
</script>
<style lang="scss" >
.container{
    box-shadow: 5px 5px 10px rgb(200,200,200);
    padding: 20px;
    border-radius: 20px;
}
.title{
    text-align: center;
    font-size: 20px;
    font-weight: 600;

    /* background: red; */
}
.problem{
    font-size:16px;
    .problemTitle{
        // font-weight: 600;
        font-size:18px;
    }
    .trueP{
        // color:#409EFF
    }
    .falseP{
        color:rgb(230, 90, 90)
    }
    .selectO{
        .el-radio__inner{
            background:rgb(107,194,35);
            border-color:rgb(107,194,35)
        }
        .el-radio__label{
            color:rgb(107,194,35)
        }
    }
    .falseO{
        .el-radio__inner{
            background:rgb(230, 90, 90);
            border-color:rgb(230, 90, 90)
        }
        .el-radio__label{
            color:rgb(230, 90, 90)
        }
    }
    .options{
        padding: 15px 0px;
        .isAnswer{
            padding-left: 10px;
            color:rgb(243, 166, 24);
        }
        .option{
            display: block;
            margin-bottom: 10px;
            margin-left: 20px;
        }
    }
}
</style>