<template>
    <div class="mta-read-the-topic">
        <el-row class="mta-two-row" type="flex">
            <el-col>
                <!-- 试题题干区域 -->
                <span class="wrap-shitiIndex" v-if="!!shitiIndex">{{shitiIndex}}.</span>
                <div style="display: flex;justify-content: space-between;flex-direction: row;">
                    <span class="mta-SC-title" v-html="questionData.name"></span>
                    <span class="mta-SC-score" v-if="getShowScore">（{{questionData.score}}分）</span>
                </div>

            </el-col>
        </el-row>
        <el-row class="mta-two-row" type="flex" v-if='audioOptions' >
            <mta-bus-audio-player :checktimes="false" :options="audioOptions"></mta-bus-audio-player>
        </el-row>
        <el-row class="mta-three-row" type="flex">
            <el-col>
                <!-- 试题区域 -->
                <!-- 单选题 -->
                <div v-for="(item,index) in danxuanData" :key="`danxuan${index}`" v-if="danxuanData.length > 0">
                    <mta-single-choice
                            :questionData="item"
                            :is-yue-du="true"
                            :typeCase="typeCase"
                            :yuduIndex="index"
                            :getShowModel="getShowModel"
                            :shitiIndex="num+index"
                            @reply="reply"
                    ></mta-single-choice>
                </div>
                <!-- 多选题 -->
                <div v-for="(item,index)  in duoxuanData" :key="`duoxuan${index}`" v-if="duoxuanData.length > 0">
                    <mta-multiple-choice
                            :questionData="item"
                            :is-yue-du="true"
                            :yuduIndex="index"
                            :typeCase="typeCase"
                            :getShowModel="getShowModel"
                            :shitiIndex="num+index+danxuanData.length"
                            @reply="reply"
                    ></mta-multiple-choice>
                </div>
                <!-- 判断题 -->
                <div v-for="(item,index)  in panduanData" :key="`panduan${index}`" v-if="panduanData.length > 0">
                    <mta-true-or-false
                            :questionData="item"
                            :is-yue-du="true"
                            :yuduIndex="index"
                            :typeCase="typeCase"
                            :getShowModel="getShowModel"
                            :shitiIndex="num+index+duoxuanData.length+danxuanData.length"
                            @reply="reply"
                    ></mta-true-or-false>
                </div>
                <!-- 填空题 -->
                <div v-for="(item,index)  in tiankongData" :key="`tiankong${index}`" v-if="tiankongData.length > 0">
                    <mta-gap-filling
                            :questionData="item"
                            :is-yue-du="true"
                            :yuduIndex="index"
                            :getShowModel="getShowModel"
                            :typeCase="typeCase"
                            :shitiIndex="num+index+danxuanData.length+duoxuanData.length+panduanData.length"
                            @reply="reply"
                    ></mta-gap-filling>
                </div>
                <!-- 简答题 -->
                <div v-for="(item,index)  in jiandaData" :key="`jianda${index}`" v-if="jiandaData.length > 0">
                    <mta-short-answer-question
                            :questionData="item"
                            :is-yue-du="true"
                            :yuduIndex="index"
                            :getShowModel="getShowModel"
                            :typeCase="typeCase"
                            :shitiIndex="num+index+danxuanData.length+duoxuanData.length+panduanData.length+tiankongData.length"
                            @reply="reply"
                    ></mta-short-answer-question>
                </div>
            </el-col>
        </el-row>
        <!--<div class="mta-modal" v-if="getShowModel"></div>-->
    </div>
</template>

<script>
    import MtaSingleChoice from '@/components/client/QuestionsForCuoti/SingleChoice.vue';
    import MtaTrueOrFalse from '@/components/client/QuestionsForCuoti/TrueOrFalse.vue';
    import MtaMultipleChoice from '@/components/client/QuestionsForCuoti/MultipleChoice.vue';
    import MtaGapFilling from '@/components/client/QuestionsForCuoti/GapFilling.vue';
    import MtaShortAnswerQuestion from '@/components/client/QuestionsForCuoti/ShortAnswerQuestion.vue';
    import {mapGetters} from 'vuex'
    import MtaBusAudioPlayer    from '@/components/custom/MtaBusAudioPlayer.vue';

    export default {
        name: "ReadTheTopic",
        components: {
            MtaSingleChoice,
            MtaMultipleChoice,
            MtaTrueOrFalse,
            MtaGapFilling,
            MtaShortAnswerQuestion,
            MtaBusAudioPlayer,
        },
        props: {
            questionData: { // 简答题数据
                require: true,
                type: Object,
            },
            shitiIndex: {
                type: Number,
                default: 0,
            },
            // 组件接环状态， kaoshi,geren,yulan,cuoti2
            typeCase: {
                type: String,
                default: 'kaoshi'
            },
            getShowModel: {
                type: Boolean,
                default: true
            }
        },
        created() {
            /* this.danxuanData = this.questionData.shitiQueryDanxuanResponseVos ? this.questionData.shitiQueryDanxuanResponseVos :this.questionData.danxuanList;
             this.duoxuanData = this.questionData.shitiQueryDuoxuanResponseVos ? this.questionData.shitiQueryDuoxuanResponseVos :this.questionData.duoxuanList;
             this.panduanData = this.questionData.shitiQueryPanduanResponseVos ? this.questionData.shitiQueryPanduanResponseVos :this.questionData.panduanList;
             this.jiandaData = this.questionData.shitiQueryJiandaResponseVos ? this.questionData.shitiQueryJiandaResponseVos :this.questionData.jiandaList;
             this.tiankongData = this.questionData.shitiQueryTiankongResponseVos ? this.questionData.shitiQueryTiankongResponseVos :this.questionData.tiankongList;*/
        },
        computed: {
            danxuanData() {
                return this.questionData.danxuan
            },
            duoxuanData() {

               return this.questionData.duoxuan

                // return this.questionData.shitiQueryDuoxuanResponseVos ? this.questionData.shitiQueryDuoxuanResponseVos :this.questionData.duoxuanList
            },
            panduanData() {
                 return this.questionData.panduan
                // return this.questionData.shitiQueryPanduanResponseVos ? this.questionData.shitiQueryPanduanResponseVos :this.questionData.panduanList
            },
            jiandaData() {

                return this.questionData.jianda

                // return this.questionData.shitiQueryJiandaResponseVos ? this.questionData.shitiQueryJiandaResponseVos :this.questionData.jiandaList
            },
            tiankongData() {
                 return this.questionData.tiankong
                // return this.questionData.shitiQueryTiankongResponseVos ? this.questionData.shitiQueryTiankongResponseVos :this.questionData.tiankongList
            },
            ...mapGetters(['getShowScore']),
        },
        data() {
            return {
                num: 1,
                audioOptions: null,
            }
        },
        methods:  {
            reply(data) {
                const newData = Object.assign(data, {
                    stId: this.questionData.stId,
                    paragraph:  this.questionData.paragraph,
                });
                this.$emit('reply', newData)
            }
        },
        watch:    {
            questionData: {
                handler(newVal, oldVal) {
                    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.playtimes = item.playtimes;
                            }
                        }
                    }
                },
                immediate: true,
            }
        },
    }
</script>
