class InterView{
    constructor(args){
       
        this.data = args.data;
        
        
        this.render()
    }
    //入口
    render(){
        this.initTable()
       
    }

    /**
     * table的重绘
     */
    initTable(){
        let trAttr = this.data.itemSort;
        let showDays = this.data.showDays;
        let len = showDays.length;
        let content ='<thead>';
        content +='<tr style="height:0">';
        content +='<td width="126px"  ></td>';
        for(let i =0 ;i<len;i++){
            content +='<td width="21px"  ></td><td width="21px" ></td><td width="21px" ></td><td width="21px" ></td><td width="21px" ></td><td width="21px" ></td>';
        }
        content +='</tr>';

        content +='<tr>';
        for(let j=0;j<=len;j++){
            if(j===0){
                content+='<th>日  期</th>'
            }else{
                content+=`<th colspan="6" ><span>${showDays[j-1]}</span></th>`
            }
        }
        content +='</tr>';
        content +='<tr >';
        content +='<td >时间</td>';
        for(let j=0;j<len;j++){
            content +='<td>3</td><td>7</td><td>11</td><td>15</td><td>19</td><td>23</td>';
        }
        content +='</tr>';
        content +='</thead>'
        
        content+='<tbody>'
        

        for(let i =0;i<1;i++){
            content +="<tr>";
            if(i == 0){
                content +=`<td   valign="top">
                <div style="width:120px; height:160px;display:inline; margin-top:0px">
                <div style="width:120px;height:17px; float:left; line-height:20px;margin-top:-2px;"><span style="width:39px; float:left; text-align:center; color:#666666" id="dx_999_t_smtz_0_00">呼吸</span><span style="width:39px; float:left; text-align:center; color:#FF0000" id="dx_999_t_smtz_0_01">脉搏</span><span style="width:39px; float:left; text-align:center; color:#0000FF" id="dx_999_t_smtz_0_02">体温</span></div><div style="width:120px;height:18px; float:left; margin-top:0px;"><span style="width:39px; float:left; text-align:center; color:#666666"><img style="vertical-align:middle; height:18px" id="dx_999_t_smtz_0_10" src="${Utils.getRealPath()}/resources/component/iviewhx.png"></span><span style="width:39px; float:left; text-align:center; color:#FF0000"><img style="vertical-align:middle; height:18px" id="dx_999_t_smtz_0_11" src="${Utils.getRealPath()}/resources/component/iviewmb.png"></span><span style="width:39px; float:left; text-align:center; color:#FF0000"><img style="vertical-align:middle; height:18px" id="dx_999_t_smtz_0_12" src="${Utils.getRealPath()}/resources/component/iviewtw.png"></span></div><div style="width:100%; height:25px;  float:left; margin-top:10px;  line-height:20px; "><span style="width:39px; float:left; text-align:center; color:#666666; height:100%;line-height:25px;" id="dx_999_t_smtz_0_20">25</span><span style="width:39px; float:left; text-align:center; color:#FF0000;height:100%;line-height:25px;" id="dx_999_t_smtz_0_21">100</span><span style="width:39px; float:left; text-align:center; color:#0000FF;height:100%;line-height:25px;" id="dx_999_t_smtz_0_22">40</span></div><div style="width:100%; height:25px;  float:left;line-height:20px; margin-top:5px;"><span style="width:39px; float:left; text-align:center; color:#666666; height:100%" id="dx_999_t_smtz_0_30">20</span><span style="width:39px; float:left; text-align:center; color:#FF0000;height:100%" id="dx_999_t_smtz_0_31">80</span><span style="width:39px; float:left; text-align:center; color:#0000FF;height:100%" id="dx_999_t_smtz_0_32">39</span></div><div style="width:100%; height:25px;  float:left;line-height:20px; margin-top:5px;"><span style="width:39px; float:left; text-align:center; color:#666666; height:100%" id="dx_999_t_smtz_0_40">15</span><span style="width:39px; float:left; text-align:center; color:#FF0000;height:100%" id="dx_999_t_smtz_0_41">60</span><span style="width:39px; float:left; text-align:center; color:#0000FF;height:100%" id="dx_999_t_smtz_0_42">38</span></div><div style="width:100%; height:25px;  float:left;line-height:20px; margin-top:5px;"><span style="width:39px; float:left; text-align:center; color:#666666; height:100%" id="dx_999_t_smtz_0_50">10</span><span style="width:39px; float:left; text-align:center; color:#FF0000;height:100%" id="dx_999_t_smtz_0_51">40</span><span style="width:39px; float:left; text-align:center; color:#0000FF;height:100%" id="dx_999_t_smtz_0_52">37</span></div><div style="width:100%; height:25px;  float:left;line-height:20px; margin-top:5px;"><span style="width:39px; float:left; text-align:center; color:#666666; height:100%" id="dx_999_t_smtz_0_60">5</span><span style="width:39px; float:left; text-align:center; color:#FF0000;height:100%" id="dx_999_t_smtz_0_61">20</span><span style="width:39px; float:left; text-align:center; color:#0000FF;height:100%" id="dx_999_t_smtz_0_62">36</span></div><div style="width:100%; height:20px;  float:left;line-height:20px; margin-top:0px;"><span style="width:39px; float:left; text-align:center; color:#666666; height:100%" id="dx_999_t_smtz_0_70">0</span><span style="width:39px; float:left; text-align:center; color:#FF0000;height:100%" id="dx_999_t_smtz_0_71">0</span><span style="width:39px; float:left; text-align:center; color:#0000FF;height:100%" id="dx_999_t_smtz_0_72">35</span></div></div>
                </td>
                <td colspan='${len*6}'>
                    <svg xmlns="http://www.w3.org/2000/svg" id="svg" preserveAspectRatio="xMaxYMax" version="1.1" height="200px" width="100%" >
                        <defs>
                            <!--体温-->
                            <g id="T">
                                <line x1="0" y1="0" x2="6" y2="6" style="stroke:rgb(0,0,255);stroke-width:2" />
                                <line x1="0" y1="6" x2="6" y2="0" style="stroke:rgb(0,0,255);stroke-width:2" />
                            </g> 
                            <g id="R">
                                <rect  height="6" width="6" y="0" x="0"  stroke-width="0" stroke="#000" fill="#7631a1"/>
                            </g>
                            <!--脉搏-->
                            <g id="P">
                                <circle cx="0" cy="0" r="4"  fill="red" />
                            </g>
                            <!--心率-->
                            <g id="HR">
                                <circle cx="0" cy="0" r="4" stroke="red" stroke-width="1" fill="transparent" />
                            </g>
                        </defs>
                    </svg>
                </td>`;
            }
            content +="</tr>";
        }
        
        

        

        for(let i=0;i<trAttr.length;i++){
            content +='<tr id="'+trAttr[i].id+'">';
            for(let j=0;j<=len;j++){
                if(j===0){
                    if(trAttr[i].id=="advice"){
                        content += '<td  valign="top"></td>'
                    }else{
                        content += '<td >'+trAttr[i].name+'</td>'
                    }
                    
                }else{
                    content+=`<td colspan="${trAttr[i].isColSpan?len*6:6}" valign="top"></td>`
                    if(trAttr[i].isColSpan){
                        break
                    }
                }
            }
            content +='</tr>'
        }
        content+='<tbody>'
        document.getElementById('table').innerHTML=content;
        this.initData(len)
    }

    /**
     * 获取当前时间
     * @returns {string}
     */
    getDate(){
        let now = new Date()
        let year = now.getFullYear()
        let month = (now.getMonth()+1)<10?('0'+(now.getMonth()+1).toString()):(now.getMonth()+1)
        let day = now.getDate()<10?'0'+now.getDate().toString():now.getDate()
        return year+'-'+month+'-'+day
    }

    /**
     * 计算时间
     * @param day
     * @param date
     * @returns {string}
     * @constructor
     */
    InitDateTime(day,date) {
        let agoDate = new Date(Date.parse(date.replace(/-/g,  "/")));
        let agoTime = agoDate.getDate();
        let dayAgo = -day + agoTime;
        agoDate.setDate(dayAgo);

        let agoDay = agoDate.getDate()<10?'0'+agoDate.getDate().toString():agoDate.getDate();
        let agoMonth = agoDate.getMonth()+1<10?'0'+(agoDate.getMonth()+1).toString():(agoDate.getMonth()+1);
        let agoYear = agoDate.getFullYear();

        let dateFrom = (agoYear.toString() + '-' + agoMonth.toString() + '-' + agoDay.toString());
        return dateFrom
    }
    initLabelData(type,data){
        data.forEach((element,index) => {
            if(element){
                let keys = Object.keys(element);
                let len = keys.length
                if(len>0){
                    for(let i =0 ;i<len;i++){
                        document.getElementById(type)
                        .querySelectorAll('td')[index+1].appendChild(new InViewLabel(Object.assign(element[keys[i]],{id:keys[i]})));
                    }
                }
            }
        });
    }
    initAdviceData(type,data,days=7){
        data.forEach((element,index) => {
            if(element){
                document.getElementById(type)
                        .querySelectorAll('td')[0].appendChild(
                            new InViewLabel({'type':type,'info':element.name,'id':element.id}));
                let svgLeft  = (element.dose.begin)*126;
                let svgTop = index * 20;            
                let svgInfo = element.dose.info;
                let svgId = element.dose.id  
                let begin = element.dose.begin;
                let end = element.dose.end;  
                let len = 0;
                let arrow = true;
                if(end ==-1){
                    len = (days-begin)*126;
                }else{
                    len = (end-begin>0?end-begin:0.2)*126;
                    arrow = false;
                } 
                let color = Utils.color16();    
                document.getElementById('advice').querySelectorAll('td')[1].appendChild(new InterViewSvg({'top':svgTop,'left':svgLeft,'info':svgInfo,'id':svgId,'length':len,'arrow':arrow,'color':color}));
            }
        });
    }
    initData(showDays){
        let check = this.data.check;
        if(check){
            this.initLabelData('check',check);
        }
        let test = this.data.test;
        if(test){
            this.initLabelData('test',test);
        }
        let emr = this.data.emr;
        if(emr){
            this.initLabelData('emr',emr);
        }
        let prescription = this.data.prescription;
        if(prescription){
            this.initLabelData('prescription',prescription);
        }
        let handle = this.data.handle;
        if(handle){
            this.initLabelData('handle',handle);
        }
        let advice = this.data.advice;
        if(advice){
            this.initAdviceData('advice',advice,showDays);
        }
        this.initSvg(showDays,126,201);

        let temperatureArr = this.data.T;
        this.makeTempCrossLine(temperatureArr,3);
        let rArr = this.data.R;
        this.makeRLine(rArr,3);
        let pArr = this.data.P;
        this.makePulseLine(pArr);
        
       
    }
    /**
     * 初始化svg  坐标系，tips
     * @param {*} showDays 
     * @param {*} svgUnitWidth 
     * @param {*} svgHeight 
     */
    initSvg(showDays,svgUnitWidth,svgHeight){
        let svg = d3.select("#svg");
        svg.attr("width",svgUnitWidth*showDays).attr("height",svgHeight);
        let damainX = showDays*6;
        let xSc = d3.scaleLinear()
            .domain([0, damainX])
            .range([0, svgUnitWidth*showDays]);
        this.xSc = xSc;
        //公用X坐标轴
        let xAxis = d3.axisTop(xSc).ticks(damainX).tickSize(svgHeight-1);
        this.xAxis = xAxis;
        svg.append("g").call(xAxis).attr("transform","translate(0,"+(svgHeight-1)+")");
        //体温Y坐标轴
        let ytemSc = d3.scaleLinear().domain([42,35]).range([0,svgHeight-1]);
        let ytemAxis = d3.axisRight(ytemSc).ticks(8).tickSize(svgUnitWidth*showDays);
        this.ytemSc = ytemSc;
        this.ytemAxis = ytemAxis;
        svg.append("g").call(ytemAxis)
            .classed('axis_y', true);
        d3.selectAll(".axis_y .tick:nth-of-type(6) line").attr('stroke','red')
        //呼吸Y坐标系
        let yRSc = d3.scaleLinear().domain([35,0]).range([0,svgHeight-1]);
        let yRAxis = d3.axisRight(yRSc).ticks(8).tickSize(0).tickValues("");
        this.yRSc = yRSc ;
        this.yRAxis = yRAxis;
        //脉搏Y坐标系
        let yPSc = d3.scaleLinear().domain([140,0]).range([0,svgHeight-1]);
        let yPAxis = d3.axisRight(yPSc).ticks(8).tickSize(0).tickValues("");
        this.yPSc = yPSc;
        this.yPAxis = yPAxis;
        svg.append("g").call(yRAxis);
        this.svg = svg;

        

        //创建tips
        let tips = svg.append ('g')
        .attr('id','tips')
        .attr ('class', 'tips')
        .style('display','none')
        this.tips = tips;
        let tipsRect = tips.append ('path')
            .attr('id','tipsRect')
            .attr ('class' , 'tips-border' )
            .attr ('d' , 'm5.99786,9.79993l0,0c0,-2.65063 2.97544,-4.79938 6.64583,-4.79938l3.02083,0l0,0l14.49999,0l27.18748,0c1.76259,0 3.45298,0.50565 4.69932,1.40571c1.24633,0.90006 1.94652,2.1208 1.94652,3.39368l0,11.99845l0,0l0,7.19907l0,0c0,2.65063 -2.97544,4.79938 -6.64583,4.79938l-27.18748,0l-18.94245,12.20371l4.44246,-12.20371l-3.02083,0c-3.67039,0 -6.64583,-2.14875 -6.64583,-4.79938l0,0l0,-7.19907l0,0l0,-11.99845z' )
            .attr('fill','red')
            .attr("opacity","0.3")
        this.tipsRect= tipsRect;    
        let tipsText = tips.append ('text')
            .attr('id','tipsText')
            .attr('class' ,'tips-text')
            .attr( 'x' , 6 )
            .attr( 'y' , 25 )
            .attr( 'fill',"black")
            .attr('font-size','14px')
            .text ( '' ) ;
       this.tipsText = tipsText;
        


    }
    
    /**
     * 呼吸
     * @param {*} ds 
     * @param {*} offset 
     */
    makeRLine(ds,offset){
        let svg = this.svg;
        let xSc = this.xSc;
        let ySc = this.yRSc;
        let len = ds.length;
        var resDs = [];
       
        for(let i =0;i<len;i++){
            //新数组，x坐标，y坐标，坐标上的值
            if(ds[i].y!=""){
                let newArr =[ds[i].x,ds[i].y];
                resDs.push(newArr);
                
            }
        }
        resDs = resDs.map(d => [ xSc(d[0]+0.5), ySc(d[1]) ,d[1]] );
        let tipsText = this.tipsText;
        let tips = this.tips;
        let tipsRect = this.tipsRect;
        let tems = svg.append("g")
            .selectAll("R").data(resDs).enter()
            .append("use")
            .attr("href","#R")
            .attr("data-y",d =>d[2])
            .attr("transform",d=>"translate("+(d[0]-offset)+","+(d[1]-offset)+") ")
            .attr("opacity",d =>d[1]==undefined ? 0 : 1)
            .classed("outerData",true)
            .on("mousemove",function(e){
                var pt = d3.pointer( e ,tems.node());  
                console.log(pt,e.target.dataset.y);
                tipsText.text ("R："+e.target.dataset.y) ;
                tips.attr ('transform', 'translate(' + (e.pageX-126) + ',' + (e.pageY-90) + ')' )
                tipsRect.attr("fill","rgb(255,140,0)")
                tips.style('display', 'block');
            })
            .on ('mouseout' , function () {
                tips.style('display', 'none');
            })
        var lnMaker  = d3.line().defined((d,i) => d[1]==undefined ? false : true);
        svg.append("g").append("path")
            .attr("d",lnMaker(resDs))
            .attr("fill","none")
            .attr("stroke","#7631a1")
            .classed("outerData",true);


    }
    /**
     * 
     * @param {传入数据，42个 {"y":100,type:"P"}的数组} ds 
     */
     makePulseLine(ds){
        let svg = this.svg;
        let xSc = this.xSc;
        let ySc = this.yPSc;
        let len = ds.length;
        var resDs = []
        for(let i =0;i<len;i++){
            //新数组，x坐标，y坐标，坐标上的值
            if(ds[i].y!=""){
                let newArr =[ds[i].x , ds[i].y , ds[i].type];
                resDs.push(newArr);
            }
            
        }
        resDs = resDs.map(d => [ xSc(d[0]+0.5), ySc(d[1]), d[2] ,d[1]] );
        let tips = this.tips
        let tipsText = this.tipsText;
        let tipsRect = this.tipsRect;
        let tems = svg.append("g")
            .selectAll("bcuse").data(resDs).enter()
            .append("use")
            .attr("href",d =>d[2])
            .attr("data-y",d =>("#P"==d[2]?"P：":"HR：")+d[3])
            .attr("transform",d=>"translate("+(d[0])+","+(d[1])+") ")
            .attr("opacity",d =>d[1]==undefined ? 0 : 1)
            .classed("outerData",true)
            .on("mousemove",function(e){
                // var pt = d3.pointer( e,tems.node() );  
                // console.log(pt,e.target.dataset.y);
                tipsText.text (e.target.dataset.y) ;
                tips.attr ('transform', 'translate(' + (e.pageX-126) + ',' + (e.pageY-90) + ')' )
                tipsRect.attr("fill","rgb(255,140,0)")
                tips.style('display', 'block');
               
            })
            .on ('mouseout' , function () {
                tips.style('display', 'none');
            })
        var lnMaker  = d3.line().defined((d,i) => d[1]==undefined ? false : true);;
        svg.append("g").append("path")
        .attr("d",lnMaker(resDs))
        .attr("fill","none")
        .attr("stroke","red")
        .classed("outerData",true)
    }


    /**
     * 体温记录
     * @param {*} ds 
     * @param {*} showDays 
     * @param {*} svgUnitWidth 
     * @param {*} svgHeight 
     * @param {*} offset 
     */  
    makeTempCrossLine(ds,offset){
        let svg = this.svg;
        let xSc = this.xSc;
        let ySc = this.ytemSc;
        
        let len = ds.length;
        var resDs = [];
        var physicalCool = [];
        for(let i =0;i<len;i++){
            //新数组，x坐标，y坐标，坐标上的值
            if(ds[i].y!=""){
                let newArr =[ds[i].x,ds[i].y];
                resDs.push(newArr);
                if(ds[i].y1!=undefined){//有物理降温
                    let pcArr =[ds[i].x,ds[i].y,ds[i].y1] 
                    physicalCool.push(pcArr);
                }
            }
        }
        resDs = resDs.map(d => [ xSc(d[0]+0.5), ySc(d[1]) ,d[1]] );
        let tipsText = this.tipsText;
        let tips = this.tips;
        let tipsRect = this.tipsRect;
        let tems = svg.append("g")
            .selectAll("bcuse").data(resDs).enter()
            .append("use")
            .attr("href","#T")
            .attr("data-y",d =>d[2])
            .attr("transform",d=>"translate("+(d[0]-offset)+","+(d[1]-offset)+") ")
            .attr("opacity",d =>d[1]==undefined ? 0 : 1)
            .classed("outerData",true)
            .on("mousemove",function(e){
                var pt = d3.pointer( e ,tems.node());  
                console.log(pt,e.target.dataset.y);
                tipsText.text ("T："+e.target.dataset.y) ;
                tips.attr ('transform', 'translate(' + (e.pageX-126) + ',' + (e.pageY-90) + ')' )
                tipsRect.attr("fill","rgb(255,140,0)")
                tips.style('display', 'block');
            })
            .on ('mouseout' , function () {
                tips.style('display', 'none');
            })
        var lnMaker  = d3.line().defined((d,i) => d[1]==undefined ? false : true);
        svg.append("g").append("path")
            .attr("d",lnMaker(resDs))
            .attr("fill","none")
            .attr("stroke","blue")
            .classed("outerData",true);
        
        //绘制物理降温
        if(physicalCool.length>0){
            physicalCool.forEach((d)=>{
                //绘制虚线
                let pcResDs = [[xSc(d[0]+0.5),ySc(d[1])],[xSc(d[0]+0.5),ySc(d[2])]];
                svg.append("g").append("path")
                    .attr("d",lnMaker(pcResDs))
                    .attr("fill","none")
                    .attr("stroke-dasharray","5,5")
                    .attr("stroke","red")
                    .classed("outerData",true);
                 //绘制红色圆圈
                 let rhcDs = [xSc(d[0]+0.5),ySc(d[2])];
                 svg.append("g")
                    //  .selectAll("bcuse").data(rhcDs).enter()
                     .append("circle").attr("r",4)
                     .attr("cx",rhcDs[0]).attr("cy",rhcDs[1])
                     .style("fill","none")
                     .attr("stroke","red")
                     .classed("outerData",true)
                });
        }
    }
}

class InViewLabel{
    constructor(args){
        this.title=args.title
        this.type = args.type||"emr";
        this.id = args.id;
        this.info = args.info;
        this.event = () =>{
            Utils.sendDataToWat(JSON.stringify({
                event : "click",
                id: this.id,
                type: this.type
            }));
        }
        return this.render();
    }
    render(){
        let div = document.createElement("div");
        div.innerHTML= Utils.createDiv(this.title,this.info,this.type);
        div.onclick = this.event;
        return div;
    }
    
}
class InterViewSvg{
    constructor(args){
        this.top = args.top;
        this.left = args.left;
        this.info = args.info;
        this.id = args.id;
        this.length = args.length;
        this.arrow = args.arrow;
        this.color = args.color;
        this.event = () =>{
            Utils.sendDataToWat(JSON.stringify({
                event : "click",
                id: this.id,
                type: "advice"
            }));
        }
        return this.render();
    }
    render(){
        let div = document.createElement("div");
        div.innerHTML = Utils.createSvg(this.top+'px',this.left+'px',this.info,this.id,this.length,this.arrow);
        div.onclick = this.event;
        return div;
    }
}
/**
 * 带图标标签
 
 export class ImgLabel extends InViewLabel{
    constructor(args){
        super(args);
        this.type=args.type||'emr';
        return this.render();
    }
    render(){
        let div = document.createElement("div");
        div.innerHTML= Utils.createDiv(this.title,this.info,this.type);
        div.onclick = this.event;
        return div;
    }
}
*/

class Utils{
    constructor(){
       
    }
    static getRealPath(){
        let curWwwPath = window.document.location.href;
	    let pathName = window.document.location.pathname;
	    let pos = curWwwPath.indexOf(pathName);
	    let localhostPaht = curWwwPath.substring(0, pos);
	    let projectName = pathName.substring(0, pathName.substr(1).indexOf('/')+1);
        return localhostPaht+projectName;
    }
    static sendDataToWat(data){
        return  window.parent.top.DxURLPage.action(this.GetQueryString('strwinid'),this.GetQueryString('strctrid'),data);
    }
    static GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null){
            return  unescape(r[2]); 
        }
        return null;
    }
    static createDiv(title,info,type,color) {
        let divTemplate = "";
        switch(type) {
            case "emr":
               divTemplate = `<div style="cursor:pointer;width:116px; height:50px; background:url(${this.getRealPath()}/resources/component/iviewbl.png) center no-repeat; font-size:12px; margin-top:-3px;margin-left:-1px;padding:0; text-align:left"><div style="width:116px; height:25px; line-height:27px "><div style="width:29px; height:25px; float:left; text-align:right; color:#FFFFFF;line-height:32px"></div><div nowrap="true" style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:87px; height:29px; float:left; text-align:left; line-height:42px; color:#0284fe" title=""></div></div><div nowrap="true" style="margin-left:2px;cursor:hand;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:116px;height:25px; line-height:26px; text-align:left" title=${info}>&nbsp;${info}</div></div>`;
               break;
            case "test":
               divTemplate = `<div style="cursor:pointer;width:116px; height:50px; background:url(${this.getRealPath()}/resources/component/iviewjy.png) center no-repeat; font-size:12px; margin-top:-3px;margin-left:-1px;padding:0; text-align:left"><div style="width:116px; height:25px; line-height:27px "><div style="width:29px; height:25px; float:left; text-align:right; color:#FFFFFF;line-height:32px"></div><div nowrap="true" style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:87px; height:29px; float:left; text-align:left; line-height:42px; color:red" title=${title}>${title}</div></div><div nowrap="true" style="margin-left:2px;cursor:hand;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:116px;height:25px; line-height:26px; text-align:left" title=${info}>&nbsp;${info}</div></div>`;               
               break;
            case "check":
               divTemplate = `<div style="cursor:pointer;width:116px; height:50px; background:url(${this.getRealPath()}/resources/component/iviewjc.png) center no-repeat; font-size:12px; margin-top:-3px;margin-left:-1px;padding:0; text-align:left"><div style="width:116px; height:25px; line-height:27px "><div style="width:29px; height:25px;font-size:12;float:left;text-align:center; color:#FFFFFF;line-height:32px">检查</div><div nowrap="true" style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:87px; height:29px; float:left; text-align:left; line-height:42px; color:#0284fe" title=${title}>${title}</div></div><div nowrap="true" style="margin-left:2px;cursor:hand;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:116px;height:25px; line-height:26px; text-align:left" title=${info}>&nbsp;${info}</div></div>`
                break;
            case "advice":
                divTemplate = `<div nowrap="true" style="cursor:pointer;color:#000000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:116px; height:20px; float:left; border:0px solid #999999; line-height:20px; text-align:center; margin-top:0px; " title=${info}>${info}</div>`
                break;
            default:
               divTemplate = `<div nowrap="true" style="cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:116px; height:20px; border:1px solid #999999; line-height:20px; text-align:center; margin-top:1px; " title=${info}>${info}</div>`;
       } 
       return divTemplate;
    }
    static createSvg(top,left,info,id,length,arrow){
        let color = this.color16();
        if(arrow){
            return `<div  style="position:absolute;cursor:pointer;height:20px;left:${left};top:${top};width:${length}">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="20px" width="${length}"> 
                            <defs>
                            <marker id="idArrow${id}" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="3" markerHeight="10" orient="auto">
                            <path d="M 0 0 L 20 10 L 0 20 z" fill="${color}" stroke="${color}"></path>
                            </marker>
                            </defs> 
                            <line marker-end="url(#idArrow${id})" x1="0" y1="10" x2="${length-11}" y2="10" style="stroke:${color};stroke-width:4;"></line>
                        </svg>
                        <div  style="z-index:100;position:absolute;left:2px;top:2px;font-weight:bold;font-size:12;color:#060606">${info}</div>
                    </div>`;
        }else{
            return `<div  style="position:absolute;cursor:pointer;height:20px;left:${left};top:${top};width:${length}">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="20px" width="${length}"> 
                            <line x1="0" y1="10" x2="${length-11}" y2="10" style="stroke:#659F63;stroke-width:4;"></line>
                        </svg>
                    <div  style="z-index:100;position:absolute;left:2px;top:2px;font-weight:bold;font-size:12;color:#060606">${info}</div>
                    </div>`;
        }
        

        
    }
    static color16(){
        let colors = Array.of('#78debe','#4395e2','#8bcf31','#cbc874','#7631a1',
        '#b488f0','#217c62','#fddc49','#70323e','#f509f3','#a1baee','#ed7a30',
        '#fa53fd','#73e50f','#254911','#c86e70','#db2dac','#395599');
        let index = Math.floor((Math.random()*colors.length));
        return colors[index];
        

    }




    
}