<template>
    <div class="stu_answer_detail">
        <div class="title">【作 答】</div>
        <div class="desc">
            <el-radio-group 
                v-if="answerType == 'online'"
            >
              <el-radio 
                v-for="radioItem in optionList" 
                    :key="radioItem" 
                    :label="radioItem"
                    :class="{ 
                         'is-correct-radio is-checked':  rightAnswer.split('').includes(radioItem), 
                        'is-wrong-radio is-checked': studentAnswer.split('').includes(radioItem) && !(rightAnswer.split('').includes(radioItem))
                    }"
                >{{ radioItem }}</el-radio>
            </el-radio-group>

            <ImageJumpPreview 
                v-if="answerType == 'img' && answerImg?.length > 0"
                :fileMessage="answerImg[currentNavPage - 1]" height="400px"
                :filePadding="{padding:`0 ${imgPreviewPadding}`}"
                :navBarWidth="{width:`calc(100% - ${imgPreviewPadding} + 20px)`}"
                :navBarLeft="{left: `calc(${imgPreviewPadding} / 2 - 10px)`}"
                :navTotalPage="answerImg.length"
                :currentNavPage.sync="currentNavPage"
            ></ImageJumpPreview>
        </div>
    </div>
</template>   


<script>
import ImageJumpPreview from '../../components/ImageJumpPreview.vue'
import {numToCapitalLetter} from '../../utils/numberToExcelCapitalLetter.js'

export default ({
    name:'StudentAnswerDetail',
    components: {
        ImageJumpPreview,
    },
    props:{
       
        answerType:{     //答题方式  //线上答题（勾选选项）和上传图片的方式   online \ img
            type:String
        },

        /** 【勾选选项】 答题用到的参数 */
        answerOptionNum:{   // 选项数量（只有 props.answerType 为 online 的时候才会用到）
            type:Number   
        },
        studentAnswer:{   //学生的答案
            type:String,
        },
        rightAnswer:{  //正确答案
            type:String,
        },
        /** 【拍照/传图】 答题用到的参数 */
        answerImg:{
            type:Array,  //Object[]  name:'',url:''
        }
    },
    data(){
        return {
            imgPreviewPadding:'70px',
            currentNavPage:1,
        }
    },
    computed:{
        // 答案的选项列表
        optionList(){
            // 选项数量转换成大写字母列表
            let options = []
            for(let i=0;i<this.answerOptionNum;i++){
                options[i]  = numToCapitalLetter(i)
            }
            return options
        }
    },
    methods: {},
    mounted() {

    },
    
})

</script>


<style lang="scss" scoped>
 .stu_answer_detail{
    padding: 16px;
    display: flex;
    gap:10px;
    .title {
        text-align: right;
        width: 70px;
        flex-shrink: 0;
        font-weight: 600;
    }
    .desc{
        flex: 1 1;
        line-height: 24px;
    }

    
    // 2. 错误选项样式（红色）
    ::v-deep .is-wrong-radio {
            position: relative !important;
        // 圆圈边框
        .el-radio__inner {
            border-color: #F56C6C !important;
        }
        // 选中状态（圆点填充）
        &.is-checked .el-radio__inner {
            position: relative !important;
            background-color: none;
            &::after{
                    width: 8px;
                    height: 8px;
                    border-radius: 100%;
                    background-color: #F56C6C !important;
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%) scale(1) !important;
                    transition: transform 0.15s ease-in;
            }
        }
    }

    // 正确选项样式 蓝色
    ::v-deep .is-correct-radio {
            position: relative !important;
        // 圆圈边框
        .el-radio__inner {
            border-color: #2E64FA !important;
        }
        // 选中状态（圆点填充）
        &.is-checked .el-radio__inner {
            position: relative !important;
            background-color: none;

            &::after{
                    width: 8px;
                    height: 8px;
                    border-radius: 100%;
                    background-color: #2E64FA!important;
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%) scale(1) !important;
                    transition: transform 0.15s ease-in;
            }
        }
    }
}
</style>