import $ from 'jquery';
import { factorName } from '@/constant/factor-name';
import { factorUnit } from '@/constant/factor-unit';
import { windDir } from '@/constant/wind-dir';
import { map } from './index_old';
import { checkboxOptions } from '@/constant/checkbox-options';
import { useToolboxStore } from '@/stores/toolbox';

const toolboxStore = useToolboxStore();

export const DialogUtil = {
  // 当前打开的弹框及位置坐标
  marker: undefined,
  lnglat: undefined,
  /**
   * 创建弹出框
   * @param {*} factorDatas 监测数据
   * @param {*} i 当前显示监测数据索引
   * @param {*} onClose 关闭弹出框回调
   * @returns
   */
  createInfoWindow(deviceType, deviceCode, factorDatas, i, onClose) {
    let m = {
      deviceType: deviceType,
      deviceCode: deviceCode,
      data: factorDatas,
      index: i,
      window: '',
      close: onClose
    };
    // eslint-disable-next-line no-undef
    m.window = new AMap.InfoWindow({
      isCustom: true, //使用自定义窗体
      content: this.createWindowContent(m),
      // eslint-disable-next-line no-undef
      offset: new AMap.Pixel(16, -45),
      autoMove: false
    });
    return m;
  },

  /**
   * 站点标记信息窗体
   */
  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 factorTypes = checkboxOptions(marker.deviceType);
    const time = marker.time;
    const factorList = marker.factorList;
    //实例化信息窗体
    // var title = '<div class="time">编号:' + marker.deviceCode + '</div>';
    var title = '编号:' + marker.deviceCode;
    var content = '',
      tag = '';

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

    // 遍历站点数据中的每一项监测因子，生成页面
    content += "<div><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;
      // }
      if (!factorTypes.find((v) => v.name == f.factorName)) {
        return;
      }

      var factor = factorName[f.factorName];
      var n = 1;
      if (f.factorName == 'WIND_DIRECTION') {
        n = 0;
      }
      var v = f.factorData.toFixed(n);
      var unit = factorUnit[f.factorName].unit;
      if (f.factorName == 'CO') {
        unit = 'μg/m³';
      }
      if (f.factorName == 'WIND_DIRECTION') {
        unit += '(' + 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',
      'NO',
      'NO2',
      'CO',
      'SO2',
      'O3',
      'PM25',
      'PM10',
      'TEMPERATURE',
      'HUMIDITY',
      'WIND_SPEED',
      'WIND_DIRECTION'
    ];
    orderList.forEach((e) => {
      const c = _contents.get(e);
      if (c != undefined) {
        content += c;
      }
    });

    // content +=

    content += '</table></div>';

    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 = 'text-clz ff-border-content flexbox flex-space-between';

    var titleD = document.createElement('div');
    var closeX = document.createElement('div');
    $(titleD).text(title);
    // titleD.className = 'time';
    closeX.className = 'text-close';
    $(closeX).attr('aria-hidden', 'true');
    $(closeX).text('X');
    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;
  },

  /**
   * 开启一个新的数据弹框
   * @param {String} deviceType 设备类型
   * @param {String} deviceCode 设备编号
   * @param {Array} factorDatas 监测数据
   * @param {Number} i 数据索引
   * @param {Function} onClose 弹框关闭回调
   * @returns
   */
  openNewWindow(deviceType, deviceCode, factorDatas, i, onClose) {
    if (!toolboxStore.dataDialogStatus) return;
    this.marker = this.createInfoWindow(
      deviceType,
      deviceCode,
      factorDatas,
      i,
      onClose
    );
    this.marker.window.open(map, factorDatas.lnglats_GD[i]);
    this.lnglat = factorDatas.lnglats_GD[i];
  },

  /**
   * 打开缓存中的弹框
   */
  openWindow() {
    if (this.marker && this.lnglat) {
      // this.marker.close();
      this.marker.window.open(map, this.lnglat);
    }
  },

  /**
   * 关闭已弹出的弹框
   */
  closeWindow() {
    if (this.marker) {
      // this.marker.close();
      this.marker.window.close();
    }
  }
};