<template>
    <div class="grade-table dark-iview-table">
        <Table border :columns="columns" :data="studentPageData"  class="dark-iview-page">
            <template slot-scope="{ row, index }" slot="action">
                <Button type="success" size="small" style="margin-right: 5px" @click="fixScore(row)">修改</Button>
            </template>
        </Table>
        <div style="width:100%;text-align:center;margin-top:20px;" class="dark-iview-page">
            <Page :total="studentList.length" size="small" :current.sync="currentPage" :page-size="pageSize" show-sizer show-total @on-change="getPageData" @on-page-size-change="getPageData($event,'size')" />
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            studentData: {
                type: Array,
                default: () => {
                    return []
                }
            },
        },
        data() {
            return {
                pageSize: 60,
                currentPage: 1,
                columns: [
                    {
                        title: '姓名',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: '总分',
                        key: 'score',
                        align: 'center'
                    },
                    {
                        title: '选择题得分',
                        key: 'autoQue',
                        align: 'center'
                    },
                    {
                        title: '主观题得分',
                        key: 'manualQue',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                studentList: [],
                studentPageData:[]
            }
        },
        methods:{
            getData() {
                this.studentList = this.studentData
            },
            fixScore(data) {
                console.log(data)
                if (data !== undefined) {
                    this.$emit('fixScore',data)
                }
            },
            getPageData(number, type) {  //分页
                let starIndex = this.pageSize * (this.currentPage - 1)
                let endIndex = this.pageSize * this.currentPage > this.studentList.length ? this.studentList.length : this.pageSize * this.currentPage
                this.studentPageData = this.studentList.slice(starIndex, endIndex)
            },
        },
        mounted() {
            this.getData()
            this.getPageData()
        },
        watch: {
            studentData(newValue, oldValue) {
                deep: true
                this.getData()
                this.getPageData()
            }
        }
    }
</script>
<style scoped >
    .grade-table{
        width:calc(100% - 10px);
    }
</style>