<template>
    <el-container class="default-body">
        <el-header>
            <div class="default-title">即时测报表</div>
        </el-header>
        <div class="default-filter">
            <!-- <el-input v-model="query.paper" placeholder="搜索试卷" suffix-icon="el-icon-search" class="filter-input"
                type="number" clearable /> -->
            <el-select v-model="query.grade" class="filter-select" placeholder="选择年级">
                <el-option v-for="item in classList" :key="item.grade" :label="item.gradeName" :value="item.grade" />
            </el-select>
            <el-select v-model="query.subject" placeholder="选择科目" class="filter-select">
                <el-option v-for="item in subjectList" :key="item.subjectName" :label="item.subjectName"
                    :value="item.subjectName" />
            </el-select>
            <el-date-picker value-format="yyyy-MM-dd" class="filter-datePicker" v-model="query.dateRange"
                type="daterange" range-separator="-">
            </el-date-picker>
            <el-button type="primary" @click="_serach">
                筛选
            </el-button>
        </div>
        <el-main>
            <div class="default-main">
                <el-table :data="examList" class="default-table">
                    <el-table-column prop="subjectName" label="科目" width="200" />
                    <el-table-column prop="paperName" label="试卷名称" />
                    <el-table-column label="已考班级">
                        <template slot-scope="scope">
                            {{ scope.row?.classInfos?.map(item => item.className)?.join("/") }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="score" label="卷面分" width="200" />
                    <el-table-column width="100" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="_linkToDetail(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-main>
    </el-container>
</template>
<script>
export default {
    data() {
        return {
            classList: [],
            subjectList: [],
            examList: [],
            query: {
                examName: "",
                paper: null,
                grade: null,
                subject: null,
                dateRange: [
                    "2021-03-01", "2025-05-01"
                ]
            },
        }
    },
    async created() {
        await this._loadQueryDatas();
        await this._serach();
    },
    methods: {
        async _serach() {
            const examResponse = await this.$request.gExamListReport({
                end: this.query.dateRange ? this.query.dateRange[1] : null,
                examName: this.query.examName,
                start: this.query.dateRange ? this.query.dateRange[0] : null,
                grade: this.query.grade,
                subjects: [this.query.subject],
            })
            if (examResponse.status != 0) {
                this.$message.error(examResponse.info);
                return;
            }

            this.examList = examResponse.data;

        },
        async _loadQueryDatas() {
            this.$loading.open();
            this.$loading.close();
            const classReponse = await this.$request.gClass();
            if (classReponse.status != 0) {
                this.$loading.close();
                this.$message.error(classReponse.info);
                return;
            }
            this.classList = classReponse.data.list;
            this.query.grade = this.classList[0]?.grade;
            const subjectReponse = await this.$request.gSubjectList("?grade=" + this.query.grade + "&classType=0&status=0")
            if (subjectReponse.status != 0) {
                this.$loading.close();
                this.$message.error(subjectReponse.info);
                return;
            }
            this.subjectList = subjectReponse.data;
            this.query.subject = this.subjectList[0]?.subjectName;
            this.$loading.close();
        },
        _linkToDetail(currentRow) {

            if (!currentRow || !currentRow?.classInfos) {
                this.$message.error('选择对象考试班级为空，请刷新列表');
                return;
            }

            var classListStr = JSON.stringify(currentRow.classInfos);

            var paperId = currentRow.paperId;

            var title = currentRow.paperName;

            let routerItem = {
                path: "/testGradeReportDetail",
                query: {
                    classListStr: classListStr, paperId: paperId, title: title,
                    examIds: currentRow.examIds.join(",")
                },
            };

            this.$router.push(routerItem);
        }
    }
}
</script>
<style></style>