<template>
    <div>
        <a-drawer placement="right" width="300" :closable="false" :visible="visible"
            :after-visible-change="afterVisibleChange" :bodyStyle="{'padding':0,}" @close="onClose">
            <span slot="title" class="flex-align d-title">
                <span>试卷分析</span>
                <a-icon type="double-right" class="title-icon" @click="onClose" />
            </span>
            <div class="border-box flex">
                <div>
                    总题量：{{totalCount}}
                </div>
                <div>
                    总分值：{{examBox.totalScore}}
                </div>
            </div>
            <div class="table-box">
                <div class="box-border">
                    <a-row>
                        <a-col :span="8"></a-col>
                        <a-col :span="8">分值</a-col>
                        <a-col :span="8">题量</a-col>
                    </a-row>
                </div>
                <!-- 学科 -->
                <div class="not-top-border">
                    <a-row class="row-title">学科：</a-row>
                    <a-row v-for="item in examBox.disciplines" :key="item.id">
                        <a-col :span="8">{{item.name}}</a-col>
                        <a-col :span="8">{{item.totalScore}}</a-col>
                        <a-col :span="8">{{item.totalCount}}</a-col>
                    </a-row>
                </div>
                <!-- 章节 -->
                <div class="not-top-border">
                    <a-row class="row-title">{{examBox.paperCompositionModel==0?'章节':'知识点'}}：</a-row>
                    <a-row v-for="(item,index) in vArr" :key="index">
                        <a-col :span="8">{{item.name}}</a-col>
                        <a-col :span="8">{{item.score}}</a-col>
                        <a-col :span="8">{{item.count}}</a-col>
                    </a-row>
                </div>
                <!-- 题型 -->
                <div class="not-top-border">
                    <a-row class="row-title">题型：</a-row>
                    <div v-for="(item,index) in iArr" :key="index">
                        <a-row>
                            <span style="margin-left: 16px;font-weight: bold;">{{item.name}}</span>
                        </a-row>
                        <a-row v-if="item.QuestionType.length>0" v-for="v in item.QuestionType" :key="v.id">
                            <a-col class="only-line-1" :span="8">{{v.name||''}}</a-col>
                            <a-col class="only-line-1" :span="8">{{v.totalScore||0}}</a-col>
                            <a-col class="only-line-1" :span="8">{{v.count||0}}</a-col>
                        </a-row>
                        <span v-if="item.QuestionType.length==0" style="margin-left: 16px;">无题型</span>
                    </div>
                </div>
            </div>
        </a-drawer>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                visible: false,
                examBox: {
                    disciplines: []
                },
                totalCount: 0
            }
        },
        computed: {
            //章节或知识点列表
            vArr() {
                let arr = [];
                this.examBox.disciplines.forEach(item => {
                    arr.push(...item.groupArr)
                })
                return arr
            },
            //题型列表
            iArr() {
                let arr = [];
                this.examBox.disciplines.forEach(item => {
                    let obj = {
                        name: item.name,
                        QuestionType: []
                    }
                    item.groupArr.forEach(v => {
                        if (v.QuestionType.length > 0) {
                            obj.QuestionType = [...obj.QuestionType, ...v.QuestionType]
                        }
                    })
                    arr.push(obj)
                })
                console.log(arr, 'arrr66')
                return arr;
            },
            totalCount66() {
                // let num = 0;
                // this.examBox.disciplines.forEach(item => {
                //     if (item.totalCount && item.totalCount != null) {
                //         num += item.totalCount;
                //     }
                // })
                // return num;
                return this.examBox.disciplines.reduce((total, item) => {
                    if (item.totalCount) {
                        return total += item.totalCount;
                    } else {
                        return total
                    }
                }, 0)
            }
        },
        mounted() {

        },
        methods: {
            afterVisibleChange(val) {
                console.log('visible', val);
                console.log(this.examBox, 'this.examBox')
            },
            showDrawer(data) {
                this.examBox = data;
                this.totalCount = this.examBox.disciplines.reduce((total, item) => {
                    if (item.totalCount) {
                        return total += item.totalCount;
                    } else {
                        return total
                    }
                }, 0)
                this.visible = true;
            },
            onClose() {
                this.visible = false;
            },
        }
    }
</script>
<style scoped>
    .d-title {
        color: #40a9ff;
        font-weight: bold;
        font-size: 18px;
    }

    .title-icon {
        cursor: pointer;
    }

    .border-box {
        color: #333333;
        border-bottom: 1px solid rgba(232, 232, 232, 1);
        padding: 8px 16px;
    }

    .border-box>div {
        width: 50%;
    }

    .table-box {
        padding: 16px;
    }

    .box-border {
        border: 1px solid #333333;
    }

    /deep/.ant-col-8 {
        text-align: center;
        line-height: 36px;
        word-break: break-all;
        /* break-all(允许在单词内换行。) */
        text-overflow: ellipsis;
        /* 超出部分省略号 */
        display: -webkit-box;
        /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical;
        /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .not-top-border {
        border: 1px solid #333333;
        border-top: none;
    }

    .row-title {
        font-weight: bolder;
        padding: 4px;
    }
</style>