<template>
    <div class="result-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">
                                    <!-- <span class="count-to-count-text count-style">{{item.number}}</span> -->
                                    <CountTo class="count-to-count-text count-style" :endVal="item.number" :duration="600"></CountTo>
                                    <span style="font-size: 28px;" v-if="item.text === '合格率'">%</span>
                                </p>
                            </div>
                            <p>{{item.text}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="result-table-wrap">
                <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="tableDataShow" :loading="loading">
                    <template slot-scope="{ row }" slot="status">
                        <span :style="{color:row.thcSubCount == row.tchSubmitCount ? '#19be6b':'#ed4014'}">
                            {{row.thcSubCount == row.tchSubmitCount ? '已完成' : '未完成'}}
                        </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
                }
            },
            loading: false,
            topData: [
                {
                    icon: 'ios-people',
                    color: '#2d8cf0',
                    number: 0,
                    text: '已评审'
                },
                {
                    icon: 'md-cube',
                    color: '#2db7f5',
                    number: 0,
                    text: '已提交'
                },
                {
                    icon: 'md-bookmark',
                    color: '#5cadff',
                    number: 0,
                    text: '未完成'
                },
                {
                    icon: 'md-thumbs-up',
                    color: '#ff9900',
                    number: 0,
                    text: '未提交'
                },
                {
                    icon: 'md-thumbs-up',
                    color: '#19be6b',
                    number: 0,
                    text: '合格率'
                }
            ],
            tableData: [],
            tableDataShow: [],
            columns1: [
                {
                    title: '教师姓名',
                    key: 'tmdname'
                },
                {
                    title: '教研组',
                    key: 'groupName',
                    align: 'center'
                },
                {
                    title: '能力点个数',
                    key: 'thcSubCount',
                    align: 'center'
                },
                {
                    title: '已提交',
                    key: 'tchSubmitCount',
                    align: 'center'
                },
                {
                    title: '未提交',
                    key: 'tchUnSubmitCount',
                    align: 'center'
                },
                {
                    title: '状态',
                    slot: 'status',
                    align: 'center'
                }
            ],
            keyword: ''
        }
    },
    methods: {
        exportData() {
            let downloadData = this.tableData.map(item => {
                return {
                    tmdname: item.tmdname,
                    groupName: item.groupName,
                    thcSubCount: item.thcSubCount,
                    tchSubmitCount: item.tchSubmitCount,
                    tchUnSubmitCount: item.tchUnSubmitCount,
                    status: item.tchSubmitCount == item.thcSubCount ? '未完成' : '已完成'
                }
            })
            const params = {
                title: this.columns1.map(i => i.title),
                key: ['tmdname', 'groupName', 'thcSubCount', 'tchSubmitCount', 'tchUnSubmitCount', 'status'],
                data: downloadData,
                autoWidth: true,
                filename: '能力点统计'
            }
            excel.export_array_to_excel(params)
        },
        serchData() {
            this.tableDataShow = this.tableData.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.hasScoreCount)
                        // 已提交
                        data.push(res.hasSubmitCount)
                        // 未完成
                        data.push(res.unDoneCount)
                        // 未提交
                        data.push(res.unSubmitCount)
                        // 合格率
                        data.push(parseFloat((res.hasScoreCount * 100 / res.teacherCount).toFixed(2)))
                        this.topData.forEach((item, index) => {
                            item.number = data[index]
                        })
                        this.tableData = res.groupMembers
                        this.tableDataShow = this.tableData
                    }
                },
                err => {

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