<template>
    <div class="mta-true-or-false"  v-if="questionData.name">
        <el-row class="mta-first-row" type="flex">
            <el-col>
                <span class="wrap-shitiIndex" v-if="!!shitiNum">
                    <span v-if="isYueDu">({{shitiNum}})</span>
                    <span v-else>{{shitiNum}}.</span>
                </span>
                <!-- 试题题目 -->
                <div class="mta-SC-title" v-html="questionData.name"></div>
                <span class="mta-SC-score" v-if="getShowScore && !isYueDu">（{{questionData.score}}分）</span>
            </el-col>
        </el-row>
        <el-row class="mta-two-row" type="flex" v-if='audioOptions'>
            <mta-bus-audio-player
                    :options="audioOptions"
                    @updAudioPlaytimes="updAudioPlaytimes"
            >
            </mta-bus-audio-player>
        </el-row>
        <el-row class="mta-two-row" type="flex">
            <el-col>
                <!-- 试题内容区域 -->
                <el-radio-group v-model="newRadioData" @change="selectChange">
                    <div class="mta-panduan-row">
                        <el-radio label="1">正确</el-radio>
                    </div>
                    <div class="mta-panduan-row">
                        <el-radio label="0">错误</el-radio>
                    </div>
                </el-radio-group>

            </el-col>
        </el-row>
        <div class="mta-modal" v-if="getShowModel"></div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import MtaBusAudioPlayer    from '@/components/custom/MtaBusAudioPlayer.vue';

    export default {
        name: "TrueOrFalse",
        props: {
            questionData: { // 单选题数据
                require: true,
                type: Object,
            },
            shitiIndex: { // 试题序号
                type: String,
            },
            isYueDu: {
                type: Boolean,
                default: false
            },
            yuduIndex: {
                type: Number,
            }
        },
        components: {
            MtaBusAudioPlayer,
        },
        data() {
            return {
                newRadioData: this.questionData.reply,
                // 段落
                paragraph: null,
                shitiNum: 0,
                audioOptions: null,
            }
        },
        watch: {
            questionData: {
                handler(newVal, oldVal) {
                    // console.log(newVal);
                    this.newRadioData = newVal.reply;

                    let data = this.questionData;
                    if (data.adjunct) {
                        let arrItem = JSON.parse(data.adjunct);
                        for (const item of arrItem) {
                            if (item.type === 'audio') {
                                this.audioOptions = {};
                                this.audioOptions.src = item.src;
                                this.audioOptions.title = item.oriname.split('.')[0];
                                this.audioOptions.autoplay = false;
                                this.audioOptions.dragable = item.dragable;
                                this.audioOptions.curPlaytimes = newVal.playtimes;
                                this.audioOptions.playtimes = item.playtimes;
                            }
                        }
                    }
                },
                immediate: true,
            },
            shitiIndex: {
                handler(newVal, oldVal) {
                    if (newVal) {
                        let c = newVal.split('-');
                        this.paragraph = c[0];
                        this.shitiNum = c[1];
                    }
                },
                immediate: true,
            },
        },
        computed: {
            ...mapGetters(['getShowScore', 'getShowModel']),
        },
        methods: {
            selectChange(val) {
                if (this.isYueDu) {
                    this.$emit('reply', {
                        paragraph: this.paragraph,
                        type: 'panduan',
                        stId: this.questionData.stId,
                        data: this.newRadioData,
                        number: this.yuduIndex,
                    });
                } else {
                    this.$emit('reply', {
                        paragraph: this.paragraph,
                        stId: this.questionData.stId,
                        data: this.newRadioData,
                        number: this.shitiIndex-1,
                    });
                }

            },
            updAudioPlaytimes(playtimes) {
                if (this.questionData.stId === 0) { // 阅读题
                    this.$emit('updAudioPlaytimesSub', {
                        stId:      this.questionData.stId,
                        playtimes: playtimes,
                    });
                } else { // 其他题
                    this.$emit('updAudioPlaytimes', {
                        stId:      this.questionData.stId,
                        playtimes: playtimes,
                    });
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    .mta-true-or-false {
        position: relative;
        font-size: 14px;

        .mta-first-row {
            .el-col {
                display: flex;
                justify-content: flex-start;
                flex-direction: row;

                .mta-SC-title {
                    color: #333;
                    line-height: 24px;
                }

                .mta-SC-score {
                    color: #999;
                    min-width: 100px;
                    line-height: 24px
                }
            }

            .wrap-shitiIndex {
                font-size: 13px;
                line-height: 24px;
                color: #333;
                margin-right: 10px;
                font-weight: bold;
            }
        }

        .mta-two-row {
            margin-bottom: 12px;

            .el-col {

                .mta-panduan-row {
                    margin: 10px 0;
                }
            }
        }

        .mta-modal {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 999;
        }
    }
</style>
<style lang="scss">
    .mta-true-or-false {

        .mta-SC-title {
            p {
                margin: 0;
                padding: 0;
            }
        }

        .el-radio {
            color: #666;
        }
    }

</style>
