<template>
    <div id="progress-bar"></div>
</template>
<script>
    import elementResizeDetectorMaker from "element-resize-detector"
    export default {
        props: {
            countData: {
                type: Object,
                default: () => {
                    return {
                        xAxisData: [],
                        seriesData: [],
                        studentCount:0
                    }
                }
            }
        },
        data() {
            return {
                erd: undefined,
                dataIndex: 1,
                progressBar: undefined,
                option: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params, ticket, callback) {
                            return '';
                        }
                    },
                    legend: {
                        data: [
                            {
                                name: '已完成',
                                textStyle: {
                                    color:'white'
                                }
                            },
                            {
                                name: '未完成',
                                textStyle: {
                                    color:'white'
                                }
                            }
                        ]
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        axisLabel: {
                            color: 'white',
                            rotate:-20
                        }
                    },
                    yAxis: {
                        name: '人数',
                        nameTextStyle: {
                            color:'white'
                        },
                        type: 'value',
                        axisLabel: {
                            color: 'white'
                        },
                        splitLine: {
                            lineStyle: {
                                color:['#505050']
                            }
                        }
                    },
                    series: [
                        {
                            stack: '总量',
                            data: [],
                            type: 'bar',
                            itemStyle: {
                                color: "#69EFEF"
                            },
                            barMaxWidth: 60,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            name: '已完成'
                        },
                        {
                            stack: '总量',
                            data: [],
                            type: 'bar',
                            itemStyle: {
                                color: "#AAAAAA"
                            },
                            barMaxWidth: 60,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            name: '未完成'
                        }
                    ]
                }
            }
        },
        mounted() {
            this.progressBar = this.$echarts.init(document.getElementById('progress-bar'))
            this.progressBar.setOption(this.option)
            this.progressBar.on('click', (params) => {
                this.$emit('clickStep', params)
            })
            this.erd = elementResizeDetectorMaker()
            this.erd.listenTo(document.getElementById("progress-bar"), () => {
                this.$nextTick(() => {
                    //监听到事件后执行的业务逻辑
                    this.progressBar.resize()
                })
            })
        },
        watch: {
            countData: {
                handler(n, o) {
                    this.$nextTick(() => {
                        this.option.xAxis.data = this.countData.xAxisData
                        this.option.series[0].data = this.countData.seriesData
                        this.option.series[1].data.length = 0
                        for (let item of this.countData.seriesData) {
                            this.option.series[1].data.push(this.countData.studentCount - item == 0 ? undefined : this.countData.studentCount - item)
                        }
                        this.progressBar.setOption(this.option)
                    })
                },
                deep: true,
                immediate: true
            }
        }
    }
</script>
<style scoped lang="less">

</style>
<style>
    #progress-bar {
        width:100%;
        height:100%;
    }
</style>