<template>
    <div>
        <a-drawer placement="right" :closable="false" :visible="visible" :after-visible-change="afterVisibleChange"
            :bodyStyle="{'padding':0,}" @close="onClose">
            <span slot="title" class="d-title">
                我的试卷
            </span>
            <div class="border-box" style="columns: #333333;font-weight: bold;">题卡</div>
            <div class="border-box flex-items">
                <span class="text-title" style="width:50px">标题：</span>
                <!-- <span>2020年12月16日xx学校高中xx试卷</span> -->
                <a-input v-model="testName" placeholder="请输入试卷标题" style="flex:1" />
            </div>
            <div class="border-box flex-items">
                <span class="text-title" style="width:80px">考试时间：</span>
                <!-- <span>2020年12月16日xx学校高中xx试卷</span> -->
                <a-input-number id="inputNumber" v-model="testTime" style="flex:1" :min="0" />
                <span>分钟</span>
            </div>
            <div class="border-box gray-text">
                共{{$store.state.storage.testBox.length}}题
            </div>
            <div v-for="item in groupQuestion">
                <div class="border-box flex-align">
                    <div class="text-title">{{item.name}}<span class="gray-text">({{item.data.length}}题)</span></div>
                    <a @click="delByQuestiontype(item)">移除</a>
                </div>
                <div v-for="v in item.dataGroup" class="border-box flex-align">
                    <div class="d-left nly-line-1">{{v.name}}</div>
                    <div class="flex">
                        <div class="m-r8"><span class="blue-text">{{v.data.length}}</span>题</div>
                        <a @click="delBySubject(v,item)">移除</a>
                    </div>
                </div>
            </div>
            <a-button class="preview-btn" :loading="loading" @click="_PaperCreate">
                创建试卷
            </a-button>
        </a-drawer>
    </div>
</template>
<script>
    import { groupArr } from '@/utils/tools'
    import { PaperCreate } from '@/api/api'
    export default {
        data() {
            return {
                loading: false,
                visible: false,
                testName: '',
                testTime: '',
            }
        },
        computed: {
            groupQuestion() {
                let arr = groupArr(this.$store.state.storage.testBox, 'disciplineQuestionTypeId', 'disciplineQuestionType')
                arr = arr.map(item => {
                    item.dataGroup = groupArr(item.data, 'disciplineId', 'discipline');
                    return item
                });
                console.log(arr, 'arr')
                return arr;
            }
        },
        mounted() {

        },
        methods: {
            //创建试卷
            _PaperCreate() {
                if (!this.testName) {
                    this.$message.error('请填写试卷名称！');
                    return;
                }
                if (!this.testTime) {
                    this.$message.error('请填写考试时间！');
                    return;
                }
                let testBox = this.$store.state.storage.testBox;
                if (testBox.length == 0) {
                    this.$message.error('试卷试题不能为空！');
                    return;
                }
                this.loading = true;
                console.log(testBox, 'testBox')
                let disciplines = [], paperQuestions = [];
                testBox.forEach(item => {
                    if (disciplines.indexOf(item.disciplineId) == -1) {
                        disciplines.push(item.disciplineId)
                    }
                    let obj = {
                        questionId: item.id,
                        disciplineQuestionTypeId: item.disciplineQuestionTypeId,
                        singleScore: 0
                    }
                    paperQuestions.push(obj)
                })
                console.log(disciplines, 'disciplines')
                console.log(paperQuestions, 'paperQuestions')
                let data = {
                    name: this.testName,
                    examTime: this.testTime * 60 * 1000,
                    disciplines: disciplines,
                    paperQuestions: paperQuestions
                }
                console.log(data, 'data')
                PaperCreate(data).then(res => {
                    this.$message.success('创建成功！')
                    this.loading = false;
                    this.visible = false;
                    this.$storage.remove('testBox');
                    this.testName = '';
                    this.testTime = '';
                    this.$router.push({
                        name: 'examPaperPreview',
                        query: {
                            examId: res
                        }
                    })
                }).catch(err => {
                    this.loading = false;
                })
            },
            //删除-题型的题
            delByQuestiontype(data) {
                let testBox = this.$store.state.storage.testBox;
                testBox = testBox.filter(item => {
                    return item.disciplineQuestionTypeId != data.type;
                })
                this.$storage.set('testBox', testBox);
            },
            //删除-根据学科和题型
            delBySubject(subject, type) {
                console.log(subject, 'subject')
                let testBox = this.$store.state.storage.testBox;
                testBox = testBox.filter(item => {
                    return item.disciplineQuestionTypeId != type.type && item.disciplineId != subject.type;
                })
                this.$storage.set('testBox', testBox);
            },
            afterVisibleChange(val) {
                console.log('visible', val);
            },
            showDrawer() {
                this.visible = true;
            },
            onClose() {
                this.visible = false;
            },
            toPath() {
                this.$router.push({
                    name: 'examPaperPreview'
                })
            }
        }
    }
</script>
<style scoped>
    .d-title {
        color: #40a9ff;
        font-weight: bold;
        font-size: 18px;
    }

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

    .gray-text {
        color: #7f7f7f;
    }

    .blue-text {
        color: rgb(24, 144, 255);
    }

    .d-left {
        width: 60%;
    }

    .preview-btn {
        width: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(24, 144, 255);
        color: #fff;
        margin: 32px auto;
        cursor: pointer;
    }
</style>