import Tools from "../../../Tools";
function _element() {
  let tools = new Tools()
  let elm = document.createElement('div');
  elm.className = 'locate-current-bubble-box'
  elm.innerHTML = `
  <div style="display: flex;justify-content: space-between;margin: 6px;margin-top: 0;">
    <div class="lng" style="display: flex;align-items: center;width: 48%;">
      <i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/lng.png'}) no-repeat 100% 100%;"></i>
      <span style="white-space: nowrap;">经度：</span>
      <span></span>
    </div>
    <div class="ew" style="display: flex;align-items: center;width: 48%;">
      <i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/e.png'}) no-repeat 100% 100%;"></i>
      <span style="white-space: nowrap;">东经：</span>
      <span></span>
    </div>
  </div>
  <div style="display: flex;justify-content: space-between;margin: 6px;margin-top: 0;">
    <div class="lat" style="display: flex;align-items: center;width: 48%;">
      <i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/lat.png'}) no-repeat 100% 100%;"></i>
      <span style="white-space: nowrap;">纬度：</span>
      <span></span>
    </div>
    <div class="sn" style="display: flex;align-items: center;width: 48%;">
      <i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/s.png'}) no-repeat 100% 100%;"></i>
      <span style="white-space: nowrap;">南纬：</span>
      <span></span>
    </div>
  </div>
  <div style="display: flex;justify-content: space-between;margin: 6px;margin-top: 0;">
    <div class="height" style="display: flex;align-items: center;width: 48%;">
      <i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/h.png'}) no-repeat 100% 100%;"></i>
      <span style="white-space: nowrap;">高程：</span>
      <span></span>
    </div>
    <div class="satellite" style="display: flex;align-items: center;width: 48%;">
      <i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/satellite.png'}) no-repeat 100% 100%;"></i>
      <span style="white-space: nowrap;">卫星：</span>
      <span></span>
    </div>
  </div>
  `
  elm.style.position = 'absolute'
  elm.style.background = `url(${tools.getSourceRootPath() + '/img/bubble/bubble.png'}) no-repeat 100% 100%`;
  elm.style.backgroundSize =  '100% 100%'
  elm.style.width = '400px'
  elm.style.height = '115px'
  elm.style.color = '#ffffff'
  elm.style.padding = '10px'
  elm.style.boxSizing = 'border-box'
  elm.style.fontSize = '14px'
  elm.style.pointerEvents = 'none'
  document.body.appendChild(elm)
  return elm
}

export { _element }