<template>
    <div class="learn-progress-container">
        <div class="learn-progress-main dark-iview-table">
            <vuescroll>
                <p style="color:#EEEEEE;padding-left:15px;font-size:16px;margin-top:15px;">活动进度概览</p>
                <div class="whole-progress-wrap">
                    <div class="progress-histogram-wrap" style="margin:auto;">
                        <!--<ProgressHistogram :countData="countData" @clickStep="clickStep"></ProgressHistogram>-->
                    </div>
                </div>
                <p style="color:#EEEEEE;padding-left:15px;font-size:16px;margin-top:50px;margin-bottom:30px;">
                    学生进度概览
                </p>
                <div class="learn-progress-filter dark-iview-select">
                    <span class="filter-label">搜学生：</span>
                    <Select v-model="model11" filterable style="display: inline-block;width: 200px;" size="small">
                        <Option v-for="item in studentList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </div>
                <Table :columns="studentColumns" :data="studentPageData" :show-header="true" style="margin:0px 25px;" no-data-text="此班暂无学生">
                    <template slot-scope="{ row, index }" slot="isComplete">
                        <Icon size="20" type="md-checkmark" color="aqua" v-if="row.isComplete == 1" />
                        <span v-else>--</span>
                    </template>
                    <template slot-scope="{ row, index }" slot="progress">
                        <Progress :percent="50" status="normal" />
                    </template>
                    <template slot-scope="{ row, index }" slot="question">
                        <div>
                            <span title="提问/留言 次数">
                                <Icon type="ios-create" size="16"/>5
                            </span>
                            <span style="color:rgb(45, 241, 142);margin-left:10px;">
                                <Icon type="md-thumbs-up" />32
                            </span>
                            <span style="color:#f90;margin-left:10px;">
                                <Icon type="md-thumbs-down" />10
                            </span>
                        </div>
                    </template>
                    <template slot-scope="{ row, index }" slot="action">
                        <span @click="goToAnswer" class="to-detail-info">查看详情</span>
                    </template>
                </Table>
                <div style="width:100%;text-align:center;margin-top:20px;" class="dark-iview-page">
                    <Page :total="studentData.length" size="small" :current.sync="currentPage" :page-size="pageSize" show-sizer show-total @on-change="getPageData" @on-page-size-change="getPageData($event,'size')"/>
                </div>
            </vuescroll>
        </div>
    </div>
</template>
<script>
    //import ProgressHistogram from '@/view/learnactivity/ProgressHistogram.vue'
    export default {
        components: {
            //ProgressHistogram
        },
        data() {
            return {
                countData: {
                    xAxisData: ['一次函数初阶', '一次函数进阶', '一次函数高阶', '一次函数总结'],
                    seriesData: [42, 29, 19, 5],
                    studentCount: 50
                },
                pageSize: 10,
                currentPage:1,
                dataIndex: 1,
                model11: '',
                currentView: 0,
                studentList: [],
                classroomList: [],
                data: [
                    {
                        name: '一次函数基础',
                        progress: 50
                    },
                    {
                        name: '一次函数进阶',
                        progress: 50,

                    },
                    {
                        name: '一次函数高阶',
                        progress: 50,

                    },
                    {
                        name: '一次函数总结',
                        progress: 50,
                    },
                ],
                studentData: [],
                studentPageData:[],
                studentColumns: [
                    {
                        title: '姓名',
                        key: 'name',
                        width:180
                    },
                    {
                        title: '学习进度',
                        slot: 'progress',
                        width: 200,
                        align: 'center'
                    },
                    {
                        title: '提问/留言',
                        slot: 'question',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 100
                    }

                ],
            }
        },
        methods: {
            clickStep(data) {
                this.dataIndex = data.dataIndex
            },
            setCurrentView(index) {
                this.currentView = index
            },
            getPageData(number, type) {
                if (type == 'size') {
                    this.pageSize = number
                }
                let starIndex = this.pageSize * (this.currentPage - 1)
                let endIndex = this.pageSize * this.currentPage > this.studentData.length ? this.studentData.length : this.pageSize * this.currentPage
                this.studentPageData = this.studentData.slice(starIndex, endIndex)
            },
            goToAnswer() {
                this.$emit('goToAnswer')
            }
        },
        created() {
            this.getPageData()
        }
    }
</script>
<style scoped lang="less">
    @import "./LearnProgress.less";
</style>
<style>

</style>