<template>
    <div class="mta-gap-filling" v-if="pageData.name">
        <el-row class="mta-first-row" type="flex">
            <el-col>
                <span class="wrap-shitiIndex" v-if="!!shitiIndex">
                    <span v-if="isYueDu">({{shitiIndex}})</span>
                    <span v-else>{{shitiIndex}}.</span>
                </span>
                <!-- 试题题目 -->
                <div class="mta-SC-title" v-html="pageData.name"></div>
                <span class="mta-SC-score" v-if="getShowScore && !isYueDu">（{{pageData.score}}分）</span>
            </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-two-row" type="flex">
            <el-col>
                <!-- 试题内容区域 -->
                <div class="mta-inputTK-row" v-for="(item,index) in questionTKCount" :key="index">
                    <!--<span class="mta-num">填空题{{item}}:</span>
                    <el-input v-model="tianKongResult[item-1]"
                              @change="inputChange"
                              :placeholder="`请输入填空题${item}答案`"></el-input>-->
                    <mta-tian-kong-item
                            :data="{
                            num: item,
                            typeCase: typeCase,
                            answer: tianKongResult[item-1],
                            result: pageData.result
                        }"
                            @change="inputChange"></mta-tian-kong-item>
                </div>
                <!--                <div class="mta-modal" v-if="getShowModel"></div> -->
            </el-col>
        </el-row>
        <mta-answer-area-tian-kong
                v-if="typeCase === 'geren' || typeCase === 'cuoti2' || typeCase === 'cuoti3' || typeCase === 'yulan'"
                :data="{
                    showAnswer:showAnswer,
                    analysis: pageData.answer
                }"
        ></mta-answer-area-tian-kong>

    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import MtaAnswerAreaTianKong from '@/components/client/QuestionsForCuoti/AnswerAreaTianKong.vue'
    import MtaTianKongItem from '@/components/client/QuestionsForCuoti/TianKongItem.vue'
    import MtaBusAudioPlayer    from '@/components/custom/MtaBusAudioPlayer.vue';

    export default {
        name: "GapFilling",
        props: {
            questionData: { // 单选题数据
                require: true,
                type: Object,
            },
            shitiIndex: { // 试题序号
                type: Number,
                default: 0,
            },
            isYueDu: {
                type: Boolean,
                default: false
            },
            yuduIndex: {
                type: Number,
            },
            // 组件接环状态， kaoshi,geren,yulan,cuoti2
            typeCase: {
                type: String,
                default: 'kaoshi'
            },
            getShowModel: {
                type: Boolean,
                default: true
            }
        },
        components: {
            MtaAnswerAreaTianKong,
            MtaTianKongItem,
            MtaBusAudioPlayer,
        },
        data() {
            return {
                // 页面渲染必须数据
                pageData: null,

                // 答案
                newTiankongData: this.questionData.reply === null ? '' : this.questionData.reply,
                tianKongResult: [],
                // 展示答案
                showAnswer: null,
                // 错误
                showError: false,
                // 解析
                analysis: null,
                audioOptions: null,
            }
        },
        methods: {
            getShowAnswer(data) {
                let str = [];
                if (data === undefined) {
                    return;
                }
                data.forEach((item, index) => {
                    str.push({
                        answer: item.join(','),
                        label: `填空${index + 1}`
                    })
                });
                return str;
            },
            checkAnswer(result, reply) {
                let innerStatus = false;

                if (reply === null) {
                    return true
                }

                reply.forEach((item, index) => {
                    if (result[index].indexOf(item) === -1) {
                        innerStatus = true;
                    }
                });

                return innerStatus

            },
            inputChange(val) {
                // this.$emit('reply', [this.questionData.paragraph ,this.questionData.stId,resultOpt]);
                // this.$emit('reply', [1, this.questionData.stId, resultOpt]);

                this.tianKongResult[val.num - 1] = val.data.trim();

                if (this.isYueDu) {
                    this.$emit('reply', {
                        paragraph: this.questionData.paragraph,
                        type: 'tiankong',
                        stId: this.questionData.stId,
                        data: this.tianKongResult,
                        number: this.yuduIndex
                    });
                } else {
                    this.$emit('reply', {
                        paragraph: this.questionData.paragraph,
                        stId: this.questionData.stId,
                        data: this.tianKongResult,
                        number: this.shitiIndex - 1
                    });
                }
            }
        },
        computed: {
            questionTKCount() {
                if (this.questionData.count) {
                    return this.questionData.count;
                }
            },
            ...mapGetters(['getShowScore']),
        },
        watch: {
            questionData: {
                handler: function (newVal, oldVal) {

                    switch (this.typeCase) {
                        case `kaoshi`:
                            this.tianKongResult = [];
                            this.pageData = newVal;
                            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('')
                                }
                            }
                            break;
                        case `geren`:
                            this.tianKongResult = [];
                            this.pageData = newVal;
                            // 答案
                            this.newTiankongData = newVal.reply;
                            if (this.newTiankongData) {
                                this.newTiankongData.forEach(item => {
                                    if (item && item.length) {
                                        this.tianKongResult.push(item);
                                    }
                                });
                            } else {
                                return;
                            }

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

                            // 解析答案
                            this.showAnswer = this.getShowAnswer(newVal.result);
                            // 解析
                            this.analysis = newVal.answer;
                            // 错误是否显示
                            this.showError = this.checkAnswer(newVal.result, newVal.reply);
                            break;
                        case `cuoti`:
                            this.pageData = newVal;
                            this.newTiankongData = newVal.reply;
                            this.tianKongResult = [];
                            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('')
                                }
                            }
                            break;
                        case `yulan`:
                            this.pageData = newVal;
                            this.newTiankongData = newVal.result;
                            this.tianKongResult = [];

                            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('')
                                }
                            }
                            // 解析答案
                            this.showAnswer = this.getShowAnswer(this.tianKongResult);
                            // 解析答案
                            this.showError = this.checkAnswer(newVal.result, newVal.reply);
                            // 解析
                            this.analysis = newVal.answer;
                            break;
                        case `cuoti2`:
                            this.tianKongResult = [];
                            this.pageData = newVal;
                            // 单选题答案
                            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('')
                                }
                            }
                            // 解析答案
                            this.showAnswer = this.getShowAnswer(newVal.result);
                            // 解析答案
                            this.showError = this.checkAnswer(newVal.result, newVal.reply);
                            // 解析
                            this.analysis = newVal.answer;
                            break;
                        case `cuoti3`:
                            this.tianKongResult = [];
                            this.pageData = newVal;
                            // 单选题答案
                            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('')
                                }
                            }
                            // 解析答案
                            this.showAnswer = this.getShowAnswer(newVal.result);
                            // 解析答案
                            this.showError = this.checkAnswer(newVal.result, newVal.reply);
                            // 解析
                            this.analysis = newVal.answer;
                            break;
                    }

                    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,
                deep: true
            },
        },
    }
</script>

