var DialogUtil = {
  /**
   * 创建弹出框
   * @param {*} factorDatas 监测数据
   * @param {*} i 当前显示监测数据索引
   * @param {*} onClose 关闭弹出框回调
   * @returns
   */
  createInfoWindow(factorDatas, i, onClose) {
    let m = {
      data: factorDatas,
      index: i,
      window: '',
      close: onClose,
    };
    m.window = new AMap.InfoWindow({
      isCustom: true, //使用自定义窗体
      content: this.createWindowContent(m),
      offset: new AMap.Pixel(16, -45),
    });
    return m.window;
  },

  createInfoWindow2(factorData, onClose) {
    let m = {
      time: factorData.time,
      factorList: factorData.values,
      window: '',
      close: onClose,
    };
    m.window = new AMap.InfoWindow({
      isCustom: true, //使用自定义窗体
      content: this.createWindowContent2(m),
      offset: new AMap.Pixel(16, -45),
    });
    return m.window;
  },
  /**
   * 站点标记信息窗体
   */
  createWindowContent: function (marker) {
    const factorDatas = marker.data;
    const i = marker.index;
    const time = factorDatas.times[i];
    const factorList = [];
    Object.keys(factorDatas.factor).forEach((k) => {
      var f = factorDatas.factor[k].datas[i];
      factorList.push(f);
    });
    marker.time = time;
    marker.factorList = factorList;
    return this.createWindowContent2(marker);
  },

  createWindowContent2(marker) {
    const time = marker.time;
    const factorList = marker.factorList;
    //实例化信息窗体
    // var title = '<div>' + site.name + '</div>' + '<div class="sub-title">编号:' + site.code + '</div>',
    var title = '',
      content = '';
    tag = '';

    tag += "<div class='time'>" + '时间: ' + time;

    // 遍历站点数据中的每一项监测因子，生成页面
    content += "<table class='text-table'>";
    var _contents = new Map();
    factorList.forEach((f) => {
      // 删选不显示的因子
      if (
        f.factorName == 'NOI' ||
        f.factorName == 'LNG' ||
        f.factorName == 'LAT' ||
        f.factorName == 'VELOCITY' ||
        f.factorName == 'TIME' ||
        f.factorName == 'HEIGHT'
      ) {
        return;
      }

      var factor = Util.factorName[f.factorName];
      var n = 1;
      if (f.factorName == 'WIND_DIRECTION') {
        n = 0;
      }
      var v = f.factorData.toFixed(n);
      var unit = Util.factorUnit2[f.factorName];
      if (f.factorName == 'CO') {
        unit = 'μg/m³';
      }
      if (f.factorName == 'WIND_DIRECTION') {
        unit += '(' + Util.windDir(f.factorData) + ')';
      }
      var c = '<tr>';
      if (f.factorName == 'H2S' || f.factorName == 'PM10') {
        c = "<tr class='divide'>";
      }
      c += '<td>' + factor + '</td>';
      c += '<td>' + ': ' + '</td>';
      c += '<td>' + v + '</td>';
      c += "<td class='last-col'>" + unit + '</td>';
      c += '</tr>';

      _contents.set(f.factorName, c);
    });
    var orderList = [
      'VOC',
      'H2S',
      'NO2',
      'CO',
      'SO2',
      'O3',
      'PM25',
      'PM10',
      'TEMPERATURE',
      'HUMIDITY',
      'WIND_SPEED',
      'WIND_DIRECTION',
    ];
    orderList.forEach((e) => {
      content += _contents.get(e);
    });

    content += '</table>';

    var info = document.createElement('div');
    // info.className = "custom-info input-card content-window-card";
    info.className = 'flexbox-col';

    //可以通过下面的方式修改自定义窗体的宽高
    //info.style.width = "400px";
    // 定义顶部标题
    var top = document.createElement('div');
    // top.className = "info-top";
    top.className =
      'ff-content ff-content-top-left ff-content-small-borderless-t info-top';
    var top_b = document.createElement('div');
    top_b.className = 'ff-border-bottom';
    var top_t = document.createElement('div');
    top_t.className = 'ff-border-top';
    var top_c = document.createElement('div');
    top_c.className = 'ff-border-content flexbox flex-space-between';

    var titleD = document.createElement('div');
    var closeX = document.createElement('i');
    titleD.innerHTML = title;
    closeX.className = 'fa fa-times';
    $(closeX).attr('aria-hidden', 'true');
    closeX.onclick = function () {
      marker.close();
      marker.window.close();
    };

    top_c.appendChild(titleD);
    top_c.appendChild(closeX);

    top_t.appendChild(top_c);
    top.appendChild(top_b);
    top.appendChild(top_t);

    info.appendChild(top);

    // 定义中部内容
    var refreshV = document.createElement('div');
    refreshV.className = 'refresh-btn';
    var refresh = document.createElement('i');
    refresh.className = 'fa fa-refresh';
    $(refresh).attr('aria-hidden', 'true');
    $(refresh).css('color', '#ffffffc0');
    $(refresh).css('cursor', 'pointer');
    refresh.onclick = function () {
      //   $(this).addClass('fa-spin')
      //   that.fetchingData(site.code, function () {
      //     setTimeout(() => {
      //       $(this).removeClass('fa-spin')
      //     }, 1000);
      //   }.bind(this))
    };
    var m_top = document.createElement('div');
    m_top.className = 'ff-content ff-content-left ff-content-medium';
    var m_top_b = document.createElement('div');
    m_top_b.className = 'ff-border-bottom';
    var m_top_t = document.createElement('div');
    m_top_t.className = 'ff-border-top';
    var m_top_c = document.createElement('div');
    m_top_c.className = 'ff-border-content';
    var m_top_f = document.createElement('div');
    m_top_f.className = 'ff-footer flexbox-col flex-center';
    var m_top_tr = document.createElement('div');
    m_top_tr.className = 'ff-triangle';
    var m_top_trb = document.createElement('div');
    m_top_trb.className = 'ff-triangle-border';
    refreshV.appendChild(refresh);
    // m_top_c.appendChild(refreshV);

    var middle = document.createElement('div');
    middle.className = 'info-middle';
    middle.innerHTML = content;
    m_top_f.innerHTML = tag;

    m_top_c.appendChild(middle);

    m_top_t.appendChild(m_top_c);
    m_top_tr.appendChild(m_top_trb);

    m_top.appendChild(m_top_b);
    m_top.appendChild(m_top_t);
    m_top.appendChild(m_top_f);
    m_top.appendChild(m_top_tr);

    info.appendChild(m_top);

    // 定义底部内容
    var bottom = document.createElement('div');
    bottom.className = 'info-bottom';
    bottom.style.position = 'relative';
    bottom.style.top = '0px';
    bottom.style.margin = '0 auto';
    var sharp = document.createElement('img');
    sharp.src = 'https://webapi.amap.com/images/sharp.png';
    bottom.appendChild(sharp);
    info.appendChild(bottom);
    return info;
  },
};