import { patentKeywordsHighlight } from '../../common/mixins'
const colourBlend = (c1, c2, ratio) => {
  ratio = Math.max(Math.min(Number(ratio), 1), 0)
  let r1 = parseInt(c1.substring(1, 3), 16)
  let g1 = parseInt(c1.substring(3, 5), 16)
  let b1 = parseInt(c1.substring(5, 7), 16)
  let r2 = parseInt(c2.substring(1, 3), 16)
  let g2 = parseInt(c2.substring(3, 5), 16)
  let b2 = parseInt(c2.substring(5, 7), 16)
  let r = Math.round(r1 * (1 - ratio) + r2 * ratio)
  let g = Math.round(g1 * (1 - ratio) + g2 * ratio)
  let b = Math.round(b1 * (1 - ratio) + b2 * ratio)
  r = ('0' + (r || 0).toString(16)).slice(-2)
  g = ('0' + (g || 0).toString(16)).slice(-2)
  b = ('0' + (b || 0).toString(16)).slice(-2)
  return '#' + r + g + b

}
export const commonMixins = {
  props: ['patent', 'projectId', 'patentId'],
  mixins: [patentKeywordsHighlight],
  methods: {
    getImagePath(url) {
      if (!url) {
        return ''
      }
      return this.$p + url
    },
  }
}

export const addContrast = {
    props:['isTrue','type1','reportType'],
  data() {
    return {
      isSelecting:false,
      mX :0,
      mY:0,
      currentColor:"#dff209",
      isMarking: false,
      dt:null,
      anchorOffset:0,
      selectString:'',
      currentSelectObj:{},
      selectMarkObjectId:null,
      add:this.isTrue
    }
  },
  mounted() {
    document.onselectionchange = () => {
      this.isSelecting=true;
   };
  },
  watch:{
    isTrue(val){
      console.log(val)
        this.add = val
    }
  },
  methods:{
    mousemove(e){
      this.mX = e.pageX;
      this.mY = e.pageY;
  },

  mouseup(){
    this.$emit('isTrues',false)
    console.log(1,this.type1,this.isSelecting)
    console.log(this.reportType)
    if(this.type1 == 2 && [0,1,2].includes(Number(this.reportType))){
      this.isSelecting=true;
         if(this.isSelecting){
          this.isSelecting = false;
          let selectObj = document.getSelection();
          this.anchorOffset =0;
          let temSelectObj = this.getSelectobj(selectObj);
          var tempdt = this.getColumnName(selectObj.anchorNode);
          if(tempdt != undefined && selectObj.toString()!=''){
              this.currentSelectObj = temSelectObj;
              this.currentSelectObj.color = this.currentColor;
              this.currentSelectObj.Type = 0;
              this.currentSelectObj.patentNo = this.patent.publicNo
              // this.showPizhu();

              this.isMarking = true;
              
          }
          else{
            this.currentSelectObj = {};
          }
          
        //   console.log(this.currentSelectObj)
          if(this.currentSelectObj.Id){
            console.log(2)
            this.$emit('openContrast',this.currentSelectObj)
          }
          console.log(this.isTrue,this.add)
          if(this.add){
            console.log(1)
            this.gaoliang()
            
          }
        
      }
    }
   
  },

 showPizhu(){
      let dl =document.getElementsByClassName("dialog");
      if((document.body.clientWidth - this.mX - 320) <0){
        this.mX = document.body.clientWidth -320;
      }

      if((document.body.clientHeight - this.mY - 40)<0){
        this.mY = document.body.clientHeight - 40;
      }
              
      dl[0].setAttribute("style", "opacity:0.95;box-shadow: 10px 10px 5px #888888;display:block;position:absolute;left:" + this.mX.toString() +"px;top:" + this.mY.toString() +"px;background-color: #CCFF99;border-radius: 15px 15px;height:30px;");
              
  },

   hiddenPizhu(){
      let dl =document.getElementsByClassName("dialog");
              
      dl[0].setAttribute("style", "display:none;");
        
  },

  getSelectobj(selectObj){
      var temNode = selectObj.anchorNode;
    //   console.log(temNode)
      var a = temNode.parentElement
      NotIncludeDataType(a)
        function NotIncludeDataType(node){
 
        // console.log('11',node.getAttribute("data-type"))
        if (node.getAttribute("data-type") != null) {
          //       console.log(temNode)
          // return temNode
          temNode = node
        } else {
       
          NotIncludeDataType(node.parentElement);
        }

    
      }
      //取得选择的栏位节点
      
          // do{
          //     temNode = temNode.parentNode;
          // }
          // while(this.NotIncludeDataType(temNode));
      // console.log(temNode)
     
      let index =0;
      this.getColumn(temNode,selectObj);

      return {"Id":this.uuid(),"column":temNode.getAttribute("data-type"),"index":this.anchorOffset,"text":selectObj.toString(),'temNode':temNode};

  },

  NotIncludeDataType(temNode){
 
    // console.log('11',temNode.getAttribute("data-type"))
    if (temNode.getAttribute("data-type") != null) {
      			// console.log(temNode)
      return temNode
    } else {
   
      this.NotIncludeDataType(temNode.parentElement);
    }
    // console.log(temNode.nodeType)
    //   if(temNode.nodeType ==3){
    //       return true;
    //   }
    //   else{
    //       // console.log(temNode.hasOwnProperty('getAttribute'))
    //       // if(temNode.hasOwnProperty('getAttribute')){
    //       //     return true
    //       // }
    //       return temNode.hasOwnProperty('getAttribute');
    //   }

  },

  uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";
  
      var uuid = s.join("");
      return uuid;
  },

  getColumn(node,selectObj){
    //   console.log(node);
      if(node != selectObj.anchorNode){
          if(node.nodeValue != null ){
            this.anchorOffset += node.nodeValue.trim().length;
          }

          let iIndex =0;
          while(iIndex<node.childNodes.length){
              if(this.getColumn(node.childNodes[iIndex],selectObj)){
                  return true;
              }
              iIndex +=1;
          }
          console.log("anchorOffset1",this.anchorOffset)
          return false;
      }
      else{
        if(selectObj.anchorNode.nodeValue!=null){
          if(selectObj.extentOffset>=selectObj.anchorOffset){
            this.anchorOffset += selectObj.anchorOffset
          }else{
            this.anchorOffset += selectObj.extentOffset
          }
           
        }
        // console.log("anchorOffset2",this.anchorOffset,selectObj)
          return true;
      }
  },

  setColor(color){
    this.currentSelectObj.color = color;
    this.currentColor = color;
      let dropbtn = document.getElementsByClassName("dropbtn");
      dropbtn[0].style.backgroundColor = color;
      
  },

  xiahuaxian(){

      if(this.currentSelectObj.Id != undefined){
        this.currentSelectObj.Type = 1;
        this.hiddenPizhu();
        this.AddClass(this.currentSelectObj);
        this.isMarking = false;

          //保存到数据库
      }
  },

   gaoliang(){
      if(this.currentSelectObj.Id != undefined){
        this.currentSelectObj.Type = 2;
        // this.hiddenPizhu();

        this.AddClass(this.currentSelectObj);
        this.isMarking = false;

          //保存到数据库
      }
  },

  pizhu(){
      if(this.currentSelectObj.Id != undefined){
        this.currentSelectObj.Type = 2;
        this.hiddenPizhu();

        this.AddClass(this.currentSelectObj);
        this.isMarking = false;

          //保存到数据库
      }
  },

  delMark(){
      if(this.selectMarkObjectId != undefined){
          let markTag = document.getElementById(this.selectMarkObjectId);

          while(markTag !=undefined){
              if(markTag != undefined){
                  markTag.parentElement.innerHTML = markTag.parentElement.innerHTML.replace(markTag.outerHTML,markTag.innerHTML);
              }

              markTag = document.getElementById(this.selectMarkObjectId);
          }
      }

      //从数据库中删除

      this.hiddenPizhu();
  },

  getColumnName(el){
      let root = el;

      if(el == undefined){
          return undefined;
      }

      if(!(el instanceof HTMLElement)){
          root = el.parentElement;
      }
      

      let dt = root.getAttribute("data-Type");

      if (dt != undefined){
          return root;
      }
      
      return dt = this.getColumnName(root.parentElement);

  },

  SplitHtmlTag(el){
      let temInnerHtml = el.innerHTML.trim();
      let pattern = /<[^>]+>/g;
      let Indexs =[];
      let i=0
      var match = null
      while((match = pattern.exec(temInnerHtml)) != null){
          Indexs[i] = match;
        //   console.log(match);
          //Indexs[i] =[ match.index,m.value];
          i++;
      }
      //var m = temInnerHtml.match(pattern);
      var splitStrings = new Array();
      i=0;
      var currentIndex =0;
      for(var index=0;index<Indexs.length;index++){
          if(Indexs[index].index >currentIndex){
              splitStrings[i] = {"text":  temInnerHtml.substring(currentIndex,Indexs[index].index), "type":"text"};
              i++;
              splitStrings[i] = {"text":  Indexs[index][0], "type":"tag"};
              i++;
          }
          else
          {
              splitStrings[i] = {"text":  Indexs[index][0], "type":"tag"};;
              i++;
          }

          currentIndex = Indexs[index].index + Indexs[index][0].length;

      }

      if(currentIndex< temInnerHtml.length){
          splitStrings[i] = {"text": temInnerHtml.substring(currentIndex,temInnerHtml.length), "type":"text"};
      }

      return splitStrings;

  },

 selectMark(Id){
    // console.log(Id)
  this.selectMarkObjectId = Id;
//   this.showPizhu();
  },

  AddClass(selectObject){
    // console.log(selectObject)

    //   let el = this.getColumnNode(selectObject.column);
      let el = selectObject.temNode;
        let splitStrings = this.SplitHtmlTag(el);
// console.log(splitStrings)
      let bgColor = selectObject.color;
      let startTag ='<span onclick="selectMark(\'' + selectObject.Id + '\')" id="' + selectObject.Id +'" style="background-color:' + selectObject.color + '">';
      if(selectObject.Type ==1){
          startTag ='<span onclick="selectMark(\'' + selectObject.Id + '\')" id="' + selectObject.Id +'" style="border-bottom:2px solid ' + selectObject.color + '">';
      }
      let imgTag = '<span Id="' + selectObject.Id + '"><i class="el-icon-location-outline"></i></span>';
      let endTag ='</span>';
      let elText = '';

      splitStrings.forEach(function (item){
          if(item.type =='text'){
              elText = elText + item.text;
          }
      });

      let pattern = new RegExp(selectObject.text.replace(/[\r\n]/g,"").replace(/\ +/g,""),"g");

      let Indexs =[];
      let i=0

      if(selectObject.index <0){
          while((match = pattern.exec(elText)) != null){
              Indexs[i] = match;
            //   console.log(match);
              //Indexs[i] =[ match.index,m.value];
              i++;
          }
      }
      else
      {
          Indexs[i] = [selectObject.text];
          Indexs[i].index =selectObject.index;
      }
      Indexs.forEach(function (match){
        let currentIndex =0;
        let temSplitStrings = new Array();
        
        splitStrings.forEach(function (item){
            if(item.type =='text'){
                if(match.index >= currentIndex && match.index < (currentIndex + item.text.length)){
                    if((match.index + match[0].length) <= (currentIndex + item.text.length)){
                        if(match.index > currentIndex){
                            temSplitStrings.push({text:item.text.substring(0,match.index-currentIndex),type:'text'});
                        }
                        // console.log(1)
                        temSplitStrings.push({text:startTag,type:'tag'});
                        temSplitStrings.push({text:match[0],type:'text'});
                        if(selectObject.Type ==2){
                        //   console.log(12)
                          temSplitStrings.push({text:imgTag,type:'tag'});
                      }
                        temSplitStrings.push({text:endTag,type:'tag'});
                        
                        if((match.index + match[0].length) < (currentIndex + item.text.length)){
                            temSplitStrings.push({text:item.text.substring((match.index + match[0].length)-currentIndex),type:'text'}); 
                        }
                    }
                    else
                    {
                        // console.log(2)
                        if(match.index > currentIndex){
                            temSplitStrings.push({text:item.text.substring(0,match.index-currentIndex),type:'text'});
                        }
                        if(temSplitStrings.length>1){
                            // console.log(temSplitStrings[temSplitStrings.length-2].text.substr(1,1))
                            if(temSplitStrings[temSplitStrings.length-2].text.substr(1,1)!='/'){
                                let index = temSplitStrings[temSplitStrings.length-2].text.indexOf('background-color:')
                                let colorStr = temSplitStrings[temSplitStrings.length-2].text.substr(index+17,7)
                                let index2 = startTag.indexOf('background-color:')
                                let colorStr2 = startTag.substr(index2+17,7)
                            let acolor = colourBlend(colorStr,colorStr2,0.5)
                            let startTag2 = "<span style='background-color:"+acolor+"'>"
                            temSplitStrings.push({text:startTag2,type:'tag'});  
                            }else{
                                temSplitStrings.push({text:startTag,type:'tag'});
                            }
                            
                        }else{
                            temSplitStrings.push({text:startTag,type:'tag'});
                        }
                       
                        temSplitStrings.push({text:item.text.substring(match.index-currentIndex),type:'text'});     
                        temSplitStrings.push({text:endTag,type:'tag'});
                    }
                    
                }
                else
                {
                   
                    if((match.index + match[0].length) <= (currentIndex + item.text.length) && (match.index + match[0].length)>currentIndex){
                        // console.log( temSplitStrings[temSplitStrings.length-1])
                        if(temSplitStrings[temSplitStrings.length-1].text.substr(1,1)!='/'){
                             let index = temSplitStrings[temSplitStrings.length-1].text.indexOf('background-color:')
                             let colorStr = temSplitStrings[temSplitStrings.length-1].text.substr(index+17,7)
                             let index2 = startTag.indexOf('background-color:')
                             let colorStr2 = startTag.substr(index2+17,7)
                             let acolor = colourBlend(colorStr,colorStr2,0.5)
                             let startTag2 = "<span style='background-color:"+acolor+"'>"
                        temSplitStrings.push({text:startTag2,type:'tag'});
                        }else{
                            temSplitStrings.push({text:startTag,type:'tag'});
                        }
                       
                        temSplitStrings.push({text:item.text.substring(0,match.index + match[0].length-currentIndex),type:'text'});
                        if(selectObject.Type ==2){
                          temSplitStrings.push({text:imgTag,type:'tag'});
                      }
                        temSplitStrings.push({text:endTag,type:'tag'});
                        // console.log(3)
                        if((match.index + match[0].length) < (currentIndex + item.text.length)){
                            temSplitStrings.push({text:item.text.substring((match.index + match[0].length-currentIndex)),type:'text'}); 
                        }
                    }
                    else
                    {
                        if(match.index < currentIndex && (match.index + match[0].length) >= (currentIndex + item.text.length)){
                            // console.log(4)
                            temSplitStrings.push({text:startTag,type:'tag'});
                            temSplitStrings.push(item);
                            temSplitStrings.push({text:endTag,type:'tag'});
                        }
                        else
                        {
                            // console.log(5)
                            temSplitStrings.push(item);
                        }
                        
                    }
                    
                }

                currentIndex = currentIndex + item.text.length;
            }
            else
            {
                temSplitStrings.push(item);
            }
        });
        
        splitStrings = temSplitStrings;
    });
      // Indexs.forEach(function (match){
      //     let currentIndex =0;
      //     var temSplitStrings = new Array();
          
      //     splitStrings.forEach(function (item){
      //         if(item.type =='text'){
      //             if(match.index >= currentIndex && match.index < (currentIndex + item.text.length)){
      //                 if((match.index + match[0].length) <= (currentIndex + item.text.length)){
      //                     if(match.index > currentIndex){
      //                         temSplitStrings.push({text:item.text.substring(0,match.index-currentIndex),type:'text'});
      //                     }

      //                     temSplitStrings.push({text:startTag,type:'tag'});
      //                     temSplitStrings.push({text:match[0],type:'text'});
      //                     if(selectObject.Type ==2){
      //                         temSplitStrings.push({text:imgTag,type:'tag'});
      //                     }
      //                     temSplitStrings.push({text:endTag,type:'tag'});
                          
      //                     if((match.index + match[0].length) < (currentIndex + item.text.length)){
      //                         temSplitStrings.push({text:item.text.substring((match.index + match[0].length)-currentIndex),type:'text'}); 
      //                     }
      //                 }
      //                 else
      //                 {
      //                     if(match.index > currentIndex){
      //                         temSplitStrings.push({text:item.text.substring(0,match.index-currentIndex),type:'text'});
      //                     }

      //                     temSplitStrings.push({text:startTag,type:'tag'});
      //                     temSplitStrings.push({text:item.text.substring(match.index-currentIndex),type:'text'});     
      //                     temSplitStrings.push({text:endTag,type:'tag'});
      //                 }
                      
      //             }
      //             else
      //             {
      //                 if((match.index + match[0].length) <= (currentIndex + item.text.length) && (match.index + match[0].length)>currentIndex){
      //                     temSplitStrings.push({text:startTag,type:'tag'});
      //                     temSplitStrings.push({text:item.text.substring(0,match.index + match[0].length-currentIndex),type:'text'});
      //                     if(selectObject.Type ==2){
      //                         temSplitStrings.push({text:imgTag,type:'tag'});
      //                     }
      //                     temSplitStrings.push({text:endTag,type:'tag'});

      //                     if((match.index + match[0].length) < (currentIndex + item.text.length)){
      //                         temSplitStrings.push({text:item.text.substring((match.index + match[0].length-currentIndex)),type:'text'}); 
      //                     }
      //                 }
      //                 else
      //                 {
      //                     if(match.index < currentIndex && (match.index + match[0].length) >= (currentIndex + item.text.length)){
      //                         temSplitStrings.push({text:startTag,type:'tag'});
      //                         temSplitStrings.push(item);
      //                         temSplitStrings.push({text:endTag,type:'tag'});
      //                     }
      //                     else
      //                     {
      //                         temSplitStrings.push(item);
      //                     }
                          
      //                 }
                      
      //             }

      //             currentIndex = currentIndex + item.text.length;
      //         }
      //         else
      //         {
      //             temSplitStrings.push(item);
      //         }
      //     });
          
      //     splitStrings = temSplitStrings;
      // });

      let temInnerHtml = '';
      splitStrings.forEach(function (item){
          temInnerHtml = temInnerHtml + item.text;
      });
// console.log(temInnerHtml)

      el.innerHTML = temInnerHtml;
  
},
   getColumnNode(dataType){
    // console.log(dataType)
      let ret = document.querySelector('[data-Type*="' + dataType +'"]');
    //   console.log('ret:',ret)
      return ret;
      
  },

   rdmRgbColor() {
      //随机生成RGB颜色
      const arr = [];
      for (let i = 0; i < 3; i++) {
          // 暖色
          // arr.push(Math.floor(Math.random() * 128 + 64));
          // 亮色
          arr.push(Math.floor(Math.random() * 128 + 128));
      }
      const [r, g, b] = arr;
      // rgb颜色
      // var color=`rgb(${r},${g},${b})`;
      // 16进制颜色
      const color = `#${
          r.toString(16).length > 1 ? r.toString(16) : "0" + r.toString(16)
      }${g.toString(16).length > 1 ? g.toString(16) : "0" + g.toString(16)}${
          b.toString(16).length > 1 ? b.toString(16) : "0" + b.toString(16)
      }`;
      return color;
  },


   
  }
}