<template>
    <div class="mta-gap-filling" 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>
                <!-- 试题内容区域 -->
                <div class="mta-inputTK-row" v-for="item in questionTKCount">
                    <span class="mta-num">填空{{item}}:</span>
                    <el-input v-model="tianKongResult[item-1]" @change="inputChange"
                              :placeholder="`请输入填空${item}答案`"></el-input>
                </div>

            </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:       'GapFilling',
        props:      {
            questionData: { // 单选题数据
                require: true,
                type:    Object,
            },
            shitiIndex:   { // 试题序号
                type: String,
            },
            isYueDu:      {
                type:    Boolean,
                default: false,
            },
            yuduIndex:    {
                type: Number,
            },
        },
        components: {
            MtaBusAudioPlayer,
        },
        computed:   {
            questionTKCount() {
                if (this.questionData.count) {
                    return this.questionData.count;
                }
            },
            ...mapGetters(['getShowScore', 'getShowModel']),
        },
        watch:      {
            questionData: {
                handler:   function (newVal, oldVal) {
                    this.tianKongResult = [];
                    this.newTiankongData = newVal.reply;
                    if (this.newTiankongData) {
                        this.newTiankongData.forEach(item => {
                            // if (item && item.length) {
                                this.tianKongResult.push(item);
                            // }
                        });
                    }

                    if (!this.tianKongResult.length) {
                        for (let i = 0; i < newVal.count; i++) {
                            this.tianKongResult.push('');
                        }
                    }

                    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,
                deep:      true,
            },
            shitiIndex:   {
                handler(newVal, oldVal) {
                    if (newVal) {
                        let c = newVal.split('-');
                        this.paragraph = c[0];
                        this.shitiNum = c[1];
                    }
                },
                immediate: true,
            },
        },
        data() {
            return {
                newTiankongData: this.questionData.reply === null ? '' : this.questionData.reply,
                tianKongResult:  [],
                otherResult:     [],
                // 段落
                paragraph:       null,
                shitiNum:        0,
                audioOptions:    null,
            };
        },
        methods:    {
            inputChange() {
                const myData = [];
                this.tianKongResult.forEach(item => {
                    myData.push(item.trim());
                });
                if (this.isYueDu) {
                    this.$emit('reply', {
                        paragraph: this.paragraph,
                        type:      'tiankong',
                        stId:      this.questionData.stId,
                        data:      myData,
                        number:    this.yuduIndex,
                    });
                } else {
                    this.$emit('reply', {
                        paragraph: this.paragraph,
                        stId:      this.questionData.stId,
                        data:      myData,
                        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>

