text: import * as rrweb from 'rrweb';
  import {ref} from 'vue'
  import http from '../api/index'
  
  let events = ref([]);
  let stop = null;
  const showTip = (text, time = 6000) => {
    let ele = document.createElement('div');
    let span = document.createElement('span');
    let divStyle= {
      position: 'fixed',
      right: '10px',
      top: '10px',
      height: '50px',
      border: '1px solid #EBEEF5',
      'background-color': '#edf2fc',
      'box-shadow': '1px 1px 1px #EBEEF5',
      transition: 'opacity 2s linear',
      opacity:1
    }
    let spanStyle = {
      color: '#909399',
      'line-height': '50px',
      padding: '10px 20px',
      'font-size': '14px'
    }
    ele.setAttribute('style', Object.keys(divStyle).map(item => `${item}:${divStyle[item]}`).join(';'))
    span.setAttribute('style', Object.keys(spanStyle).map(item => `${item}:${spanStyle[item]}`).join(';'))
    // ele.style.cssText = JSON.stringify(divStyle);
    span.innerText =text || "播放完成，即将关闭!"
    ele.appendChild(span);
    document.body.appendChild(ele)
    setTimeout(() => {
      document.body.removeChild(ele)
      document.querySelector("#player").innerHTML = ''
    }, time)
  }
  
  const init = () => {
    stop = rrweb.record({
      emit(event){
        if(event.length > 100){
          stop()
        }
        events.value.push(event)
      }
    })
  }
  
  const rePlay = (item) => {
    let player = new rrweb.Replayer(JSON.parse(item.data) || events.value,{
      mouseTail: false,
      root: document.querySelector("#player")
    });
    player.play();
    player.on('finish', () => {
      showTip()
    })
  }
  
  const observe = () => {
     let observes = new MutationObserver((obs) => {
      console.log(obs)
    })
    observes.observe(document, {
      childList: true,
      attributes: true,
      subtree: true
    })
  }
  
  const record = () => {
    init()
    observe()
  }
  const stopRecord = () => {
    stop();
    events.value = []
  }
  
  const upload = async() => {
    let res = await http.post("saveEvents", {id: getUuId(), date: new Date().getTime(), events: JSON.stringify(events.value)})
    if(res.retCode !== "200"){
      console.log("保存快照失败")
    }
    stopRecord();
  }
  
  const getUuId = () => {
       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;
  }
  
  const getList = () => {
    return new Promise( (resolve, reject) => {
      http.get("/getEvents").then(({data}) => {
        if(data.retCode !== "200"){
          console.log("获取列表失败")
          reject() 
        }
        return resolve(data);
      });
      
    })
    
  }
  
  const remove = async() => {
    let res = await http.delete("/removeAll")
    if(res.retCode !== "200"){
      console.log("删除列表失败")
    }
  }
  
  const startSearch = async(id) => {
    return new Promise( (resolve, reject) => {
      http.get(`/getEvent/${id}`).then(({data}) => {
        if(data.retCode !== "200"){
          console.log("查询失败")
          reject() 
        }
        return resolve(data);
      });
      
    })
  }
  const copy = (data) => {
    let input = document.createElement("input");
    document.body.appendChild(input);
    input.setAttribute("value", data);
    input.setAttribute("readonly", "readonly");
    input.select();
    if (document.execCommand('copy')) {
  		document.execCommand('copy');
      showTip('复制成功', 1000);
  	}
    document.body.removeChild(input);
  
  }
  export {rePlay, record, upload, getList, remove, showTip, startSearch, copy}