(function (KDApi, $) {

    function pointLineChartMyComopnent(model) {
        this._setModel(model);
    }
    pointLineChartMyComopnent.prototype = {
        _setModel: function (model) {
            this.model = model
        },
        init: function (props) {
			console.log('-----init', this.model, props)
			this.initHtml(this.model);
			console.log('-----init---ok', this.model, props)
        },
        update: function (props) {
			console.log('-----update', this.model, props)
			var data = props.data;

            if (!data) {
                return;
            }
            var that = this;
			this.setDeviceData(data);
			console.log('-----update----ok', this.model, props)
        },
        destoryed: function () {
        },
		setDeviceData: function (allData) {
				var that = this;
				that.deviceData = {
					tags: allData
				}
				that.drawChart();
			},
		drawChart: function () {
                        var that = this;
                        var option = {

                            tooltip: {
                                trigger: 'axis'/*,
                                formatter: function (params) {
                                    var tip = "";
                                    params.forEach((item, index) => {
                                        if (index == 0) {
                                            tip += item.axisValueLabel + "<br>"
                                        }
                                        var number = item.seriesName;
                                        var seriesData = that.getMapFromArray(number);
                                        if (seriesData) {
                                            var name = seriesData.name;
                                            tip += (item.marker + name + ":" + item.data[1] + "<br>")
                                        }

                                    })

                                    return tip
                                }*/
                            },
                            dataZoom: [{
                                type: 'inside',
								start: 90,
								end: 100
                            },
                            {
                                "type": "slider",
                                "dataBackStyle": {
                                    areaStyle: {
                                        color: 'rgba(220,220,220,30)'
                                    }
                                }
                            }],
                            grid: {
                                left: "40px"
                            },
                            animation: false, //关闭动画看上去更连贯
                            xAxis: {
                                type: 'time',
                                //   type:'category',
                                axisLine: {
                                    lineStyle: {
                                        color: '#CCCCCC',
                                        fontSize: '12px'
                                    }
                                },
                                splitLine: {
                                    show: false
                                },
                                axisTick: {

                                    show: false,
                                },
								showMinLabel: true,//显示最小值
								showMaxLabel: true,//显示最大值
                            },
                            legend: {
                                icon: 'rect',
                                itemWidth: 30,
                                itemHeight: 1/*,
                                formatter: function (name) {
                                    var item = that.getMapFromArray(name);
                                    return item.name
                                }*/
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    show: true,
                                    lineStyle: {
                                        color: '#CCCCCC',
                                        fontSize: '12px'
                                    }
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#F0F0F0',
                                        fontSize: '12px'
                                    }
                                },
                                axisTick: {

                                    show: false,
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#CCCCCC',
                                        fontSize: '12px'
                                    }
                                }
                            },
                        }

                        if (!this.myChart) {
                            let timer = setInterval(function () {
                                let elem = document.getElementById("srvpmc_history_chart");
                                if (elem) {
                                    clearInterval(timer)
                                    that.myChart = echarts.init(elem);
                                    option.series = getChartSeries();
                                    that.myChart.setOption(option, true);
                                }


                            }, 100)
                        }
                        else {
                            option.series = getChartSeries();
                            this.myChart.setOption(option, true);
                        }

                        function getColor(index) {
                            var colors = [['#648CF9', 'rgba(100,140,249,0.20)'], ['#2EC6C8', 'rgba(46,198,200,0.20)'], ['#FC8555', 'rgba(252,133,85,0.20)'], ['#FFBA30', 'rgba(255,186,48,0.20)']];
                            var color = colors[index % colors.length];
                            return color
                        }
                        function getChartSeries() {
                            var tags = that.deviceData.tags;
                            var series = [];

                            tags.forEach((item, index) => {

                                var series1 = {
                                    type: 'line',
                                    name: item.number,
                                    smooth: true,
                                    data: item.data,
                                    color: getColor(index)[0],
                                    symbol: "none",

                                }
                                series.push(series1);
                            })
                            return series;
                        }
                    },
			   getMapFromArray: function (value, data, key) {
				data = data || this.deviceData.tags;
				key = key || "number";
				var result = null;
				data.forEach(item => {

					if (item[key] == value) {
						result = item;
					}
				})
				return result;

			},
					        
        initHtml:function(model) {
			var that = this;
			KDApi.loadFile(['./css/main.css'], model.schemaId, function () {
				KDApi.loadFile(['./lib/echarts.min.js'], model.schemaId, function () {
					KDApi.loadFile(['./lib/vue.min.js'], model.schemaId, function () {
						KDApi.templateFilePath('./html/main.html', model.schemaId, {}).then(function (result) {
							model.dom.innerHTML = result;
						})
					})
				})
			})
		}
		};

    KDApi.register("srvpmc_history_chart", pointLineChartMyComopnent);
})(window.KDApi,jQuery)