/**
 * 顶部header
 */
Vue.component("safe-bar-chart", {
    template: `
       <div :style="{'height': height+'px'}" ref="chart"> </div>
    `,
    props: {
        height:{
            type:Number
        },
        project:{
            type: Array,
        },
        data:{
            type: Array,
        },
        legend:{
            type: Array,
        },
        color:{
            type: Array,
        },
        unit:{
            type:String
        }
    },
    data() {
        return {
            option:{},
            timer_tmp:undefined
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            this.getChartData()
        },
        //分类及工时情况
        getChartData(){
            var chChartBar = echarts.init(this.$refs.chart);
            this.echartBar(chChartBar)
        },
        echartBar(myChart){
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var series = []
                for (let i = 0; i <this.data.length ; i++) {
                    series.push(
                        {
                            name: this.legend[i],
                            type: "bar",
                            barWidth: "15",
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: this.color[i][0],
                                        },
                                        {
                                            offset: 1,
                                            color: this.color[i][1],
                                        },
                                    ]),
                                    barBorderRadius: [10,10,0,0],
                                },
                            },
                            data: this.data[i],
                        },
                    )
                }
                var unit = ''
                if(this.unit == '' || this.unit == undefined){
                    unit = ''
                }else{
                    unit = '单位：'+this.unit
                }
                var project = []
                for (let i = 0; i < this.project.length; i++) {
                    if(this.project[i].length > 8){
                        var arr = this.project[i].split("");
                        arr.splice(8,0,"\n");
                        project.push(arr.join(""))
                    }else{
                        project.push(this.project[i])
                    }
                }
                this.option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                        },
                    },
                    grid: {
                        left: "2%",
                        right: "4%",
                        bottom: "5%",
                        top: "25%",
                        containLabel: true,
                    },
                    legend: {
                        data: this.legend,
                        center: 'center',
                        icon:'circle',
                        top: 12,
                        textStyle: {
                            color: "#c3dbfd",
                            fontSize:16
                        },
                        itemWidth: 15,
                        itemHeight: 15,
                        itemGap: 35
                    },
                    xAxis: {
                        type: "category",
                        data: project,
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: "#194e92",
                                type: "dashed",
                            },
                        },
                        axisTick: {
                            show: false
                        },

                        axisLabel: {
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: "#c5d9fc",
                                margin: 20,
                                fontSize:12
                            },
                        },
                    },

                    yAxis: {
                        name:unit,
                        type: "value",
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: false,
                            lineStyle: {
                                color: "#c5d9fc",
                                type: "dashed",
                            },
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: "#c5d9fc",
                                margin: 20,
                                fontSize:12
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#0c233e",
                                type: "dashed",
                            },
                        },
                    },
                    dataZoom: [
                        {
                            xAxisIndex: 0,// 这里是从X轴的0刻度开始
                            show: false, // 是否显示滑动条，不影响使用
                            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                            startValue: 0, // 从头开始。
                            endValue: 2, // 一次性展示多少个。
                        },
                    ],
                    series:series
                };

                myChart.setOption(this.option);
                window.onresize = myChart.resize;

                var timer_tmp = this.timer_tmp
                if(timer_tmp){
                    clearInterval(timer_tmp);
                }
                var app = {
                    currentIndex: 0,
                };
                myChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: app.currentIndex,
                });
                // 显示 tooltip
                myChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: app.currentIndex,
                });
                var dataX = this.project
                var that = this
                timer_tmp = setInterval(function () {
                    var dataLen = that.option.series[0].data.length;
                    if (that.option.dataZoom[0].endValue == dataX.length ) {
                        that.option.dataZoom[0].endValue = 3;
                        that.option.dataZoom[0].startValue = 0;
                        myChart.setOption(that.option);
                        // 取消之前高亮的图形
                        myChart.dispatchAction({
                            type: "downplay",
                            seriesIndex: 0,
                            dataIndex: app.currentIndex,
                        });
                        app.currentIndex = 0
                        // 高亮当前图形
                        myChart.dispatchAction({
                            type: "highlight",
                            seriesIndex: 0,
                            dataIndex: app.currentIndex,
                        });
                        // 显示 tooltip
                        myChart.dispatchAction({
                            type: "showTip",
                            seriesIndex: 0,
                            dataIndex: app.currentIndex,
                        });
                    } else {
                        that.option.dataZoom[0].endValue = that.option.dataZoom[0].endValue + 1;
                        that.option.dataZoom[0].startValue = that.option.dataZoom[0].startValue + 1;
                        myChart.setOption(that.option);
                        // 取消之前高亮的图形
                        myChart.dispatchAction({
                            type: "downplay",
                            seriesIndex: 0,
                            dataIndex: app.currentIndex,
                        });
                        app.currentIndex = (app.currentIndex + 1) % dataLen;
                        //console.log(app.currentIndex)
                        // 高亮当前图形
                        myChart.dispatchAction({
                            type: "highlight",
                            seriesIndex: 0,
                            dataIndex: app.currentIndex,
                        });
                        // 显示 tooltip
                        myChart.dispatchAction({
                            type: "showTip",
                            seriesIndex: 0,
                            dataIndex: app.currentIndex,
                        });
                    }
                },3000)



            })
        },
    },
    watch:{
        project: function (n,o) {
            this.init()
        }
    }
})