<template>
    <div id="ability-point"></div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector"
export default {
    props: {
        count: {
            type: Array,
            default: () => {
                return [0, 0, 0]
            }
        }
    },
    data() {
        return {
            myData: [],
            techScoreGau: undefined,
            option: {
                title: {
                    text: '能力点选修占比',
                    left: 'center',
                    top: 0,
                    z: 9999,
                    textStyle: {
                        color: '#516b91',
                        fontSize: 15
                    }
                },
                grid: {
                    bottom: 18,
                    top: 35,
                    right: 10
                },
                // tooltip: {
                //     trigger: 'item',
                //     formatter: '{b} : {c} ({d}%)'
                // },
                xAxis: {
                    type: 'category',
                    data: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'A9', 'A10', 'A11', 'A12', 'A13', 'B1', 'B2', 'B3', 'B4', 'B5', 'B6', 'B7', 'B8', 'B9', 'B10', 'C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'bar',
                        itemStyle: {
                            color: '#2db7f5'
                        }
                    }
                ]
            }
        }
    },
    mounted() {
        this.techScoreGau = this.$echarts.init(document.getElementById('ability-point'))
        this.techScoreGau.setOption(this.option)
        this.erd = elementResizeDetectorMaker()
        this.erd.listenTo(document.getElementById("ability-point"), () => {
            this.$nextTick(() => {
                //监听到事件后执行的业务逻辑
                this.techScoreGau.resize()
            })
        })
    },
    watch: {
        count: {
            handler(n, o) {
                let data = this._.cloneDeep(n)
                data.sort((s,t) => {
                    var a = s.abilityNo.toLowerCase()
                    var b = t.abilityNo.toLowerCase()
                    if (a.length === 2) {
                        a = a.slice(0, a.length - 1) + '0' + a.slice(-1)
                    }
                    if (b.length === 2) {
                        b = b.slice(0, b.length - 1) + '0' + b.slice(-1)
                    }
                    if (a < b) return -1
                    if (a > b) return 1
                    return 0;
                })
                console.log('能力点数据', data)
                if (this.count.length) {
                    this.option.xAxis.data = data.map(item => {
                        return item.abilityNo
                    })
                    this.option.series[0].data = data.map(item => {
                        return item.count
                    })
                    if (this.techScoreGau) {
                        this.techScoreGau.setOption(this.option)
                    } else {
                        this.techScoreGau = this.$echarts.init(document.getElementById('ability-point'))
                        this.techScoreGau.setOption(this.option)
                    }
                }

            },
            immediate: true,
            deep: true
        }
    }
}
</script>
<style lang="less" scoped>
#ability-point {
    width: 90%;
    height: 240px;
}
</style>
<style>
</style>