/**
 * 顶部header
 */
Vue.component("work-prop-chart-bar", {
    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){
            var that = this

            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {


                var value = [];
                var prop = [];
                var text = [];
                var zero = []

                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.toFixed(2))
                    text.push(chartData[i].text)
                    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;
                }

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


                var color = ['#4974ff','#52aef7','#6863d7','#1d5d89','#20e6ff','#67feef']

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

                        },
                        z: 1,
                        data:  [100, 100, 100, 100, 100, 100]
                    },
                    //数据条--------------------我是分割线君------------------------------//
                    {
                        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:'14',
                                    },
                                    value: { //自定义颜色
                                        color: '#6cbbfe',
                                        fontSize:'14',
                                    },
                                    index:{
                                        color: '#fcbc02',
                                        fontStyle: 'italic',
                                        padding:[0,0,0,5],
                                        fontSize:'14',
                                    },
                                    name: {
                                        width: 100,
                                        color: '#c6d9fa',
                                        padding:[0,0,0,10],
                                        fontSize:'12',
                                    },
                                    color:{
                                        color: '#8ca2be',
                                        fontSize:'12',
                                    },

                                    arrow1:{
                                        width:10,
                                        height:10,
                                        backgroundColor: '#4974ff',
                                        borderRadius:50
                                    },
                                    arrow2:{
                                        width:10,
                                        height:10,
                                        backgroundColor: '#52aef7',
                                        borderRadius:50
                                    },
                                    arrow3:{
                                        width:10,
                                        height:10,
                                        backgroundColor: '#6863d7',
                                        borderRadius:50
                                    },
                                    arrow4:{
                                        width:10,
                                        height:10,
                                        backgroundColor: '#1d5d89',
                                        borderRadius:50
                                    },
                                    arrow5:{
                                        width:10,
                                        height:10,
                                        backgroundColor: '#20e6ff',
                                        borderRadius:50
                                    },
                                    arrow6:{
                                        width:10,
                                        height:10,
                                        backgroundColor: '#67feef',
                                        borderRadius:50
                                    },
                                },
                                formatter: function(data) {
                                    //富文本固定格式{colorName|这里填你想要写的内容}
                                    if (data.dataIndex == 5) {
                                        return '{arrow1|}{name|' + text[data.dataIndex] + '}{value|' + value[data.dataIndex] + '}{color| 人}   {prop|' + prop[data.dataIndex] + '} {color| %}';
                                    }else if(data.dataIndex == 4){
                                        return '{arrow2|}{name|' + text[data.dataIndex] + '}{value|' + value[data.dataIndex] + '}{color| 人}   {prop|' + prop[data.dataIndex] + '} {color| %}';
                                    }else if(data.dataIndex == 3){
                                        return '{arrow3|}{name|' + text[data.dataIndex] + '}{value|' + value[data.dataIndex] + '}{color| 人}   {prop|' + prop[data.dataIndex] + '} {color| %}';
                                    }else if(data.dataIndex == 2){
                                        return '{arrow4|}{name|' + text[data.dataIndex] + '}{value|' + value[data.dataIndex] + '}{color| 人}   {prop|' + prop[data.dataIndex] + '} {color| %}';
                                    }else if(data.dataIndex == 1){
                                        return '{arrow5|}{name|' + text[data.dataIndex] + '}{value|' + value[data.dataIndex] + '}{color| 人}   {prop|' + prop[data.dataIndex] + '} {color| %}';
                                    }else if(data.dataIndex == 0){
                                        return '{arrow6|}{name|' + text[data.dataIndex] + '}{value|' + value[data.dataIndex] + '}{color| 人}   {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: color[data.length-1-i]
                            }
                        },
                        /*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: '10%',
                        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;


                chChart.off('click')

                chChart.on('click', function (params) {
                    for(let i= 0;i<chartData.length;i++){
                        if(params.name == chartData[i].text){
                            that.$emit('personnel',chartData[i]);
                            break
                        }
                    }
                })

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

})