import Dialog from '../BaseDialog'
import { Proj } from './proj'
import { legp } from '../Obj/Element/datalist';
import Tools from "../Tools";
let _DialogObject
let Draw
const open = async (sdk, closeCallBack) => {
  let proj = new Proj()
  let tools = new Tools(sdk)
  // 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 contentElm = document.getElementsByClassName('proj-convert')[0].getElementsByClassName('content')[0]

  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 pickUpElm = items[i].getElementsByClassName('pickUp')[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) {
      tools.message({ text: '已复制到剪切板' })
    });
    clipboard.on('error', function (e) {
      tools.message({ type: 'warning', text: '复制失败' })
    });
    let DrawPoint = require('../Draw/drawPoint').default
    pickUpElm.addEventListener('click', () => {
      Draw = new DrawPoint(sdk)
      Draw.start((a, positions) => {
        switch (type * 1) {
          case 0:
            items[i].getElementsByClassName('lng')[0].value = positions.lng
            items[i].getElementsByClassName('lat')[0].value = positions.lat
            break;
          case 1:
            let lngDM = proj.degreesToDMS(positions.lng, true)
            let latDM = proj.degreesToDMS(positions.lat, true)
            let lngdnArr1 = lngDM.split('°')
            let lngdnArr2 = lngdnArr1[1].split("'")
            let latdnArr1 = latDM.split('°')
            let 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
          case 2:
            let lngDMS = proj.degreesToDMS(positions.lng)
            let latDMS = proj.degreesToDMS(positions.lat)
            let lngdnsArr1 = lngDMS.split('°')
            let lngdnsArr2 = lngdnsArr1[1].split("'")
            let lngdnsArr3 = lngdnsArr2[1].split('"')
            let latdnsArr1 = latDMS.split('°')
            let latdnsArr2 = latdnsArr1[1].split("'")
            let 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
          default:
            break;
        }
      })
    })
    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
      }
      tools.message({ text: '转换成功' })
      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'
      pickUpElm.style.display = 'inline-block'
    } else {
      items[i].style.order = 1
      items[i].style.display = 'none'
      convertElm.style.display = 'none'
      pickUpElm.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(contentElm.getElementsByClassName('input-select-box')[0], ".input-select")
  if (selectDataLegpObject) {
    selectDataLegpObject.legp_search(selectData)
    let selectDataLegpElm = contentElm.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]
            let pickUpElm = items[m].getElementsByClassName('pickUp')[0]
            if (m == selectData[i].key) {
              items[m].style.order = 0
              items[m].style.display = 'block'
              convertElm.style.display = 'inline-block'
              pickUpElm.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'
              pickUpElm.style.display = 'none'
            }
          }
          break
        }
      }
    })
  }
}

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

export { open, close }