<template>
    <div id="pass-bar"></div>
</template>
<script>
    import elementResizeDetectorMaker from "element-resize-detector"
    export default {
        props: {
            passData: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                erd: undefined,
                dataIndex: 1,
                passBar: undefined,
                option: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params, ticket, callback) {
                            return '';
                        }
                    },
                    legend: {
                        data: [
                            {
                                name: '一次通过',
                                textStyle: {
                                    color: 'white'
                                }
                            },
                            {
                                name: '二次通过',
                                textStyle: {
                                    color: 'white'
                                }
                            },
                            {
                                name: '三次及以上',
                                textStyle: {
                                    color: 'white'
                                }
                            },
                            {
                                name: '未作答',
                                textStyle: {
                                    color: 'white'
                                }
                            }
                        ]
                    },
                    grid: {
                        left: 100
                    },
                    yAxis: {
                        type: 'value',
                        name: '人数',
                        axisLabel: {
                            color: 'white'
                        },
                        nameTextStyle: {
                            color: 'white'
                        },
                        splitLine: {
                            lineStyle: {
                                color: ['#505050']
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        //data: ['一次函数阶', '一次函数进阶', '一次函数高阶'],
                        axisLabel: {
                            color: 'white',
                            margin: 20
                        }
                    },
                    series: []
                }
            }
        },
        mounted() {
            this.passBar = this.$echarts.init(document.getElementById('pass-bar'))
            this.passBar.on('click', (params) => {
                this.$emit('clickStep', params)
            })
            //let _this = this
            this.erd = elementResizeDetectorMaker()
            this.erd.listenTo(document.getElementById("pass-bar"), () => {
                this.$nextTick(() => {
                    //监听到事件后执行的业务逻辑
                    this.passBar.resize()
                })
            })
        },
        methods: {
            randomNum() {
                let stepNum = 3
                let step1 = this.$jsFn.getBtwRandom(1, 8)
                let step2 = this.$jsFn.getBtwRandom(1, 8)
                let step3 = this.$jsFn.getBtwRandom(1, 8)
                let stepCount = [
                    step1,
                    step2,
                    step3
                ]

                //调整通过率统计维度
                let once = {
                    name: '一次通过',
                    type: 'bar',
                    itemStyle: {
                        color: "#19be6b"
                    },
                    label: {
                        normal: {
                            show: true,
                            textBorderColor: '#333',
                            textBorderWidth: 2
                        },
                        show: true,
                        position: 'inside'
                    },
                    data: []
                }
                for (let index = 0; index < stepNum; index++) {
                    once.data.push(this.$jsFn.getBtwRandom(10, 30))
                }

                let twice = {
                    name: '二次通过',
                    type: 'bar',
                    itemStyle: {
                        color: "#5cadff"
                    },
                    label: {
                        normal: {
                            show: true,
                            textBorderColor: '#333',
                            textBorderWidth: 2
                        },
                        show: true,
                        position: 'inside'
                    },
                    data: []
                }
                for (let index = 0; index < stepNum; index++) {
                    twice.data.push(this.$jsFn.getBtwRandom(10, 20))
                }

                let third = {
                    name: '三次及以上',
                    type: 'bar',
                    itemStyle: {
                        color: "#ff9900"
                    },
                    label: {
                        normal: {
                            show: true,
                            textBorderColor: '#333',
                            textBorderWidth: 2
                        },
                        show: true,
                        position: 'inside'
                    },
                    data: []
                }
                for (let index = 0; index < stepNum; index++) {
                    third.data.push(this.$jsFn.getBtwRandom(10, 20))
                }

                let no = {
                    name: '未作答',
                    type: 'bar',
                    itemStyle: {
                        color: "#e8eaec"
                    },
                    label: {
                        normal: {
                            show: true,
                            textBorderColor: '#333',
                            textBorderWidth: 2
                        },
                        show: true,
                        position: 'inside'
                    },
                    data: []
                }
                for (let index = 0; index < stepNum; index++) {
                    no.data.push(this.$jsFn.getBtwRandom(0, 10))
                }
                this.option.series.push(once, twice, third, no)
                this.passBar.setOption(this.option)
            }
        },
        watch: {
            passData: {
                handler(n, o) {
                    this.$nextTick(() => {
                        this.option.xAxis.data = this.passData.map((item) => {
                            return item.name
                        })
                        //调整通过率统计维度
                        let once = {
                            name: '一次通过',
                            type: 'bar',
                            itemStyle: {
                                color: "#19be6b"
                            },
                            label: {
                                normal: {
                                    show: true,
                                    textBorderColor: '#333',
                                    textBorderWidth: 2
                                },
                                show: true,
                                position: 'inside'
                            },
                            data: []
                        }
                        

                        let twice = {
                            name: '二次通过',
                            type: 'bar',
                            itemStyle: {
                                color: "#5cadff"
                            },
                            label: {
                                normal: {
                                    show: true,
                                    textBorderColor: '#333',
                                    textBorderWidth: 2
                                },
                                show: true,
                                position: 'inside'
                            },
                            data: []
                        }

                        let third = {
                            name: '三次及以上',
                            type: 'bar',
                            itemStyle: {
                                color: "#ff9900"
                            },
                            label: {
                                normal: {
                                    show: true,
                                    textBorderColor: '#333',
                                    textBorderWidth: 2
                                },
                                show: true,
                                position: 'inside'
                            },
                            data: []
                        }

                        let no = {
                            name: '未作答',
                            type: 'bar',
                            itemStyle: {
                                color: "#e8eaec"
                            },
                            label: {
                                normal: {
                                    show: true,
                                    textBorderColor: '#333',
                                    textBorderWidth: 2
                                },
                                show: true,
                                position: 'inside'
                            },
                            data: []
                        }

                        for (let index = 0; index < this.passData.length; index++) {
                            once.data.push(this.passData[index].once)
                            twice.data.push(this.passData[index].twice)
                            third.data.push(this.passData[index].third)
                            no.data.push(this.passData[index].zero)
                        }
                        this.option.series.length = 0
                        this.option.series.push(once, twice, third, no)
                        this.passBar.setOption(this.option)
                    })
                },
                deep: true,
                immediate: true
            }
        }
    }
</script>
<style scoped lang="less">
</style>
<style>
    #pass-bar {
        width: 100%;
        height: 100%;
    }
</style>