<template>
    <div class="mta-single-choice" 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>
                <!--  <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-radio-row" v-for="(item, index) in questionDataContent">
                        <el-radio :label="`${index}`">
                            <slot>
                                <span style="vertical-align: top;display: inline-block;width: auto;" class="wordOption">{{item.num}}、</span>
                                <span v-html="item.label" class="wordBox"></span>
                            </slot>
                        </el-radio>
                    </div>
                </el-radio-group>
            </el-col>
        </el-row>
        <div class="mta-modal" v-if="getShowModel"></div>
    </div>

</template>

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

    export default {
        name:       'SingleChoice',
        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,
            };
        },
        methods:    {
            selectChange(val) {
                this.questionData.reply = val;
                // this.$emit('reply', [this.questionData.paragraph ,this.questionData.stId, this.newRadioData]);
                if (this.isYueDu) {
                    this.$emit('reply', {
                        paragraph: this.paragraph,
                        type:      'danxuan',
                        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,
                    });
                }
            },
        },
        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:   {
            questionDataContent() {
                if (this.questionData.content && this.questionData.content.length) {
                    return this.questionData.content.map((item, index) => {
                        return {
                            label: item,
                            num:   getLetterByIndex(index),
                        };
                    });
                }
            },
            ...mapGetters(['getShowScore', 'getShowModel']),
        },
    };
</script>
