<template>
    <div :id="pieId" class="myPie"></div>
</template>

<script>
    export default {
        name: 'BasePie',
        props: ['pieId', 'pieData'],
        data() {
            return {
                pieDatas: []
            }
        },
        methods: {

            drawLine(data) {
                let that = this
                // 基于准备好的dom，初始化echarts实例
                let myPie = this.$echarts.init(document.getElementById(this.pieId), 'chalk')

                let option = {
                    title: {
                        text: that.$t('vote.optionBarTitle'),
                        left: 'center',
                        top:20,
                        textStyle: {
                            color: 'White',
                        }
                    },
                    tooltip: {
                      trigger: 'axis',
                      axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                      }
                    },
                    grid: {
                        "top": "35%",
                        "left": "15%",
                        "bottom": "0",
                        "right": "15%",
                        "containLabel": true
                    },
                    xAxis: [{
                        type: 'category',
                        data: data.map(item => item.name),
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#B0ABAB",
                            }
                        },
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#B0ABAB",
                                width: 1,
                                type: "solid"
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#393838",
                                width: 1,
                                type: "solid"
                            },
                        }
                    }],
                    series: [{
                        type: 'bar',
                        data: data.map(item => item.value),
                        barMaxWidth: 50, //柱子宽度
                        itemStyle: {
                            normal: {
                                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00fcae'
                                }, {
                                    offset: 1,
                                    color: '#006388'
                                }]),
                                opacity: 1,
                            }
                        }
                    }]
                };

                // 绘制图表
                myPie.setOption(option)

                window.addEventListener('resize', function () {
                    myPie.resize()
                })
            }
        },
        mounted() {
            let arr = []
            if (!this.pieData.length) return
            this.pieData.forEach((item, index) => {
                let o = {}
                o.name = item.option === 'Null' ?  this.$t('vote.noVote') : item.option
                o.value = item.result.length
                arr.push(o)
            })
            this.drawLine(arr)

        },
        watch: {
            pieData: {
                handler(val) {
                    console.log(val)
                    let arr = []
                    val.forEach((item, index) => {
                        let o = {}
                        o.name = item.option === 'Null' ? this.$t('vote.noVote') : item.option
                        o.value = item.result.length
                        arr.push(o)
                    })
                    this.drawLine(arr)
                }
            }
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .myPie {
        width: 50%;
        height: 380px;
        margin: 0 auto;
        display: block;
    }
</style>
