<template>
    <div class="xueqing-container">
        <vuescroll :ops="options">
            <div class="top-block-wrap">
                <div class="content-con-item" v-for="(item,index) in topData" :key="index">
                    <div class="left-area" :style="{background: item.color, width: '36%'}">
                        <Icon :type="item.icon" class="icon" style="font-size: 40px; color: rgb(255, 255, 255);"></Icon>
                    </div>
                    <div class="right-area" style="width: 64%;">
                        <div>
                            <div class="count-to-wrapper">
                                <p class="content-outer">
                                    <CountTo class="count-to-count-text count-style" :endVal="item.number" :duration="600"></CountTo>
                                    <span style="font-size: 28px;" v-if="item.type === 'rate'">%</span>
                                </p>
                            </div>
                            <p>{{item.text}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="class-hours-table">
                <div class="table-tools-wrap">
                    <Input v-model="keyword" search placeholder="搜索" style="width:200px" @on-change="serchData" />
                    <Button type="text" style="float:right" @click="exportData">
                        <Icon type="md-download" />
                        数据导出
                    </Button>
                </div>
                <Table :columns="columns1" :data="hourDataShow" :loading="loading" :height="600">
                    <template slot-scope="{ row }" slot="online">
                        <span>{{ row.onlineTime + '/20' }}</span>
                    </template>
                    <template slot-scope="{ row }" slot="offline">
                        <span>{{ row.offlinelTime + '/10' }}</span>
                    </template>
                    <template slot-scope="{ row }" slot="assessment">
                        <span>{{ row.schoolScoreTime+ '/15' }}</span>
                    </template>
                    <template slot-scope="{ row }" slot="classRecord">
                        <span>{{ row.classVideoTime + '/5'}}</span>
                    </template>
                    <template slot-scope="{ row }" slot="allHour">
                        <span>{{ row.alltime + '/50' }}</span>
                    </template>
                    <template slot-scope="{ row }" slot="status">
                        <span :style="{color:row.alltime < 50 ? '#ed4014':'#19be6b'}">
                            {{ row.alltime < 50 ? '未完成' : '已完成' }}
                        </span>
                    </template>
                </Table>
            </div>
        </vuescroll>
    </div>
</template>
<script>
import excel from '@/utils/excel.js'
import CountTo from 'vue-count-to'
export default {
    components: {
        CountTo
    },
    data() {
        return {
            options: {
                bar: {
                    opacity:0
                }
            },
            keyword: '',
            loading: false,
            curTab: 0,
            topData: [
                {
                    icon: 'ios-people',
                    color: '#2d8cf0',
                    number: 0,
                    text: '参训人数',
                    type: 'num'
                },
                {
                    icon: 'md-cube',
                    color: '#2db7f5',
                    number: 0,
                    text: '参训率',
                    type: 'rate'
                },
                {
                    icon: 'md-bookmark',
                    color: '#5cadff',
                    number: 0,
                    text: '合格人数',
                    type: 'num'
                },
                {
                    icon: 'md-thumbs-up',
                    color: '#ff9900',
                    number: 0,
                    text: '合格率',
                    type: 'rate'
                },
                {
                    icon: 'md-checkmark-circle',
                    color: '#19be6b',
                    number: 0,
                    text: '完成率',
                    type: 'rate'
                }

            ],
            columns1: [
                {
                    title: '教师姓名',
                    key: 'tmdname'
                },
                {
                    title: '线上研修',
                    slot: 'online',
                    align: 'center'
                },
                {
                    title: '校本研修',
                    slot: 'offline',
                    align: 'center'
                },
                {
                    title: '应用考核',
                    slot: 'assessment',
                    align: 'center'
                },
                {
                    title: '课堂实录',
                    slot: 'classRecord',
                    align: 'center'
                },
                {
                    title: '总学时',
                    slot: 'allHour',
                    align: 'center'
                },
                {
                    title: '完成状态',
                    slot: 'status',
                    align: 'center'
                }
            ],
            hourData: [],
            hourDataShow: [],
        }
    },
    methods: {
        exportData() {
            let downloadData = this.hourData.map(item => {
                return {
                    tmdname: item.tmdname,
                    onlineTime: item.onlineTime,
                    offlinelTime: item.offlinelTime,
                    schoolScoreTime: item.schoolScoreTime,
                    classVideoTime: item.classVideoTime,
                    alltime: item.alltime,
                    status: item.alltime < 50 ? '未完成' : '已完成'
                }
            })
            const params = {
                title: this.columns1.map(i => i.title),
                key: ['tmdname', 'onlineTime', 'offlinelTime', 'schoolScoreTime', 'classVideoTime', 'alltime', 'status'],
                data: downloadData,
                autoWidth: true,
                filename: '学时统计'
            }
            excel.export_array_to_excel(params)
        },
        serchData() {
            this.hourDataShow = this.hourData.filter(item => {
                return item.tmdname.includes(this.keyword) || item.groupName.includes(this.keyword)
            })
        },
        findTotalData() {
            this.loading = true
            let params = {
                school: this.$store.state.userInfo.schoolCode
            }
            this.$api.ability.FindTotalData(params).then(
                res => {
                    if (!res.error) {
                        let data = []
                        //参训人数
                        data.push(res.joinCount)
                        // 参训率
                        data.push(parseFloat((res.joinCount * 100 / res.teacherCount).toFixed(2)))
                        // 合格人数
                        data.push(res.ok50TimeCount)
                        // 合格率
                        data.push(parseFloat((res.ok50TimeCount * 100 / res.joinCount).toFixed(2)))
                        // 完成率
                        data.push(0)
                        this.topData.forEach((item, index) => {
                            item.number = data[index]
                        })
                        this.hourData = res.groupMembers
                        this.hourDataShow = this.hourData
                    }
                },
                err => {

                }
            ).finally(() => {
                this.loading = false
            })
        }
    },
    created() {
        this.findTotalData()
    }
}
</script>
<style lang="less" scoped>
@import "./Hour.less";
</style>