import './style.less';
const createWindow = function (mapOption, infoOption) {
  let title = '';
  const content: any = [];
  if (infoOption.title) {
    title = infoOption.title;
  }
  if (infoOption.middleImg) {
    content.push('<img src=' + infoOption.middleImg + '>');
  }
  if (typeof infoOption.middleMess === 'string') {
    content.push(`<div class='contentLabel'>` + infoOption.middleMess + `</div>`);
  } else {
    const infoContent = Object.keys(infoOption.middleMess);
    for (let i = 0; i < infoContent.length; i++) {
      content.push(
        `<span class='contentLabel'><span class="contentKey">` +
          infoContent[i] +
          '</span>:<span class="contentValue">' +
          infoOption.middleMess[infoContent[i]] +
          `</span></span>`,
      );
    }
  }
  const infoWindow = new mapOption.AMap.InfoWindow({
    isCustom: true,
    content: createInfoWindow(title, content.join('<br/>'), infoOption, mapOption),
    offset: new mapOption.AMap.Pixel(0, 0),
  });
  return infoWindow;
};
//构建自定义信息窗体
function createInfoWindow(title, content, infoOption, mapOption) {
  /*创建info主体*/
  const info = document.createElement('div');
  info.className = 'windowBox';
  info.style.cssText = infoOption.infoStyle;
  /*当传入title时创建title*/
  if (infoOption.title) {
    const top = document.createElement('div');
    top.className = 'title';
    const titleBox = document.createElement('div');
    titleBox.className = 'titleLabel';
    titleBox.innerHTML = title;
    titleBox.style.cssText = infoOption.titleStyle;
    /*创建关闭按钮 */
    const closeX: any = document.createElement('img');
    closeX.className = 'closeBtn';
    if (infoOption.closeImg) {
      closeX.src = infoOption.closeImg;
    } else {
      closeX.src = 'https://webapi.amap.com/images/close.gif';
    }
    closeX.style.cssText = infoOption.closeBtnStyle;
    // closeX.onclick = closeInfoWindow();
    closeX.addEventListener('click', () => {
      closeWindow(mapOption);
    });
    /*push标题&&关闭按钮*/
    top.appendChild(titleBox);
    top.appendChild(closeX);
    info.appendChild(top);
  }

  /*定义中部内容*/
  const middle = document.createElement('div');
  if (typeof infoOption.middleMess === 'string') {
    middle.style.cssText = infoOption.middleStyle;
  }

  middle.className = 'Content';
  middle.innerHTML = content;
  info.appendChild(middle);
  return info;
}
//关闭信息窗体
const closeWindow = function (mapOption) {
  mapOption.map.clearInfoWindow();
};
export { createWindow, closeWindow };