<template>
    <div>
        <el-card shadow="hover" class="mgb20">
            <div class="flex-between" style="margin-bottom: 10px">
                <div class="per_title" v-preventReClick @click="goback()">
                    <i class="el-icon-arrow-left"></i>
                    <span class="per_back">返回</span>
                    <span class="per_school">{{experimentalName}}</span>
                </div>
            </div>
            <!-- <div class="tabs">
                <a class="item" v-for="(item,index) in classList" :key="index" :class="{active: item.classId == classId}" @click="tabChange(item.classId)">{{item.className}}</a>
            </div> -->
        </el-card>

        <el-card shadow="hover" class="mgb20">
            <div class="stat">
                <div class="cka-Overview">
                    <div class="newPractice-card">
                        <div class="newPractice-card-other">
                            <p style="font-size:18px">实验总人数</p>
                            <p style="font-size:36px">{{totals}}</p>
                        </div>
                        <div class="newPractice-card-other"> 
                            <p style="font-size:18px">实验平均分</p>
                            <p style="font-size:36px">{{avg}}</p>
                        </div>
                    </div>
                </div>
                <div class="chart" id="chart"></div>
            </div>
        </el-card>

        <el-card shadow="hover" class="mgb20">
            <div class="flex-between mgb20">
                <div>
                    <el-button type="primary" size="small" @click="delAllData">批量删除</el-button>
                    <el-button type="primary" size="small" @click="exportData">导出</el-button>
                </div>
                <div>
                    <el-input placeholder="请输入学校/学生姓名" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>
                </div>
            </div>

            <el-tabs v-model="isRead" @tab-click="getData">
                <el-tab-pane :label="'全部（' + totals + '）'" name="1"></el-tab-pane>
                <el-tab-pane :label="'已批阅（' + already + '）'" name="2"></el-tab-pane>
                <el-tab-pane :label="'待批阅（' + not + '）'" name="3"></el-tab-pane>
            </el-tabs>

            <el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="reportId">
                <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
                <el-table-column type="index" width="100" label="序号" align="center">
                    <template slot-scope="scope">
                        {{scope.$index + (pageNo - 1) * pageSize + 1}}
                    </template>
                </el-table-column>
                <el-table-column prop="schoolName" label="学校" align="center">
                </el-table-column>
                <el-table-column prop="class" label="班级" align="center">
                    <template slot-scope="scope">
                        {{classList.length ? classList.find(n => n.classId == classId).className : ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="学生姓名" align="center"></el-table-column>
                <el-table-column prop="workNumber" label="学号" align="center"></el-table-column>
                <el-table-column prop="score" label="分数" align="center"></el-table-column>
                <el-table-column prop="creationTime" label="提交时间" align="center">
                </el-table-column>
                <el-table-column prop="experimentalName" label="批阅状态" align="center">
                    <template slot-scope="scope">
                        {{reviewList.find(n => n.id == scope.row.isRead).name}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="220">
                    <template slot-scope="scope">
                        <el-button type="text" @click="edit(scope.row)">批阅</el-button>
                        <el-button type="text" @click="show(scope.row)">查看成绩报告</el-button>
                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
    name: 'experiment',
    data() {
        return {
            id: this.$store.state.experimentData.id,
            projectName: this.$store.state.experimentData.name,
            experimentalName: this.$store.state.experimentData.experimentalName,
            className: this.$store.state.experimentData.class,
            projectId: this.$store.state.experimentData.projectId,
            classList: this.$store.state.experimentData.classList,
            classId: '',
            isRead: '1',
            keyword: '',
            listDataAll: [],
            listData: [],
            multipleSelection: [],
            pageNo: 1,
            pageSize: 10,
            totals: 0,
            avg: 0,
            already: 0,
            not: 0,
            reviewList: [
                {
                    id: 1,
                    name: '已批阅'
                },{
                    id: 0,
                    name: '待批阅'
                }
            ]
        };
    },
    mounted() {
        this.classId = this.classList[0].classId
        this.getData()
    },
    methods: {
        getData() {
            let data = {
                id: this.id,
                classId: this.classId,
                isRead: this.isRead == 1 ? '' : (this.isRead == 2 ? 0 : 1), //全部：''，已批阅：0，待批阅：1
                searchContent: this.encodeString(this.keyword),
            }
            this.$get(this.api.getKdAchievement,data).then(res => {
                let list = res.data
                let score = 0
                let already = 0
                let not = 0
                list.map(n => {
                    n.class = this.className
                    score += n.score
                    if(!n.isRead){
                        already++
                    }else{
                        not++
                    }
                })
                this.already = already
                this.not = not

                this.listDataAll = list
                this.handlePage()
                this.totals = list.length
                this.avg = score ? (score / list.length).toFixed(2) : 0
                this.getChart()
            }).catch(res => {});
        },
        handlePage(){
            let list = this.listDataAll
            this.listData = list.slice((this.pageNo - 1) * this.pageSize,this.pageNo * this.pageSize)
            this.totals = list.length
        },
        tabChange(classId){
            this.classId = classId
            this.getData()
        },
        edit(row){
            this.$router.push(`/showExperiment?id=${row.reportId}&studentId=${row.userId}&userName=${row.userName}&edit=1`)
        },
        show(row){
            this.$router.push(`/showExperiment?id=${row.reportId}&studentId=${row.userId}&userName=${row.userName}`)
        },
        exportData(){
            if(!this.listData.length) return false
            let selected = this.multipleSelection
            let exportList = []
            if(selected.length){
                exportList = selected.map(item => {
                    return item.reportId
                })
            }else{
                exportList = this.listData.map(item => {
                    return item.reportId
                })
            }
            window.open(`${this.api.exportAchievement}?reportIds=${exportList.join(',')}&source=3`)
        },
        handleDelete(row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
            .then(() => {
                this.$post(`${this.api.deleteReportByIds}?ids=${row.reportId}`).then(res => {
                    this.$message.success('删除成功');
                    this.getData()
                }).catch(res => {});
            })
            .catch(() => {});
        },
        delAllData() {
            if(this.multipleSelection.length != ''){
                let newArr = this.multipleSelection
                let delList = newArr.map(item => {
                    return `ids=${item.reportId}`
                })
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    this.$post(`${this.api.deleteReportByIds}?${delList.join('&')}`).then(res => {
                        this.$refs.table.clearSelection()
                        this.$message.success('删除成功')
                        this.getData()
                    }).catch(res => {})
                })
                .catch(() => {});
            }else{
                this.$message.error('请先选择数据 ！');
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleCurrentChange(val) {
            this.pageNo = val;
            this.handlePage();
        },
        getChart(){
            let data = [0,0,0,0,0,0,0,0,0,0]
            let list = this.listDataAll
            list.map(n => {
                n.score
                if(n.score >= 0 && n.score <= 10){
                    data[0]++
                }else if(n.score > 10 && n.score <= 20){
                    data[1]++
                }else if(n.score > 20 && n.score <= 30){
                    data[2]++
                }else if(n.score > 30 && n.score <= 40){
                    data[3]++
                }else if(n.score > 40 && n.score <= 50){
                    data[4]++
                }else if(n.score > 50 && n.score <= 60){
                    data[5]++
                }else if(n.score > 60 && n.score <= 70){
                    data[6]++
                }else if(n.score > 70 && n.score <= 80){
                    data[7]++
                }else if(n.score > 80 && n.score <= 90){
                    data[8]++
                }else if(n.score > 90 && n.score <= 100){
                    data[9]++
                }
            })
            let myChart = echarts.init(document.getElementById('chart'))
            myChart.setOption({
                title: { text: '实验分数分布图' },
                tooltip: {},
                xAxis: {
                    name: '分数',
                    type: 'category',
                    data: ['0-10', '11-20', '21-30', '31-40', '41-50', '51-60', '61-70', '71-80','81-90','91-100']
                },
                yAxis: {
                    name: '人数',
                    type: 'value'
                },
                series: [{
                    data,
                    type: 'bar',
                    color: ['#8191fd']
                }]
            })
        },
        goback() {
            this.$router.back()
        },
    }
};
</script>

<style lang="scss" scoped>
.mag{
    margin-right: 20px;
}
/deep/.el-tabs__nav-wrap::after{
    display: none;
}
.stat{
    display: flex;
    .chart{
        flex: 1;
        height: 300px;
    }
}
.cka-Overview {
    width: 600px;
    margin-right: 20px;
    p {
        font-size: 20px;
    }
    .newPractice-card {
        display: flex;
        align-items: center;
        height: 100%;
        .newPractice-card-other:nth-child(1) {
            background-image: url('../../assets/img/total.png');
        }
        .newPractice-card-other:nth-child(2) {
            background-image: url('../../assets/img/avg.png');
        }

        .newPractice-card-other {
            width: 300px;
            padding: 30px 30px;
            margin: 0 10px;
            box-sizing: border-box;
            border-radius: 8px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            p {
                font-size: 18px;
                color: #ffffff;
            }
            p:last-child {
                margin-top: 10px;
                color: #ffffff;
                font-size: 26px;
            }
        }
    }
}
.tabs{
    display: flex;
    align-items: center;
    padding: 20px 0;
    margin: 0;
    z-index: 999;
    background-color: #fff;
    .item{
        padding: 12px 20px;
        margin-right: 10px;
        color:#606266;
        line-height: 1;
        border-radius: 4px;
        background-color: #fff;
        border: 1px solid #dcdfe6;
        cursor: pointer;

        &.active{
            color: #fff;
            background-color: #9278ff;
            border-color: #9278ff;
        }
    }
}
</style>

