<template>
    <div style="margin-right: 20px;width: 100%">
        <el-row class="row-type">
            <label>阶段报表类型</label>
            <el-select class="opration-select" v-model="currentType" style="margin-left: 10px;">
                <el-option v-for="(item, index) in types" :lable="item" :key="index" :value="item" />
            </el-select>
        </el-row>
        <el-row class="row-type" style="margin-top: 10px;">
            <el-table v-if="$props.params" class="default-table" :data="listReport">
                <el-table-column prop="subjectName" label="科目" width="100" />
                <el-table-column prop="paperName" label="试卷名称"   />
                <el-table-column prop="classCorrectRate" label="已考班级">
                    <template slot-scope="scoped">
                        <el-checkbox-group v-model="scoped.row.checkedClassList">
                            <el-checkbox :key="index" v-for="(item, index) in scoped.row.classInfos" :label="item.classId">
                                {{ item.className }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-table-column>
                <el-table-column prop="score" label="卷面分" width="100" />
                <el-table-column label="操作" width="100">
                    <template slot-scope="scoped">
                        <el-button type="text" @click="_linkToDetail(scoped.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>
<script>
export default {
    name: "testMultiClassReport",
    props: {
        params: null
    },
    async created() {
        this.role =
            this.$store.getters.info.showRole ||
            this.$store.getters.info.permissions[0].role;

        await this._loadDatas();
    },
    watch: {
        async 'currentType'(value) {
            await this._loadDatas();
        }
    },
    methods: {
        _linkToDetail(dataRow) { 
            this.$router.push({
                path: "/testReportDetail",
                query: {
                    dataType: 3,
                    classIds: dataRow.checkedClassList.join(","),
                    id: dataRow.paperId,
                    title: dataRow.paperName,
                    subjectName: dataRow.subjectName,
                    diffType: this.currentType,
                },
            });
        },
        async _loadDatas() {
     
            var dataRequestParams = {
                classIds: this.$props.params.class ? [this.$props.params.class] :
                    this.$props.params.classIds ? [...this.$props.params.classIds] : null,
                diffType: this.currentType == "任课班级对比" ? "1" : "0",
                end: this.$props.params.dataRange ? this.$props.params.dataRange[1] : null,
                start: this.$props.params.dataRange ? this.$props.params.dataRange[0] : null,
                subjects: this.$props.params.subject ? [this.$props.params.subject] :
                    this.$props.params.subjects ? [...this.$props.params.subjects] : null
            };
           
            var dataRequest = this.$request.tListExamReport;


            var dataResponse = await dataRequest({ ...dataRequestParams });

            if (dataResponse.status != 0) {
                this.$message.error(response.info);
                return;
            }

            this.listReport = dataResponse.data.map(item => {
                item.checkedClassList = item.classInfos.map(item => item.classId);
                return item;
            })
        },
    },
    data() {
        return {
            listReport: [],
            role: "",
            types: ["任课班级对比", "年级对比"],
            currentType: "任课班级对比",
        };
    },
};
</script>
<style scoped></style>
