import {config} from "../../kanhouchu/config.js";
import {httpUtil} from "../../kanhouchu/util/httpUtil.js";
import {fullMap} from "../../kanhouchu/fullMap.js";
import {khcAlert} from "../../kanhouchu/component/alert/khcAlert.js";
import {util} from "../../kanhouchu/util/util.js";

class ControlPanel {
  constructor(lf, ControlAreaID) {

    this.lf = lf

    this.ControlAreaID = ControlAreaID;

    this.shapeList = [
      {

        id: 'zoomin',
        icon: '<i class="fas fa-window-minimize d-block"></i>',
        callback: () => {
          this.lf.zoom(false);
        }
      },
      {
        id: 'zoomout',

        icon: '<i class="fas fa-plus d-block"></i>',
        callback: () => {
          this.lf.zoom(true);
        }
      },
      {
        id: 'undo',

        icon: '<i class="fas fa-undo d-block"></i>',
        callback: () => {
          this.lf.undo();
        }
      },
      {

        id: 'redo',
        icon: '<i class="fas fa-redo-alt d-block"></i>',
        callback: () => {
          this.lf.redo();
        }
      },
      {
        id: 'downimg',

        icon: '<i class="fas fa-cloud-download-alt d-block"></i>',
        callback: () => {
          lf.getSnapshot()
        }
      },
      {

        id: 'save',
        icon: '<i class="fas fa-save d-block"></i>',
        callback: () => {
          this.save();
        }
      },

    ]

  }
  setUndoIsActive(isActive){
    let undoElement=document.getElementById('undo').querySelector('div');
    if(isActive){
      let attr=undoElement.getAttribute('style');
      let attrArray=attr.split(";")
      let newAttr='';
      for(var x=0;x<attrArray.length;x++){
        if(attrArray[x].indexOf('color')>=0){
          newAttr+='color:blue';
        }else{
          newAttr+=attrArray[x]+";"
        }
      }
      
      undoElement.setAttribute('style',newAttr)
    }else{
      
      let attr=undoElement.getAttribute('style');
      let attrArray=attr.split(";")
      let newAttr='';
      for(var x=0;x<attrArray.length;x++){
        if(attrArray[x].indexOf('color')>=0){
          newAttr+='color:grey';
        }else{
          newAttr+=attrArray[x]+";"
        }
      }
      
      undoElement.setAttribute('style',newAttr)
    }

  }
  setRedoIsActive(isActive){
    let redoElement=document.getElementById('redo').querySelector('div');
    if(isActive){
      let attr=redoElement.getAttribute('style');
      let attrArray=attr.split(";")
      let newAttr='';
      for(var x=0;x<attrArray.length;x++){
        if(attrArray[x].indexOf('color')>=0){
          newAttr+='color:blue';
        }else{
          newAttr+=attrArray[x]+";"
        }
      }
     
      redoElement.setAttribute('style',newAttr)
    }else{
      let attr=redoElement.getAttribute('style');
      let attrArray=attr.split(";")
      let newAttr='';
      for(var x=0;x<attrArray.length;x++){
        if(attrArray[x].indexOf('color')>=0){
          newAttr+='color:grey';
        }else{
          newAttr+=attrArray[x]+";"
        }
      }
      
      redoElement.setAttribute('style',newAttr)
    }
  }
  rander() {

    let htmlTemplate = '';
    htmlTemplate += '<div class="row col-sm-12" style="margin:auto;line-height:20px;height:20px">';
    for (var i = 0; i < this.shapeList.length; i++) {
      if (i < this.shapeList.length - 1) {
        htmlTemplate += '<div class="col-sm-2" id=' + this.shapeList[i].id + ' style="text-align:center;background-color:white;padding-right: 0rem;padding-left: 0rem;">'
        htmlTemplate += ' <div style="text-align:center;width:100%;height:30%;margin:auto;color:blue">'
        htmlTemplate += this.shapeList[i].icon;
        htmlTemplate += "</div></div>"
      } else {
        htmlTemplate += '<div class="col-sm-2"  id=' + this.shapeList[i].id + '  style="text-align:center;background-color:white;padding-right: 0rem;padding-left: 0rem;">'
        htmlTemplate += ' <div style="text-align:center;width:100%;height:80%;margin:auto;color:blue">'
        htmlTemplate += this.shapeList[i].icon;
        htmlTemplate += "</div></div>"
      }
    }
    htmlTemplate += '</div>';
    return new Promise((resolve,reject) => {
      document.getElementById(this.ControlAreaID).insertAdjacentHTML("beforeEnd", htmlTemplate);
      resolve();
    }).then(() => {
      let that=this;
      for (var i = 0; i < this.shapeList.length; i++) {
        let controlItem = document.getElementById(this.shapeList[i].id);
       
        controlItem.onclick = (e) => {
         
          for(var j=0;j<that.shapeList.length;j++){
            if(that.shapeList[j].id==controlItem.getAttribute('id')){
              that.shapeList[j].callback();
            }
          }
        }
      }
    }
    )


  }
  save(){
    console.log('post save')
    let nodesMap=this.lf.graphModel.nodesMap;
    let textJson=JSON.parse(JSON.stringify(this.lf.graphModel.nodes[0].text));
    //let myBpmData={id:node.id,type:node.type,text:textJson.value,x:textJson.x,y:textJson.y}
    let bpmFlowData=fullMap.getObj('bpmFlowData');
    bpmFlowData=JSON.parse(bpmFlowData);
    let bpmTypeMap=fullMap.getObj('bpmTypeMap')
    for (let i = 0; i < bpmFlowData.model.childShapes.length; i++) {
      let thisNodeData=fullMap.getObj(bpmFlowData.model.childShapes[i]['resourceId'])//修改后的数据的需要从fullMap获取
      if(!util.isNull(bpmTypeMap.get(thisNodeData['stencil']['id']))){
        let node=nodesMap[thisNodeData['resourceId']]['model']
        textJson=JSON.parse(JSON.stringify(node.text));
        let documentationJson;
        if(thisNodeData['properties']['documentation'].length>0){
          documentationJson=JSON.parse(thisNodeData['properties']['documentation']);
        }else{
          documentationJson={}
        }
        documentationJson.x=textJson.x;
        documentationJson.y=textJson.y;
        let documentationStr=JSON.stringify(documentationJson);
        thisNodeData['properties']['documentation']=documentationStr;
        thisNodeData['properties']['name']=textJson.value;
        bpmFlowData.model.childShapes[i]=thisNodeData
      }else if(thisNodeData['stencil']['id']=='SequenceFlow'){
        bpmFlowData.model.childShapes[i]=thisNodeData
      }else if(thisNodeData['stencil']['id']=='InclusiveGateway'){
        let node=nodesMap[thisNodeData['resourceId']]['model']
        textJson=JSON.parse(JSON.stringify(node.text));
        let documentationJson;
        if(thisNodeData['properties']['documentation'].length>0){
          documentationJson=JSON.parse(thisNodeData['properties']['documentation']);
        }else{
          documentationJson={}
        }
        documentationJson.x=textJson.x;
        documentationJson.y=textJson.y;
        let documentationStr=JSON.stringify(documentationJson);
        thisNodeData['properties']['documentation']=documentationStr;
        thisNodeData['properties']['name']=textJson.value;
        bpmFlowData.model.childShapes[i]=thisNodeData
      }else{
        bpmFlowData.model.childShapes[i]=thisNodeData;//其他任务也set回去
      }
    }
    bpmFlowData.version='1.0.0';
    bpmFlowData.dsCode='ds_bpm_model';
    bpmFlowData.methodName='saveModel';
    let obj={url:config.getConfigJson().myActionUrl,params:bpmFlowData}
    httpUtil.post(obj, (response)=>{
      khcAlert.showSuccessMessage('保存成功')
    })
    //console.log(lf.graphModel.edges)
  }

}
export { ControlPanel };