<template>
    <div class="mta-paper-preview">
        <div class="title-h3">{{previewData.name}}</div>

        <div v-for="(opt, index) in previewData.duanluoList" :key="index">
            <mta-shiti-structure
                    :title="opt.name"
            >
                <!-- 单选题 -->
                <div v-if="opt.danxuan && opt.danxuan.length > 0">
                    <mta-single-choice
                            v-for="(item,index) in opt.danxuan" :key="index"
                            :questionData.sync="item"
                            :shitiIndex="item.onlyNum"
                            :typeCase="typeCase"
                            @reply="reply"
                    ></mta-single-choice>


                </div>
                <!-- 多选题 -->
                <div v-if="opt.duoxuan && opt.duoxuan.length > 0">
                    <mta-multiple-choice
                            v-for="(item,index)  in opt.duoxuan" :key="index"
                            :questionData="item"
                            :typeCase="typeCase"
                            :shitiIndex="item.onlyNum"
                            @reply="reply2"
                    ></mta-multiple-choice>
                </div>
                <!-- 判断题 -->
                <div v-if="opt.panduan && opt.panduan.length > 0">
                    <mta-true-or-false
                            v-for="(item,index)  in opt.panduan" :key="index"
                            :questionData="item"
                            :typeCase="typeCase"
                            :shitiIndex="item.onlyNum"
                            @reply="reply3"
                    ></mta-true-or-false>
                </div>
                <!-- 填空题 -->
                <div v-if="opt.tiankong && opt.tiankong.length > 0">
                    <mta-gap-filling
                            v-for="(item,index)  in opt.tiankong" :key="index"
                            :questionData="item"
                            :typeCase="typeCase"
                            :shitiIndex="item.onlyNum"
                            @reply="reply4"
                    ></mta-gap-filling>
                </div>
                <!-- 简答题 -->
                <div v-if="opt.jianda && opt.jianda.length > 0">
                    <mta-short-answer-question
                            v-for="(item,index)  in opt.jianda" :key="index"
                            :questionData="item"
                            :typeCase="typeCase"
                            @reply="reply5"
                            :shitiIndex="item.onlyNum"

                    ></mta-short-answer-question>


                </div>
                <!-- 阅读 -->
                <div v-if="opt.jianda && opt.yuedu.length > 0">
                    <mta-read-the-topic
                            v-for="(item,index)  in opt.yuedu" :key="index"
                            :questionData="item"
                            :typeCase="typeCase"
                            :shitiIndex="item.onlyNum"
                    ></mta-read-the-topic>

                </div>
            </mta-shiti-structure>
        </div>
    </div>

</template>

<script>
    import MtaShitiStructure from './shitiStructure.vue'
    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 MtaReadTheTopic from '@/components/client/QuestionsForCuoti/ReadTheTopic.vue';

    export default {
        name: "PaperPreview",
        components: {
            MtaSingleChoice,
            MtaMultipleChoice,
            MtaTrueOrFalse,
            MtaGapFilling,
            MtaShortAnswerQuestion,
            MtaReadTheTopic,
            MtaShitiStructure,
        },
        props: {
            DuanLuoData: {
                require: true,
                type: Object,
            },
            // 组件接环状态， kaoshi,geren,yulan,cuoti2
            typeCase: {
                type: String,
                default: 'kaoshi'
            }
        },
        data() {
            return {
                num: 1,
                previewData: {},
            }
        },
        watch: {
            DuanLuoData: {
                handler(newVal, oldVal) {

                    if (newVal.duanluoList) {
                        let indexNum = 1;
                        newVal.duanluoList.forEach(item => {
                            if (item.danxuan && item.danxuan.length > 0) {
                                item.danxuan.forEach(a => {
                                    a.onlyNum = indexNum++;
                                    return a;
                                })
                            }
                            if (item.duoxuan && item.duoxuan.length > 0) {
                                item.duoxuan.forEach(b => {
                                    b.onlyNum = indexNum++;
                                    return b;
                                })
                            }
                            if (item.panduan && item.panduan.length > 0) {
                                item.panduan.forEach(c => {
                                    c.onlyNum = indexNum++;
                                    return c;
                                })
                            }
                            if (item.tiankong && item.tiankong.length > 0) {
                                item.tiankong.forEach(c => {
                                    c.onlyNum = indexNum++;
                                    return c;
                                })
                            }
                            if (item.jianda && item.jianda.length > 0) {
                                item.jianda.forEach(d => {
                                    d.onlyNum = indexNum++;
                                    return d;
                                })
                            }
                            if (item.yuedu && item.yuedu.length > 0) {
                                item.yuedu.forEach(e => {
                                    e.onlyNum = indexNum++;
                                    return e;
                                })
                            }
                            return item;
                        })
                    }

                    this.previewData = newVal;
                },
                immediate: true
            }
        },

        methods: {
            reply(data) {
            },
            reply2(data) {
            },
            reply3(data) {
            },
            reply4(data) {
            },
            reply5(data) {
            }

        }
    }
</script>

