<template>
    <div>
        <el-card shadow="hover" class="m-b-20">
            <div class="flex-between m-b-10">
                <el-page-header @back="goBack" :content="experimentName"></el-page-header>
            </div>
            <el-form label-width="100px">
                <div class="flex-between">
                    <div></div>
                    <div>
                        <el-input size="small" placeholder="请输入学校/学生姓名" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>
                    </div>
                </div>
            </el-form>
        </el-card>

        <el-card shadow="hover" class="m-b-20">
            <div class="stat">
                <div class="nums">
                    <div class="item">
                        <p class="name">实验总人数</p>
                        <p class="val">{{total}}</p>
                    </div>
                    <div class="item"> 
                        <p class="name">实验平均分</p>
                        <p class="val">{{avg}}</p>
                    </div>
                </div>
                <div class="chart" id="chart"></div>
            </div>
        </el-card>

        <el-card shadow="hover" class="m-b-20">
            <div class="flex-between m-b-20">
                <div>
                    
                </div>
                <div>
                    <el-button type="primary" size="small" @click="delAllData">批量删除</el-button>
                    <el-button type="primary" size="small" @click="exportData">导出</el-button>
                </div>
            </div>
            <el-table :data="listData" class="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 + (page - 1) * pageSize + 1}}
                    </template>
                </el-table-column>
                <el-table-column prop="schoolName" label="学校" align="center">
                </el-table-column>
                <el-table-column v-if="className" prop="class" label="班级" align="center">
                </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="submitTime" label="提交时间" align="center">
                </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="total" @current-change="handleCurrentChange" :current-page="page">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import Setting from '@/setting'
import util from '@/libs/util'
import echarts from 'echarts'
export default {
    data() {
        return {
            systemId: this.$route.query.systemId,
            projectId: this.$route.query.id,
            experimentName: this.$route.query.name,
            className: this.$route.query.class,
            keyword: '',
            listDataAll: [],
            listData: [],
            multipleSelection: [],
            page: 1,
            pageSize: 10,
            total: 0,
            avg: 0,
        };
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            let data = {
                projectId: this.projectId
            }
            this.$get(this.api.getImitationAchievement,data).then(res => {
                let list = res.data
                let score = 0
                list.map(n => {
                    n.class = this.className
                    score += n.score
                })
                this.listDataAll = list
                this.handlePage()
                this.total = 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.page - 1) * this.pageSize,this.page * this.pageSize)
            this.total = list.length
        },
        edit(row){
            if(this.systemId == 2 || this.systemId == 3){
                this.$router.push(`addexperiment?id=${row.reportId}&stuId=${row.userId}&studentName=${row.studentName}&class=${row.class}`)
            }else{
                this.$router.push(`addexperiment?id=${row.reportId}`)
            }
        },
        show(row){
            if(this.systemId == 2){
                this.$router.push(`showexperimentOption?id=${row.reportId}&stuId=${row.userId}&studentName=${row.studentName}&class=${row.class}`)
            }else if(this.systemId == 3){
                this.$router.push(`showexperimentOptions?id=${row.reportId}&stuId=${row.userId}&studentName=${row.studentName}&class=${row.class}`)
            }else{
                if(this.class){
                    this.$router.push(`show?id=${row.recordId}&projectId=${this.projectId}&reportId=${row.reportId}`)
                }else{
                    this.$router.push(`show?id=${row.recordId}&type=1`)
                }
            }
        },
        exportData(){
            if(!this.listData.length) return false
            let selected = this.multipleSelection
            let exportList = []
            if(selected.length){
                exportList = selected.map(item => {
                    return item.recordId
                })
            }else{
                exportList = this.listData.map(item => {
                    return item.recordId
                })
            }
            window.open(`${this.api.exportAchievement}?ids=${exportList.join(',')}&projectId=${this.projectId}&source=1`)
        },
        handleDelete(row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
            .then(() => {
                this.$post(`${this.api.deleteReport}?reportId=${row.reportId}&recordId=${row.recordId}`).then(res => {
                    util.successMsg('删除成功')
                    this.getData()
                }).catch(res => {})
            })
            .catch(() => {});
        },
        delAllData() {
            if(this.multipleSelection.length != ''){
                let newArr = this.multipleSelection
                let delList = newArr.map(item => {
                    return `reportId=${item.reportId}`
                })
                let delList1 = newArr.map(item => {
                    return `recordId=${item.recordId}`
                })
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    this.$post(`${this.api.deleteReport}?${delList.join('&')}&${delList1.join('&')}`).then(res => {
                        util.successMsg('删除成功')
                        this.getData()
                    }).catch(res => {})
                })
                .catch(() => {});
            }else{
                util.errorMsg('请先选择数据 ！');
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleCurrentChange(val) {
            this.page = val;
            this.handlePage();
        },
        getChart(){
            let data = [0,0,0,0,0,0,0,0,0,0]
            let list = this.listData
            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',
                    boundaryGap: false,
                    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: 'line',
                    areaStyle: {},
                    color: ['#8191fd']
                }]
            })
        },
        goBack() {
            this.$router.back()
        },
    }
};
</script>

<style lang="scss" scoped>
/deep/.el-tabs__nav-wrap::after{
    display: none;
}
.stat{
    display: flex;
    .nums {
        display: flex;
        align-items: center;
        margin-right: 20px;
        .item:nth-child(1) {
            background-image: url('../../../assets/img/total.png');
        }
        .item:nth-child(2) {
            background-image: url('../../../assets/img/avg.png');
        }

        .item {
            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;
            }
            .val{
                margin-top: 10px;
                color: #ffffff;
                font-size: 36px;
            }
        }
    }
    .chart{
        flex: 1;
        height: 300px;
    }
}
</style>