{
  let $layer = document.createElement('div')
  let $cad = document.createElement('div')

  $layer.className = 'cad'
  $cad.id = 'cad'
  $layer.appendChild($cad)

  document.documentElement.appendChild($layer)

  let style = document.createElement('style')
  style.innerHTML = `
    .cad {
      position: absolute;
      right: 80px;
      top: 16px;
      width: 200px;
      height: 200px;
      background: rgba(0, 0, 0, .3);
      border-radius: 5px;
      display: none;
    }

    .cad > div {
      width: 100%;
      height: 100%;
    }

    @media only screen and (max-width: 600px) { 
      .cad {
          position: absolute;
          left: 16px;
          top: 65px;
          width: 100px;
          height: 100px;
          background: rgba(0, 0, 0, .3);
          border-radius: 5px;
      }
    }
  `

  //解析查询字符串
  function getQueryStringArgs() {
    //取得查询字符串，并去掉开头'?'
    var qs = location.search.length ? location.search.substring(1) : '';
    //保存数据的对象
    var args = {},
      //以分割符'&'分割字符串，并以数组形式返回
      items = qs.length ? qs.split('&') : [],
      item = null,
      name = null,
      value = null,
      i = 0,
      len = items.length;
    //逐个将每一项添加到args对象中
    for (; i < len; i++) {
      item = items[i].split('=');
      //解码操作，因为查询字符串经过编码的
      name = decodeURIComponent(item[0]);
      value = decodeURIComponent(item[1]);
      value = item[1];
      if (name.length) {
        args[name] = value;
      }
    }
    return args;
  }

  function getData(url, cb) {
    $.ajax({
      method: 'GET',
      url: url,
      success(data) {
        cb(null, data)
      },
      error(e) {
        cb(e)
      }
    })
  }

  let code = getQueryStringArgs().m
  let data, styleArg

  getData('/CAD/static/data/'+ code +'/floor.json', (err, args) => {
    if (!err) {
      data = args
      grentCAD()
    }
  })
  getData('/CAD/static/data/'+ code +'/style.json', (err, args) => {
    if (err) {
      styleArg = {
        line: {
          color: '#fff',
          width: 1
        },
        sign: {
          color: 'rgb(0, 200, 175)'
        }
      }
    } else {
      styleArg = args
    }
    grentCAD()
  })

  
  let point, dire

  window.cad = {
    setSign: function(p, d) {
      point = p
      dire = d
    }
  }
  

  function grentCAD() {
    if (!(data && styleArg)) return;


    $layer.style.display = 'none'
    window.cad = structureCAD({
      data: {
          block: [],
          column: [],
          door: [],
          hole: [],
          segment: [],
          "vertex-xy": [],
          "vertex-z": [],
      }, 
      layer: $cad,
      edit: false
    });
    
    cad.setDefaultPointStyle({
      fillColor: "rgba(0,0,0,0)",
      storkeColor: "rgba(0,0,0,0)"
    });

    cad.setDefaultLineStyle({
      width: styleArg.line.width,
      color: styleArg.line.color
    });

    cad.setDefaultSignStyle({
      color: styleArg.sign.color
    })


    cad.hideDire()
    cad.hideGauge()

    cad.loadData(data);
    if (point && dire) {
      window.cad.setSign(point, dire)
    }
    $layer.style.display = 'block'
  }
}