<template>
    <div class="training-container">
        <vuescroll :ops="options">
            <div class="training-top-wrap">
                <div class="percent-wrap">
                    <Percent :count="dimension"></Percent>
                </div>
                <div class="point-wrap">
                    <AbilityPoint :count="tableData"></AbilityPoint>
                </div>
            </div>
            <div class="training-table-wrap">
                <Table :columns="columns1" :data="tableData" :loading="loading" :height="600">
                    <template slot-scope="{ row }" slot="action">
                        <Button type="info">查看详情</Button>
                    </template>
                </Table>
            </div>
        </vuescroll>
    </div>
</template>
<script>
import Percent from './Percent.vue'
import AbilityPoint from './AbilityPoint.vue'
export default {
    components: {
        Percent, AbilityPoint
    },
    data() {
        return {
            options: {
                bar: {
                    opacity:0
                }
            },
            dimension: [],
            abPoint: [],
            loading: false,
            columns1: [
                {
                    title: '编号',
                    key: 'abilityNo'
                },
                {
                    title: '能力点名称',
                    key: 'abilityName'
                },
                {
                    title: '能力维度',
                    key: 'dimensionName',
                    align: 'center'
                },
                {
                    title: '所属环境',
                    key: 'abilityEnv',
                    align: 'center'
                },
                {
                    title: '已选人数',
                    key: 'count',
                    align: 'center'
                },
                {
                    title: '所占比例',
                    key: 'percent',
                    align: 'center'
                },
                // {
                //     title: '操作',
                //     slot: 'action',
                //     align: 'center'
                // }
            ],
            tableData: []
        }
    },
    methods: {
        findTotalData() {
            this.loading = true
            let params = {
                school: this.$store.state.userInfo.schoolCode
            }
            this.$api.ability.FindTotalData(params).then(
                res => {
                    if (!res.error) {
                        let deData = this.$GLOBAL.DIMENSIONS()
                        res.abilityCount.forEach(item => {
                            item.percent = (item.count * 100 / res.subCount).toFixed(1) + '%'
                            let d = deData.find(i => {
                                return i.code == item.dimension
                            })
                            if (d) {
                                item.dimensionName = d.val
                            }
                        })
                        this.tableData = res.abilityCount

                        res.dimensionCount.forEach(item => {
                            let d = deData.find(i => {
                                return i.code == item.dimension
                            })
                            if (d) {
                                item.name = d.val
                            }
                        })
                        this.dimension = res.dimensionCount
                    }
                },
                err => {

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