(function (KDApi, $) {
    console.log("srvemc_apphome")
    function MyComopnent(model) {
        this._setModel(model);
    }
    MyComopnent.prototype = {
        _setModel: function (model) {
            this.model = model

        },
        init: function () {
            initIcemHtml(this.model)
           // setTimeout(initData,500)
              /*var timer;
                timer = setInterval(function(){
                    if(window.echarts){
                        initData();
                        clearInterval(timer);
                    }
                },500)*/
                },
        update: function (result) {
            /*timer = setInterval(function(){
                    if(window.echarts){
                        initData();
                        clearInterval(timer);
                    }
                },500)*/

            var timer1 = setInterval(function(){
                var elem = document.getElementById("icemchart4");
                if(elem){
                    initData(result.data);
                    clearInterval(timer1);
                }
            },100)
        },
        destoryed: function () {
        }

    };
    function initData(data){

        if(!data){
            return;
        }
         $("[data-form-id=srvemc_graph] #content #chart-container").width($("[data-form-id=srvemc_graph] #content").width());
         $("[data-form-id=srvemc_graph] #content #chart-container").height($("[data-form-id=srvemc_graph] #content").height());
        initChart();
        function initChart() {
            var data1 = data["data1"];
            var data2 = data["data2"];
            var data3 = data["data3"];
            var data4 = data["data4"];
            initChart1(data1);
            initChart2(data2);
            initChart3(data3);
            initChart4(data4);
        }

function initChart1(data) {
    var elem = document.getElementById("icemchart1");
    option = {
        //backgroundColor: '#000',
        title: {
            text: '故障时长',
            left: 30,
            top: 20,
            textStyle: {
                color: '#333333',
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
       grid: {
            left: '4%',
            right: '4%',
            bottom: '10%',
            top: '25%',
            containLabel: true
        },
        xAxis: [{
            axisLabel: {
                            color:'#999999'
                        },
                        axisLine: {
                lineStyle: {
                    color: '#D9D9D9'
                }
            },
            axisTick: {
                show: true,
                inside: true,
                lineStyle: {
                    color: '#D9D9D9',
                    fontSize: 14,
                    fontFamily: 'PingFangSC',
                    fontWeight: 300
                }
            },
            splitLine: {
                show: false
            },
            data: data.map(function(item) {return item.name}),
        },
      ],
        yAxis: [{
          
            axisLabel: {
                            color:'#999999'
                        },
            nameTextStyle: {
               // color: '#999999',
                fontSize: 14,
                fontFamily: 'PingFangSC',
                fontWeight: 300,
                padding: [0, 0, 8, 0]
            },
            axisLine: {
                lineStyle: {
                    color: '#D9D9D9'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#D9D9D9',
                    fontSize: 14,
                    fontFamily: 'PingFangSC',
                    fontWeight: 300
                }
            }

        },
        ],
        series: [{
            name: '故障时长',
            type: 'bar',
            itemStyle: {
                normal: {
                    color:'#23CCFC'
                   /* color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#8bd46e'
                    },
                    {
                        offset: 1,
                        color: '#09bcb7'
                    }]),*/
                   // barBorderRadius: [10,10,0,0],
                }

            },
            barWidth: 15,
            data:  data.map(function(item){return item.value}),
        }]
    };
    echarts.init(elem).setOption(option);
}
function initChart2(data) {

    var elem = document.getElementById("icemchart2");
     option = {
        //backgroundColor: '#000',
        title: {
            text: '运行时长',
            left: 30,
            top: 20,
            textStyle: {
                color: '#333333',
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
       grid: {
            left: '4%',
            right: '4%',
            bottom: '10%',
            top: '25%',
            containLabel: true
        },
        xAxis: [{
            axisLabel: {
                            color:'#999999'
                        },
            axisLine: {
                lineStyle: {
                    color: '#D9D9D9'
                }
            },
            axisTick: {
                show: true,
                inside: true,
                lineStyle: {
                    color: '#D9D9D9',
                    fontSize: 14,
                    fontFamily: 'PingFangSC',
                    fontWeight: 300
                }
            },
            splitLine: {
                show: false
            },
            data: data.map(function(item){return item.name}),
        },
      ],
        yAxis: [{
          
            axisLabel: {
                            color:'#999999'
                        },
            nameTextStyle: {
              //  color: '#999999',
                fontSize: 14,
                fontFamily: 'PingFangSC',
                fontWeight: 300,
                padding: [0, 0, 8, 0]
            },
            axisLine: {
                lineStyle: {
                    color: '#D9D9D9'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#D9D9D9',
                    fontSize: 14,
                    fontFamily: 'PingFangSC',
                    fontWeight: 300
                }
            }

        },
        ],
        series: [{
            name: '运行时长',
            type: 'bar',
            itemStyle: {
                normal: {
                    color:'#23CCFC',
                    /*color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#8bd46e'
                    },
                    {
                        offset: 1,
                        color: '#09bcb7'
                    }]),*/
                    //barBorderRadius: [10,10,0,0],
                }

            },
            barWidth: 15,
            data:  data.map(function(item){return item.value}),
        }]
    };
    echarts.init(elem).setOption(option);
}
function initChart3(data) {
    var elem = document.getElementById("icemchart3");
     option = {
        //backgroundColor: '#000',
        title: {
            text: '时间稼动率',
            left: 30,
            top: 20,
            textStyle: {
                color: '#333333',
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
       grid: {
            left: '4%',
            right: '4%',
            bottom: '10%',
            top: '25%',
            containLabel: true
        },
        xAxis: [{
            axisLabel: {
                            color:'#999999'
                        },
            axisLine: {
                lineStyle: {
                    color: '#D9D9D9'
                }
            },
            axisTick: {
                show: true,
                inside: true,
                lineStyle: {
                    color: '#D9D9D9',
                    fontSize: 14,
                    fontFamily: 'PingFangSC',
                    fontWeight: 300
                }
            },
            splitLine: {
                show: false
            },
            data: data.map(function(item){return item.name}),
        },
      ],
        yAxis: [{
          
            axisLabel: {
                            color:'#999999'
                        },
            nameTextStyle: {
              //  color: '#999999',
                fontSize: 14,
                fontFamily: 'PingFangSC',
                fontWeight: 300,
                padding: [0, 0, 8, 0]
            },
            axisLine: {
                lineStyle: {
                    color: '#D9D9D9'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#D9D9D9',
                    fontSize: 14,
                    fontFamily: 'PingFangSC',
                    fontWeight: 300
                }
            }

        },
        ],
        series: [{
            name: '时间稼动率',
            type: 'bar',
            itemStyle: {
                normal: {
                    color:'#23CCFC',
                   /* color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#fccb05'
                    },
                    {
                        offset: 1,
                        color: '#f5804d'
                    }]),*/
                   // barBorderRadius: [10,10,0,0],
                },
            },
            barWidth: 15,
            data:  data.map(function(item){return item.value}),
        }]
    };
    echarts.init(elem).setOption(option);
}
function initChart4(data) {
    data = data.sort(function(item1,item2){
        return item2.value-item1.value;
    }).slice(0,5);
    var elem = document.getElementById("icemchart4");
     option = {
    title : {
        text: '故障原因top5',
    left: 30,
            top: 20,
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
   
    series : [
        {
            name: '报警原因',
            type: 'pie',
             radius: ['45%', '60%'],
            center: ['50%', '60%'],
            data:data,
             label: {
                formatter: '{b}({d}%)',
                color: '#999999'
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ],
        color: ['#1890FF', '#13C2C2', '#2FC25B','#FACC14','#F04864']
    };

    echarts.init(elem).setOption(option);
}
    }
   

    function initIcemHtml(model) {
        KDApi.loadFile(['./css/main.css'], model.schemaId, function () {
            KDApi.loadFile(['./lib/echarts.min.js'], model.schemaId, function () {
       
                    KDApi.templateFilePath('./html/tpl.html', model.schemaId, {}).then(function (result) {
                        model.dom.innerHTML = result;
                        $("[data-form-id=icer_device_map] .uKGPaxuF").each(function () {
                            $(this).css("height", $(this).height() + "px")
                        })
                       
                   
                })
            })
        })
    }
    KDApi.register("srvemc_apphome", MyComopnent);
})(window.KDApi,jQuery)