<template>
    <div class="mta-multiple-choice" 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>
                <!-- 试题内容区域 -->
                <el-checkbox-group v-model="newCheckListData" @change="selectChange">

                    <div class="mta-checkbox-row" v-for="(item,index) in questionDataContent"
                         :class="{'showError': showError && typeCase === 'geren'}">

                        <el-checkbox :label="`${item.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-checkbox>
                    </div>
                </el-checkbox-group>
                <div class="mta-modal" v-if="getShowModel"></div>
            </el-col>
        </el-row>
        <mta-answer-area
                v-if="typeCase === 'geren' || typeCase === 'cuoti2' || typeCase === 'cuoti3' || typeCase === 'yulan'"
                :data="{
                    showAnswer:showAnswer,
                    analysis: pageData.answer
                }"
        ></mta-answer-area>

    </div>
</template>

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

    export default {
        name: "MultipleChoice",
        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: {
            MtaAnswerArea,
            MtaBusAudioPlayer,
        },
        data() {
            return {
                // 页面渲染必须数据
                pageData: null,
                // 答案
                newCheckListData: [],
                showAnswer: null,
                // 错误
                showError: false,
                // 解析
                analysis: null,

                audioOptions: null,
            }
        },
        methods: {
            checkAnswer(result, reply) {
                let innerStatus = false;
                if (reply === null) {
                    return true;
                }
                if (result.length !== reply.length) {
                    return true;
                }
                result.forEach(item => {
                    if (reply.indexOf(item) === -1) {
                        innerStatus = true;
                    }
                });



                return innerStatus;
            },
            getShowAnswer(data) {
                const opt = [];
                if (data === undefined) {
                    return;
                }
                // 答案排序
                const newData  = data.sort(function sortNumber(a,b){return a - b})

                newData.forEach(item => {
                    opt.push(getLetterByIndex(Number(item)));
                });
                return opt.join(',');
            },
            selectChange(val) {
                // this.$emit('reply', [this.questionData.paragraph ,this.questionData.stId,this.newCheckListData]);
                // this.$emit('reply', [1 ,this.questionData.stId, this.newCheckListData]);
                // this.questionData.reply = val;

                this.pageData.reply = val;
                this.showError = this.checkAnswer(this.pageData.result, val);

                if (this.isYueDu) {
                    this.$emit('reply', {
                        paragraph: this.questionData.paragraph,
                        type: 'duoxuan',
                        stId: this.questionData.stId,
                        data: this.newCheckListData.sort(),
                        number: this.yuduIndex,
                    });
                } else {
                    this.$emit('reply', {
                        paragraph: this.questionData.paragraph,
                        stId: this.questionData.stId,
                        data: this.newCheckListData.sort(),
                        number: this.shitiIndex - 1,
                    });
                }
            }
        },
        computed: {
            questionDataContent() {
                if (this.pageData.content && this.pageData.content.length) {
                    return this.pageData.content.map((item, index) => {
                        return {
                            label: item,
                            num: getLetterByIndex(index),
                            index: index
                        }
                    });
                }
            },
            ...mapGetters(['getShowScore']),
        },
        watch: {
            questionData: {
                handler(newVal, oldVal) {
                    switch (this.typeCase) {
                        case `kaoshi`:
                            this.pageData = newVal;
                            if (newVal.reply && newVal.reply.length) {
                                newVal.reply.sort().forEach(item => {
                                    this.newCheckListData.push(item);
                                })
                            } else {
                                this.newCheckListData = [];
                            }
                            break;
                        case `geren`:
                            this.pageData = newVal;
                            // 答案
                            if (newVal.reply && newVal.reply.length) {
                                newVal.reply.sort().forEach(item => {
                                    this.newCheckListData.push(item);
                                })
                            } else {
                                this.newCheckListData = [];
                            }
                            // 解析答案
                            // this.showAnswer = getLetterByIndex(Number(newVal.result));
                            this.showAnswer = this.getShowAnswer(newVal.result);
                            // 解析
                            this.analysis = newVal.answer;
                            // 错误是否显示
                            this.showError = this.checkAnswer(newVal.result, newVal.reply);
                            break;
                        case `cuoti`:
                            this.pageData = newVal;
                            if (newVal.reply && newVal.reply.length) {
                                newVal.reply.sort().forEach(item => {
                                    this.newCheckListData.push(item);
                                })
                            } else {
                                this.newCheckListData = [];
                            }
                            break;
                        case `yulan`:
                            this.pageData = newVal;
                            /*if (newVal.result && newVal.result.length) {
                                newVal.result.forEach(item => {
                                    this.newCheckListData.push(item);
                                })
                            } else {
                                this.newCheckListData = [];
                            }*/
                            this.newCheckListData = [];
                            // 解析答案
                            this.showAnswer = this.getShowAnswer(newVal.result);
                            // 解析
                            this.analysis = newVal.answer;
                            break;
                        case `cuoti2`:
                            this.pageData = newVal;
                            // 单选题答案
                            if (newVal.reply && newVal.reply.length) {
                                newVal.reply.sort().forEach(item => {
                                    this.newCheckListData.push(item);
                                })
                            } else {
                                this.newCheckListData = [];
                            }
                            // 解析答案
                            this.showAnswer = this.getShowAnswer(newVal.result);
                            // 解析
                            this.analysis = newVal.answer;
                            break;
                        case `cuoti3`:
                            this.pageData = newVal;
                            // 单选题答案
                            if (newVal.reply && newVal.reply.length) {
                                newVal.reply.sort().forEach(item => {
                                    this.newCheckListData.push(item);
                                })
                            } else {
                                this.newCheckListData = [];
                            }
                            // 解析答案
                            this.showAnswer = this.getShowAnswer(newVal.result);
                            // 解析
                            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,
            }
        },
    }
</script>
