import { Component, OnInit, OnDestroy, Input, Output, ViewChild, ElementRef } from '@angular/core';

@Component({
    selector: 'cm-age',
    templateUrl: './age.component.html',
    styleUrls: ['./age.component.less']
})


export class AgeComponent implements OnInit, OnDestroy {

    @Input() set cmData(columnData: any[]) {
        this.data = {};
        this.xAxisData = [];
        this.xAxis2Data = [];
        this.seriesData = [];

        this.rich = {
            value: {
                lineHeight: 30,
                align: 'center'
            }
        };

        for (let i = 0; i < columnData.length; i++) {
            this.xAxisData.push(columnData[i].sort);
            this.xAxis2Data.push(columnData[i].value);
            this.data[columnData[i].sort] = columnData[i];

            this.rich[columnData[i].sort] = {
                width: this.barWidth * 60/100,
                height: 40,
                align: 'center'
            };
            if (columnData[i].color && columnData[i].color.length) {
                let item = {
                    value: columnData[i].value,
                    itemStyle: {
                        normal: {
                            color: columnData[i].color[0]
                        }
                    }
                };
                this.seriesData.push(item);

                this.rich[columnData[i].sort].width = this.barWidth;
                this.rich[columnData[i].sort].backgroundColor = columnData[i].color[1] || columnData[i].color[0];
            } else {
                this.seriesData.push(columnData[i].value);
                if (this.data[columnData[i].sort].url) {
                    this.rich[columnData[i].sort].backgroundColor = {
                        image: this.data[columnData[i].sort].url
                    };
                }
            }
        }
    }

    public option: any;
    public rich: any;
    public data: any;

    public barWidth: number = 40;
    public xAxisData: any[] = [];
    public xAxis2Data: any[] = [];
    public seriesData: any[] = [];

    constructor() {

    }

    ngOnInit() {
        let colData = this.data;
        this.option = {
            color: ['#79B7FB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {          // 坐标轴指示器，坐标轴触发有效
                    type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params: any) {
                    return colData[params[0].name].label + '</br>' + (params[0].value*100).toFixed(1) + '%';
                },
            },
            grid: {
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : this.xAxisData,
                    axisLabel: {
                        formatter: function (value: any) {
                            return '{' + value + '| }\n{value|' + (colData[value].label || value) + '}';
                        },
                        margin: 0,
                        interval: 0,
                        rich: this.rich
                    }
                },
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        formatter: function (value: any) {
                            return (value * 100).toFixed(1) + '%';
                        },
                    },
                    data: this.xAxis2Data
                }
            ],
            yAxis : [
                {
                    show : true,
                    type : 'value',
                    axisLine: {show:false},
                    axisTick: {
                        show:false,
                        alignWithLabel: false
                    },
                    splitLine:{show:true},
                    axisLabel: {
                        show: false
                    }
                }
            ],
            series : [
                {
                    type:'bar',
                    barWidth: this.barWidth,
                    data : this.seriesData
                }
            ]
        };
    }

    ngOnDestroy() {

    }
}