import Dialog from '../BaseDialog'
import { Proj } from './proj'
import { legp } from '../Obj/Element/datalist';
let _DialogObject
const open = async (sdk, closeCallBack) => {
  let proj = new Proj()
  if (_DialogObject && _DialogObject.close) {
    _DialogObject.close()
    _DialogObject = null
  }
  _DialogObject = await new Dialog(sdk.viewer._container, {
    title: '度分秒',
    left: '180px',
    top: '100px',
    closeCallBack: () => {
      closeCallBack && closeCallBack()
    }
  })
  await _DialogObject.init()

  let html = `
        <span class="custom-divider"></span>
        <div class="div-item">
          <div class="row">
            <div class="col input-select-box">
              <span class="label" style="flex: 0 0 60px;">输入格式</span>
              <div class="input-select"></div>
            </div>
          </div>
        </div>
        <div class="div-item item" data-type="${0}">
          <span class="custom-divider"></span>
          <p style="font-size: 16px;padding-bottom: 6px;margin-top: 10px;margin-bottom: 5px;">
            <span style="margin-right: 10px;">度</span>
            <span style="font-size: 12px;margin-bottom: 5px;color: #F16C55">例如116.6°, 39.9°</span>
          </p>
          <div class="row">
            <div class="col">
              <span class="label" style="flex: auto;">经度</span>
              <input class="input lng" type="number" min="-180" max="180" value="0" title="">
            </div>
            <div class="col" style="margin: 0;">
              <span class="label">纬度</span>
              <input class="input lat" type="number" min="-90" max="90" value="0" title="">
            </div>
            <div class="col" style="flex: 0 0 24px;">
              <i class="icon-copy-box" title="复制" data-clipboard-action="copy" data-clipboard-target=".input" style="cursor: pointer;">
                <svg class="icon-copy" style="margin: 4px;margin-bottom: 0px;"><use xlink:href="#yj-icon-copy"></use></svg>
              </i>
              <button class="convert" style="margin-left: 10px;">转 换</button>
            </div>
          </div>
        </div>
        <div class="div-item item" data-type="${1}">
          <span class="custom-divider"></span>
          <p style="font-size: 16px;padding-bottom: 6px;margin-top: 10px;margin-bottom: 5px;">
            <span style="margin-right: 10px;">度分</span>
            <span style="font-size: 12px;margin-bottom: 5px;color: #F16C55">例如95°10.1702', 49°12.4015'</span>
          </p>
          <div class="row">
            <div class="col" style="flex-direction: column;">
              <div class="row" style="margin-bottom: 15px;">
                <span class="label">经度</span>
                <input class="input lng-dm-d" style="flex: 1;" type="number" min="-180" max="180" value="0" title="">
                <span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
                <input class="input lng-dm-m" style="flex: 1;" type="number" min="0" max="60" value="0" title="">
                <span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
                <span class="top-line"></span>
              </div>
              <div class="row">
                <span class="label">纬度</span>
                <input class="input lat-dm-d" style="flex: 1;" type="number" min="-90" max="90" value="0" title="">
                <span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
                <input class="input lat-dm-m" style="flex: 1;" type="number" min="0" max="60" value="0" title="">
                <span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
                <span class="bottom-line"></span>
              </div>
            </div>
            <div class="col" style="flex: 0 0 24px;margin: 0;">
              <i class="icon-copy-box" title="复制" data-clipboard-action="copy" data-clipboard-target=".input" style="cursor: pointer;position: relative;left: -30px;">
                <svg class="icon-copy" style="margin: 4px;margin-bottom: 0px;"><use xlink:href="#yj-icon-copy"></use></svg>
              </i>
              <button class="convert" style="margin-left: 10px;">转 换</button>
            </div>
          </div>
        </div>
        <div class="div-item item" data-type="${2}">
          <span class="custom-divider"></span>
          <p style="font-size: 16px;padding-bottom: 6px;margin-top: 10px;margin-bottom: 5px;">
            <span style="margin-right: 10px;">度分秒</span>
            <span style="font-size: 12px;margin-bottom: 5px;color: #F16C55">例如11°18'54.37", 39°13'46.57"</span>
          </p>
          <div class="row">
            <div class="col" style="flex-direction: column;">
              <div class="row" style="margin-bottom: 15px;">
                <span class="label">经度</span>
                <input class="input lng-dms-d" style="flex: 1;" type="number" min="-180" max="180" value="0" title="">
                <span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
                <input class="input lng-dms-m" style="flex: 1;" type="number" min="0" max="60" value="0" title="">
                <span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
                <input class="input lng-dms-s" style="flex: 1;" type="number" min="0" max="60" value="0" title="">
                <span class="label" style="flex: 0 0 14px;margin: 0 10px;">秒</span>
                <span class="top-line"></span>
              </div>
              <div class="row">
                <span class="label">纬度</span>
                <input class="input lat-dms-d" style="flex: 1;" type="number" min="-90" max="90" value="0" title="">
                <span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
                <input class="input lat-dms-m" style="flex: 1;" type="number" min="0" max="60" value="0" title="">
                <span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
                <input class="input lat-dms-s" style="flex: 1;" type="number" min="0" max="60" value="0" title="">
                <span class="label" style="flex: 0 0 14px;margin: 0 10px;">秒</span>
                <span class="bottom-line"></span>
              </div>
            </div>
            <div class="col" style="flex: 0 0 24px; margin: 0;">
              <i class="icon-copy-box" title="复制" data-clipboard-action="copy" data-clipboard-target=".input" style="cursor: pointer;position: relative;left: -30px;">
                <svg class="icon-copy" style="margin: 4px;margin-bottom: 0px;"><use xlink:href="#yj-icon-copy"></use></svg>
              </i>
              <button class="convert" style="margin-left: 10px;">转 换</button>
            </div>
          </div>
        </div>
        <span class="custom-divider" style="order: 10;margin-top: 12px;"></span>
      `
  _DialogObject._element.body.className = _DialogObject._element.body.className + ' proj-convert'
  let contentElm = document.createElement('div')
  contentElm.style.width = '460px'
  contentElm.style.display = 'flex'
  contentElm.style.flexDirection = 'column'
  contentElm.innerHTML = html
  _DialogObject.contentAppChild(contentElm)

  let items = contentElm.getElementsByClassName('item')

  for (let i = 0; i < items.length; i++) {
    let type = items[i].getAttribute('data-type')
    let convertElm = items[i].getElementsByClassName('convert')[0]
    let copyElm = items[i].getElementsByClassName('icon-copy-box')[0]
    let clipboard = new ClipboardJS(copyElm, {
      text: (trigger) => {
        let text, lngD, lngM, lngS, latD, latM, latS
        switch (type) {
          case 0:
          case '0':
            let lng = items[i].getElementsByClassName('lng')[0].value
            let lat = items[i].getElementsByClassName('lat')[0].value
            text = lng + '°,' + lat + '°'
            break
          case 1:
          case '1':
            lngD = contentElm.getElementsByClassName('lng-dm-d')[0].value
            lngM = contentElm.getElementsByClassName('lng-dm-m')[0].value
            latD = contentElm.getElementsByClassName('lat-dm-d')[0].value
            latM = contentElm.getElementsByClassName('lat-dm-m')[0].value
            text = lngD + '°' + lngM + "'," + latD + '°' + latM + "'"
            break
          case 2:
          case '2':
            lngD = contentElm.getElementsByClassName('lng-dms-d')[0].value
            lngM = contentElm.getElementsByClassName('lng-dms-m')[0].value
            lngS = contentElm.getElementsByClassName('lng-dms-s')[0].value
            latD = contentElm.getElementsByClassName('lat-dms-d')[0].value
            latM = contentElm.getElementsByClassName('lat-dms-m')[0].value
            latS = contentElm.getElementsByClassName('lat-dms-s')[0].value
            text =
              lngD +
              '°' +
              lngM +
              "'" +
              lngS +
              '",' +
              latD +
              '°' +
              latM +
              "'" +
              latS +
              '"'
            break
        }
        return text;
      }
    });

    clipboard.on('success', function (e) {
      window.ELEMENT &&
        window.ELEMENT.Message({
          message: '已复制到剪切板',
          type: 'success',
          duration: 1500
        })
    });
    clipboard.on('error', function (e) {
      window.ELEMENT &&
        window.ELEMENT.Message({
          message: '复制失败',
          type: 'warning',
          duration: 1500
        })
    });
    convertElm.addEventListener('click', () => {
      // let a = proj.degreesToDMS(100.345546743)
      let lng,
        lat,
        lngD,
        lngM,
        lngS,
        latD,
        latM,
        latS,
        lngDM,
        latDM,
        lngDMS,
        latDMS,
        lngdnArr1,
        lngdnArr2,
        latdnArr1,
        latdnArr2,
        lngdnsArr1,
        lngdnsArr2,
        lngdnsArr3,
        latdnsArr1,
        latdnsArr2,
        latdnsArr3
      switch (type) {
        case 0:
        case '0':
          lng = items[i].getElementsByClassName('lng')[0].value
          lat = items[i].getElementsByClassName('lat')[0].value
          lngDM = proj.degreesToDMS(lng, true)
          latDM = proj.degreesToDMS(lat, true)
          lngdnArr1 = lngDM.split('°')
          lngdnArr2 = lngdnArr1[1].split("'")
          latdnArr1 = latDM.split('°')
          latdnArr2 = latdnArr1[1].split("'")
          contentElm.getElementsByClassName('lng-dm-d')[0].value = lngdnArr1[0]
          contentElm.getElementsByClassName('lng-dm-m')[0].value = lngdnArr2[0]
          contentElm.getElementsByClassName('lat-dm-d')[0].value = latdnArr1[0]
          contentElm.getElementsByClassName('lat-dm-m')[0].value = latdnArr2[0]

          lngDMS = proj.degreesToDMS(lng)
          latDMS = proj.degreesToDMS(lat)
          lngdnsArr1 = lngDMS.split('°')
          lngdnsArr2 = lngdnsArr1[1].split("'")
          lngdnsArr3 = lngdnsArr2[1].split('"')
          latdnsArr1 = latDMS.split('°')
          latdnsArr2 = latdnsArr1[1].split("'")
          latdnsArr3 = latdnsArr2[1].split('"')
          contentElm.getElementsByClassName('lng-dms-d')[0].value =
            lngdnsArr1[0]
          contentElm.getElementsByClassName('lng-dms-m')[0].value =
            lngdnsArr2[0]
          contentElm.getElementsByClassName('lng-dms-s')[0].value =
            lngdnsArr3[0]
          contentElm.getElementsByClassName('lat-dms-d')[0].value =
            latdnsArr1[0]
          contentElm.getElementsByClassName('lat-dms-m')[0].value =
            latdnsArr2[0]
          contentElm.getElementsByClassName('lat-dms-s')[0].value =
            latdnsArr3[0]
          break
        case 1:
        case '1':
          lngD = items[i].getElementsByClassName('lng-dm-d')[0].value
          lngM = items[i].getElementsByClassName('lng-dm-m')[0].value
          latD = items[i].getElementsByClassName('lat-dm-d')[0].value
          latM = items[i].getElementsByClassName('lat-dm-m')[0].value
          lng = proj.dmsToDecimal(lngD + '°' + lngM + "'", true)
          lat = proj.dmsToDecimal(latD + '°' + latM + "'", true)
          contentElm.getElementsByClassName('lng')[0].value = lng
          contentElm.getElementsByClassName('lat')[0].value = lat

          lngDMS = proj.degreesToDMS(lng)
          latDMS = proj.degreesToDMS(lat)
          lngdnsArr1 = lngDMS.split('°')
          lngdnsArr2 = lngdnsArr1[1].split("'")
          lngdnsArr3 = lngdnsArr2[1].split('"')
          latdnsArr1 = latDMS.split('°')
          latdnsArr2 = latdnsArr1[1].split("'")
          latdnsArr3 = latdnsArr2[1].split('"')
          contentElm.getElementsByClassName('lng-dms-d')[0].value =
            lngdnsArr1[0]
          contentElm.getElementsByClassName('lng-dms-m')[0].value =
            lngdnsArr2[0]
          contentElm.getElementsByClassName('lng-dms-s')[0].value =
            lngdnsArr3[0]
          contentElm.getElementsByClassName('lat-dms-d')[0].value =
            latdnsArr1[0]
          contentElm.getElementsByClassName('lat-dms-m')[0].value =
            latdnsArr2[0]
          contentElm.getElementsByClassName('lat-dms-s')[0].value =
            latdnsArr3[0]
          break
        case 2:
        case '2':
          lngD = items[i].getElementsByClassName('lng-dms-d')[0].value
          lngM = items[i].getElementsByClassName('lng-dms-m')[0].value
          lngS = items[i].getElementsByClassName('lng-dms-s')[0].value
          latD = items[i].getElementsByClassName('lat-dms-d')[0].value
          latM = items[i].getElementsByClassName('lat-dms-m')[0].value
          latS = items[i].getElementsByClassName('lat-dms-s')[0].value
          lngDMS = lngD + '°' + lngM + "'" + lngS + '"'
          latDMS = latD + '°' + latM + "'" + latS + '"'
          lng = proj.dmsToDecimal(lngDMS)
          lat = proj.dmsToDecimal(latDMS)
          contentElm.getElementsByClassName('lng')[0].value = lng
          contentElm.getElementsByClassName('lat')[0].value = lat
          lngDM = proj.degreesToDMS(lng, true)
          latDM = proj.degreesToDMS(lat, true)
          lngdnArr1 = lngDM.split('°')
          lngdnArr2 = lngdnArr1[1].split("'")
          latdnArr1 = latDM.split('°')
          latdnArr2 = latdnArr1[1].split("'")
          contentElm.getElementsByClassName('lng-dm-d')[0].value = lngdnArr1[0]
          contentElm.getElementsByClassName('lng-dm-m')[0].value = lngdnArr2[0]
          contentElm.getElementsByClassName('lat-dm-d')[0].value = latdnArr1[0]
          contentElm.getElementsByClassName('lat-dm-m')[0].value = latdnArr2[0]
          break
      }
      window.ELEMENT &&
        window.ELEMENT.Message({
          message: '转换成功',
          type: 'success',
          duration: 1500
        })
      for (let m = 0; m < items.length; m++) {
        items[m].style.display = 'block'
      }
    })
    if (i == 0) {
      items[i].style.order = 0
      items[i].style.display = 'block'
      convertElm.style.display = 'inline-block'
    } else {
      items[i].style.order = 1
      items[i].style.display = 'none'
      convertElm.style.display = 'none'
    }
  }

  let inputElms = contentElm.getElementsByTagName('input')
  for (let i = 0; i < inputElms.length; i++) {
    inputElms[i].addEventListener('blur', (e) => {
      if (!e.target.value) {
        e.target.value = 0
      }
      let value = Number(e.target.value)
      if ((e.target.max) && value > Number(e.target.max)) {
        value = Number(e.target.max)
      }
      if ((e.target.min) && value < Number(e.target.min)) {
        value = Number(e.target.min)
      }
      e.target.value = value
    })
  }

  let selectData = [{
    name: '度',
    value: '度',
    key: 0
  },
  {
    name: '度分',
    value: '度分',
    key: 1
  },
  {
    name: '度分秒',
    value: '度分秒',
    key: 2
  }
  ]

  let selectDataLegpObject = legp(_DialogObject._element.content.getElementsByClassName('input-select-box')[0], ".input-select")
  if (selectDataLegpObject) {
    selectDataLegpObject.legp_search(selectData)
    let selectDataLegpElm = _DialogObject._element.content.getElementsByClassName('input-select')[0].getElementsByTagName('input')[0]
    selectDataLegpElm.value = selectData[0].value
    selectDataLegpElm.addEventListener('input', () => {
      for (let i = 0; i < selectData.length; i++) {
        if (selectData[i].value === selectDataLegpElm.value) {
          for (let m = 0; m < items.length; m++) {
            let convertElm = items[m].getElementsByClassName('convert')[0]
            if (m == selectData[i].key) {
              items[m].style.order = 0
              items[m].style.display = 'block'
              convertElm.style.display = 'inline-block'
            } else {
              if (m === 0) {
                items[m].style.order = 2
              }
              else {
                items[m].style.order = 1
              }
              items[m].style.display = 'none'
              convertElm.style.display = 'none'
            }
          }
          break
        }
      }
    })
  }
}

const close = () => {
  if (_DialogObject && _DialogObject.close) {
    _DialogObject.close()
    _DialogObject = null
  }
}

export { open, close }