/**
 * 顶部header
 */
Vue.component("rank-chart", {
    template: `
       <div :style="{'height': height+'px'}" ref="chart"> </div>
    `,
    props: {
        data:{
            type:Array
        },
        height:{
            type:Number
        }
    },
    data() {
        return {
            option:{}
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            this.getChartData()
        },
        //分类及工时情况
        getChartData(){
            var chChartBar = echarts.init(this.$refs.chart);
            this.echartBar(chChartBar,this.data)
        },
        echartBar(chChart,chartData){
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {


                var value = [];
                var prop = [];
                var text = [];
                var zero = []
                var bgd = []
                var total = 0
                for (let i = chartData.length-1; i >=0; i--) {
                    total += chartData[i].value;
                    value.push(chartData[i].value)
                    prop.push(chartData[i].prop)
                    text.push(chartData[i].text)
                    bgd.push(100)
                    zero.push(0)
                }


                var data = []
                var data_all = new Array(prop.length)
                for (let i = 0; i <prop.length ; i++) {
                    let tmp = new Array(prop.length).fill(0)
                    tmp[i] = prop[i]
                    data.push(tmp)
                    let tmp_all = 0

                    for(let j = i;j<prop.length;j++){
                        tmp_all+= prop[j];
                    }
                    data_all[i] = tmp_all.toFixed(1);
                }

                data_all.splice(0,1)
                data_all.push(0)

                var series =[
                    //背景色--------------------我是分割线君------------------------------//
                    {
                        show: true,
                        type: 'bar',
                        barGap: '-100%',
                        barWidth: '6', //统计条宽度
                        itemStyle: {
                            normal: {
                                color: 'rgba(27, 61, 133,0.5)',
                            },

                        },
                        z: 1,
                        data: bgd
                    },
                    //数据条--------------------我是分割线君------------------------------//
                    {
                        show: true,
                        type: 'bar',
                        xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
                        barGap: '-100%',
                        barWidth: '6', //统计条宽度
                        itemStyle: {
                            normal: {
                                color: 'rgba(22,203,115,0.05)'
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                //label 的position位置可以是top bottom left,right,也可以是固定值
                                //在这里需要上下统一对齐,所以用固定值
                                position: [0, '-25'],
                                rich: { //富文本
                                    prop: { //自定义颜色
                                        color: '#c6d9fa',
                                        fontSize:'16',
                                    },
                                    index:{
                                        color: '#fcbc02',
                                        fontStyle: 'italic',
                                        padding:[0,0,0,5],
                                        fontSize:'14',
                                    },
                                    name: {
                                        width: 300,
                                        color: '#c6d9fa',
                                        padding:[0,0,0,10],
                                        fontSize:'16',
                                    },
                                    color:{
                                        color: '#8ca2be',
                                        fontSize:'14',
                                    },
                                    arrow:{
                                        width:12,
                                        height:8,
                                        backgroundColor: {
                                            image: "http://fileimg.makalu.cc/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
                                        },
                                    },

                                },
                                formatter: function(data) {
                                    //富文本固定格式{colorName|这里填你想要写的内容}
                                    return '{arrow|}{index|No.'+(chartData.length-data.dataIndex)+'}{name|' + text[data.dataIndex] + '}{prop|' + prop[data.dataIndex] + '} {color| %}';
                                },
                            }
                        },
                        data: value
                    },
                    {
                        type: "bar",
                        stack: "总",
                        barWidth: 6,
                        itemStyle: {
                            normal: {
                                barBorderColor: 'rgba(0,0,0,0)',
                                color: 'rgba(0,0,0,0)'
                            }
                        },
                        data: data_all
                    },


                ]
                for (let i = 0; i < data.length; i++) {
                    series.push({
                        type: "bar",
                        barWidth: 6,
                        stack: "总",
                        // itemStyle: {
                        //     normal: {
                        //         color: '#0780d9'
                        //     }
                        // },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    {
                                        offset: 0,
                                        color: "#41adf5",
                                    },
                                    {
                                        offset: 1,
                                        color: "#175eac",
                                    },
                                ]),
                                barBorderRadius: [5,5,5,5],
                            },
                        },
                        data: data[i]
                    })
                }

                this.option = {
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '-8%',
                        top: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'category',
                        axisLabel: {
                            show: false, //让Y轴数据不显示
                        },
                        itemStyle: {

                        },
                        axisTick: {
                            show: false, //隐藏Y轴刻度
                        },
                        axisLine: {
                            show: false, //隐藏Y轴线段
                        },
                        data: text,
                    },

                    xAxis: [{
                        show: false,
                    },
                        //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
                        {
                            show: false,
                        }
                    ],
                    series: series
                };

                chChart.setOption(this.option);
                window.onresize = chChart.resize;
            })
        },
    },
    watch:{
        data:function () {
            this.init()
        }
    }

})