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

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

export class RetentionComponent implements OnInit, OnDestroy {
	iR: any;
	iL: any;
	tR: any;
	tL: any;
	isShow: boolean = false;
	arr:any[];
	showData:number;
	minData: number;
	maxData: number;
	cha: number;
	colors: string[] = ["#f0f9ff", "#c8e8ff", "#9ed3ff", "#75bafb", "#5693d4", "#3e70ad", "#2a5188", "#1e3760"];
	positionStyles: any = {};
	average:number; 
	width:string='200px';
	padding:string="200px";
	titleLeft:any[]; 
	titleRight:any[];
	infoLeft:any[];
	infoRight:any[]; 

	_cmDataScale = [
		{
			num1:"+1日",
			num2:"+2日",
			num3:"+3日",
			num4:"+4日",
			num5:"+5日",
			num6:"+6日",
			num7:"+7日",
			num8:"+8日",
			num9:"+9日",
			num10:"+10日",
			num11:"+11日",
			num12:"+12日",
			num13:"+13日",
			num14:"+14日"
		},
		{
			num1: 1250,
			num2: 1250,
			num3: 1250,
			num4: 1250,
			num5: 1250,
			num6: 1250,
			num7: 1250,
			num8: 1250,
			num9: 1250,
			num10: 1250,
			num11: 1250,
			num12: 1250,
			num13: 1250,
			num14: 1250,
		},
		{
			num1: 9.4,
			num2: 9.4,
			num3: 16.7,
			num4: 16.7,
			num5: 9.4,
			num6: 9.4,
			num7: 9.4,
			num8: 9.4,
			num9: 9.4,
			num10: 5.3,
			num11: 5.3,
			num12: 3.0,
			num13: 0.2,
			num14: 0.2,
		}, {
			num1: 9.4,
			num2: 16.7,
			num3: 16.7,
			num4: 9.4,
			num5: 9.4,
			num6: 9.4,
			num7: 9.4,
			num8: 9.4,
			num9: 5.3,
			num10: 5.3,
			num11: 5.3,
			num12: 3.0,
			num13: 0.2,
			num14: 0.2,
		}, {
			num1: 16.7,
			num2: 16.7,
			num3: 9.4,
			num4: 9.4,
			num5: 9.4,
			num6: 9.4,
			num7: 9.4,
			num8: 5.3,
			num9: 5.3,
			num10: 5.3,
			num11: 3.0,
			num12: 3.0,
			num13: 0.2,
			num14: 0.2,
		}, {
			num1: 9.4,
			num2: 9.4,
			num3: 5.3,
			num4: 5.3,
			num5: 5.3,
			num6: 5.3,
			num7: 5.3,
			num8: 3.0,
			num9: 3.0,
			num10: 3.0,
			num11: 3.0,
			num12: 0.2,
			num13: 0.2,
			num14: 0.2,
		}, {
			num1: 9.4,
			num2: 9.4,
			num3: 5.3,
			num4: 5.3,
			num5: 5.3,
			num6: 5.3,
			num7: 3.0,
			num8: 3.0,
			num9: 3.0,
			num10: 3.0,
			num11: 3.0,
			num12: 0.2,
			num13: 0.2,
			num14: 0.2,
		}, {
			num1: 9.4,
			num2: 5.3,
			num3: 5.3,
			num4: 5.3,
			num5: 5.3,
			num6: 5.3,
			num7: 3.0,
			num8: 3.0,
			num9: 3.0,
			num10: 3.0,
			num11: 0.2,
			num12: 0.2,
			num13: 0.2,
			num14: 0.2
		}
	];
	_cmDataInfo=[
		{
			title1:'日期',
			title2:'新增用户'
		},
		{
			title1:'均值',
			title2:'1250'
		},
		{
			date:'2018-1-17',
			user:1250
		},
		{
			date:'2018-1-17',
			user:1250
		},
		{
			date:'2018-1-17',
			user:1250
		},
		{
			date:'2018-1-17',
			user:1250
		},
		{
			date:'2018-1-17',
			user:1250
		},
		{
			date:'2018-1-17',
			user:1250
		}
	]

	@Input()
    set cmDataInfo(cmDataInfo: any) {
        this._cmDataInfo = cmDataInfo;
	};
	@Input()
    set cmDataScale(cmDataScale: any) {
        this._cmDataScale = cmDataScale;
	};

	constructor() {
		this.arr = [];
	 }
	ngOnInit() {
		this.titleRight = this._cmDataScale.slice(0,2)
		this.infoRight = this._cmDataScale.slice(2)
		this.titleLeft = this._cmDataInfo.slice(0,2)
		this.infoLeft = this._cmDataInfo.slice(2)	
		// console.log(this.titleRight,this.infoRight,this.titleLeft,this.infoLeft)
		this.setPadding()	
		this.dataArr()	
		// console.log(this.arr)	
		this.minData = this.arr[0];
		this.maxData = this.arr.pop();
		this.cha = (this.maxData - this.minData) / 8;
		// console.log(this.minData, this.maxData, this.cha)			
	}
	setPadding(){
		this.iL = Object.keys(this.infoLeft[1]);
		this.tL = Object.keys(this.titleLeft[1]);
		// console.log(this.iL,this.tL)
		let length = Object.keys(this.infoLeft[0]).length;
		// console.log(length);
		this.width = `${length*100}px`
		this.padding = `${length*100}px`
	}
	dataArr() {
		this.iR = Object.keys(this.infoRight[1]);
		this.tR = Object.keys(this.titleRight[1]);
		// console.log(this.iR,this.tR)
		// console.log(this.infoRight.length,this.infoRight)
		for (var i = 0; i < this.infoRight.length; i++) {
			let infoRight = this.infoRight[i];
			for (var key in infoRight) {
				// console.log(key,infoRight[key])
				this.arr.push(infoRight[key]);
			}
		}
		// console.log(this.arr)
		var temp = 0;
		for (var i = 0; i < this.arr.length; i++) {//这里的i控制循环比较的次数
			for (var j = 0; j < this.arr.length - i; j++) {
				//这里的j控制参与比较的数字个数，因为每比较一次都会产生一个最大的数字，那么下次比较的时候就没必要参与比较了，所以每比较一次都会减少一个数字
				if (this.arr[j] > this.arr[j + 1]) {
					temp = this.arr[j + 1];
					this.arr[j + 1] = this.arr[j];
					this.arr[j] = temp;
				}
				if(this.arr[j]==""){
					console.log(this.arr[j])
					this.arr[j]=0
				}
			}
		}
		var res = [this.arr[0]];
		for (var i = 1; i < this.arr.length; i++) {
			if (this.arr[i] !== res[res.length - 1]) {
				res.push(this.arr[i]);
			}
		}
		return res;
	}


	getBgColor(value: number): string {
		if (value >= this.minData && value < this.minData + this.cha) {
			return this.colors[0];
		} else if (value >= this.minData + this.cha && value < this.minData + 2 * this.cha) {
			return this.colors[1];
		} else if (value >= this.minData + 2 * this.cha && value < this.minData + 3 * this.cha) {
			return this.colors[2];
		} else if (value >= this.minData + 3 * this.cha && value < this.minData + 4 * this.cha) {
			return this.colors[3];
		} else if (value >= this.minData + 4 * this.cha && value < this.minData + 5 * this.cha) {
			return this.colors[4];
		} else if (value >= this.minData + 5 * this.cha && value < this.minData + 6 * this.cha) {
			return this.colors[5];
		} else if (value >= this.minData + 6 * this.cha && value < this.minData + 7 * this.cha) {
			return this.colors[6];
		} else {
			return this.colors[7];
		}
	}
	getfsColor(value: number): string {
		if (value > this.minData + 3 * this.cha) {
			return '#fff'
		} else {
			return '#000'
		}
	}
	mousemove(e: any,value:any) {
		this.showData = value;
		this.isShow = true;
		this.positionStyles = {
			'left':`${e.clientX-300}px`,
			'top': `${e.clientY-e.offsetY}px`,
		}
		// console.log(e.clientX,e.clientX-300,e.clientY,e.offsetY)
	}
	mouseleave(value: any) {
		this.isShow = false
	}

	ngOnDestroy() { }


}