<template>
    <div ref="mathJaxContainer">
        <div :class="index == openIndex ? 'question-item-wrap-detail question-item-wrap':'question-item-wrap'" v-for="(item,index) in questions" :key="index">
            <div class="question-content" @click="toglleQuestionDetail(index)">
                <span class="question-order">{{index+1+'.'}}</span>
                <span class="question-text" v-html='item.question' ></span>
                <Icon v-if="config.showSelect" type="ios-cart" title="选题" class="choose-question-btn" size="25" @click.stop="selectQuestion(item)" :color="selectedId.indexOf(item.id) == -1 ? 'white':'aqua'"/>
                <Icon type="ios-arrow-dropdown" :color="index == openIndex? 'cyan':'white'" size="25" @click.stop="toglleQuestionDetail(index)" :class="index == openIndex ? 'toggle-detail-icon toggle-detail-icon-up':'toggle-detail-icon toggle-detail-icon-down'" :title="openIndex == index ? '收起':'查看详情'" />
            </div>
            <div v-show="index == openIndex" :class="index == openIndex ? 'question-detail animated  fadeIn':'question-detail animated  fadeOut'">
                <div style="min-height:50px">
                    <Loading :top="20" :width="width" v-show="isLoading"></Loading>
                    <div v-if="!isLoading">
                        <p class="option-item" v-for="(optionItem,index) in questionExplain.option" :key="index">
                            <span class="option-order">{{optionItem.code+'.'}}</span>
                            <span class="option-text" v-html='optionItem.value'></span>
                        </p>
                        <p class="dark-iview-inputnumber" style="margin-top:15px;" v-if="config.showScore">
                            <span class="answer-label">配分：</span>
                            <InputNumber :disabled="config.editable" :max="100" :min="1" v-model="questionExplain.score" size="small" style="width: 110px" :formatter="value => value+' 分'" :parser="value => value.replace(' 分','')" @on-change="calcScore"></InputNumber>
                        </p>
                        <p class="answer-label">答案：</p>
                        <p class="answer-detail" v-if="questionExplain.length > 0">
                            <span :key="index" v-for="(answerItem,index) in questionExplain[0].answer" v-html="answerItem"></span>
                            <span v-if="questionExplain[0].answer.length == 0">暂无答案</span>
                        </p>     
                        <p class="answer-label">解析：</p>
                        <p class="answer-detail"  v-if="questionExplain.length > 0">
                            <span v-html="questionExplain[0].explain == null ? '暂无解析' : questionExplain[0].explain"></span>
                        </p>
                        <div class="question-control-wrap">
                            <Icon type="md-trash" class="question-control-btn" size="25" title="删除" v-if="config.showDelete" @click="deleteQuestion(index)" />
                            <Icon type="ios-link" class="question-control-btn" size="25" title="补救资源" v-if="config.showRemedy" />
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</template>
<script>
    import Loading from '@/common/Loading.vue'
    export default {
        props: {
            questions: {
                type: Array,
                default: () => {
                    return []
                }
            },
            selQue: {
                type: Array,
                default: () => {
                    return []
                }
            },
            config: {
                type: Object,
                default: () => {
                    return {
                        showSelect: false,
                        showScore: false,
                        showDelete: false,
                        showRemedy: false,
                        editable: false 
                    }
                }
            },
            questionSize: { //最多可选题目数量
                type: Number,
                default: 100
            }
        },
        data() {
            return {
                selectedId: [],
                questionDetail: false,
                openIndex: -1,
                selectedQuestion: [],
                questionExplain: {},
                isLoading: false,
                width:"50"
            }
        },
        compoents: {
            Loading
        },
        methods: {
            calcScore() {
                this.$emit('calcScore')
            },
            //deleteQuestion(index) {
            //    this.$emit('deleteQuestion', this.questions[index])
            //    this.removeId(this.questions[index].id)
            //},
            /**
             * 选择或取消题目
             */
            async selectQuestion(data) {
                let index = this.selectedId.indexOf(data.id)
                if (index == -1) {
                    if (this.selectedId.length >= this.questionSize) {
                        this.$Message.warning('已经超过最多题目数量！')
                    } else {
                        this.selectedId.push(data.id)
                        let que = await this.$evTools.getFullItem([data])
                        console.log('77777777777777777')
                        console.log(que)
                        this.selectedQuestion.push(que[0])
                        this.$emit('on-question-change', this.selectedQuestion,1)
                    }
                } else {
                    this.selectedId.splice(index, 1)
                    this.selectedQuestion.splice(index, 1)
                    this.$emit('on-question-change', this.selectedQuestion,0)
                }
            },
            //groupBy(array, key) {
            //    const groups = {}
            //    array.forEach(function (item) {
            //        const group = JSON.stringify(item[key])
            //        groups[group] = groups[group] || []
            //        groups[group].push(item)
            //    })
            //    return Object.keys(groups).map(function (group) {
            //        return groups[group]
            //    })
            //},
            async toglleQuestionDetail(index) {
                this.isLoading = true
                this.questionExplain = {}
                console.log(this.questions[index])
                this.questionExplain = await this.$evTools.getFullItem([this.questions[index]])
                console.log(this.questionExplain)
                if (this.questionExplain.length > 0) {
                    setTimeout(() => {
                        this.isLoading = false
                    }, 300)
                }
                if (index == this.openIndex) {
                    this.openIndex = -1
                } else {
                    this.openIndex = index
                }
            }
        },
        watch: {
            selQue: {
                handler(o, n) {
                    this.selectedId = this.selQue.map((item) => {
                        return item.id
                    })
                }, 
                deep: true,
				immediate:true
            }
        }
    }
</script>
<style scoped lang="less">
    @import "./QuestionList.less";
</style>
<style>
    .question-detail .ivu-input-number {
        border: none;
        border-radius: 0px;
        border-bottom: 1px solid #aaaaaa;
    }
    .question-text p {
        display: inline-block !important;
    }
</style>
