// poi查询按钮 控件
class PoiQueryButton extends mars3d.control.BaseControl {
  get parentContainer() {
    return this._map.toolbar
  }

  /**
   * 创建_container控件容器对象的方法，
   * 只会调用一次
   * @return {void}  无
   * @private
   */
  _mountedHook() {
    // 初始化页面
    this._initQueryUI()

    // 查询控制器
    this._gaodePOI = new mars3d.query.GaodePOI()

    // 创建矢量数据图层
    this.graphicLayer = new mars3d.layer.GraphicLayer()
    this._map.addLayer(this.graphicLayer)

    // 鼠标单击后的信息面板弹窗
    this.graphicLayer.bindPopup(function (event) {
      const item = event.graphic.attr
      if (!item) {
        return
      }
      let inHtml = `<div class="mars3d-template-titile"><a href="https://www.amap.com/detail/${item.id}"  target="_black" style="color: #ffffff; ">${item.name}</a></div><div class="mars3d-template-content" >`

      const phone = String(item.tel).trim()
      if (phone) {
        inHtml += "<div><label>电话</label>" + phone + "</div>"
      }

      const dz = String(item.address).trim()
      if (item.address) {
        inHtml += "<div><label>地址</label>" + dz + "</div>"
      }

      const fl = String(item.type).trim()
      if (item.type) {
        if (fl !== "") {
          inHtml += "<div><label>类别</label>" + fl + "</div>"
        }
      }
      inHtml += "</div>"

      return inHtml
    })
  }

  clear() {
    const ulList = this._queryResultContainer.querySelector(".searchResults")
    const gaodesousuo = this._queryResultContainer.querySelector(".gaodesousuo")
    if (ulList) {
      ulList.remove()
    }
    if (this.resultNextPages) {
      this.resultNextPages.remove()
    }
    if (gaodesousuo) {
      gaodesousuo.remove()
    }
    if (this.graphicLayer) {
      this.graphicLayer.clear()
    }
  }

  // 初始化所有相关UI
  _initQueryUI() {
    // 高度值获取
    this._container = mars3d.DomUtil.create("div", "cesium-button cesium-toolbar-button")
    this._container.style.display = "inline-block"
    this._container.setAttribute("title", this.options.title || "POI查询")

    mars3d.DomUtil.createSvg(
      33,
      33,
      "M29.772,26.433l-7.126-7.126c0.96-1.583,1.523-3.435,1.524-5.421C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885c0,5.789,4.693,10.481,10.484,10.481c1.987,0,3.839-0.563,5.422-1.523l7.128,7.127L29.772,26.433zM7.203,13.885c0.006-3.582,2.903-6.478,6.484-6.486c3.579,0.008,6.478,2.904,6.484,6.486c-0.007,3.58-2.905,6.476-6.484,6.484C10.106,20.361,7.209,17.465,7.203,13.885z",
      this._container
    )

    // 鼠标移入移出
    let cacheTarget
    this._container.addEventListener("mouseover", (e) => {
      // 缓存，提高效率
      if (cacheTarget === this.uuid) {
        return
      }
      cacheTarget = this.uuid

      if (this._queryInputContainer.style.display !== "block") {
        this.toolSearchNoShow("block")
        this.toolActive()
        mars3d.DomUtil.addClass(this._container, "queryPoiButton")

        this._container.style.height = this.parentContainer.offsetHeight + 40 + "px"
        this._queryResultContainer.style.height = this.parentContainer.offsetHeight - 10 + "px"
      }
    })
    this._container.addEventListener("mouseout", (e) => {
      cacheTarget = null
      const queryVal = this._queryInputContainer.querySelector(".searchInput").value
      if (queryVal.length === 0) {
        this.clear()
        this.toolSearchNoShow("none")
        mars3d.DomUtil.removeClass(this._container, "queryPoiButton")
        this._container.style.height = ""
      }
    })

    // input面板，在queryPoiButton下面
    this._queryInputContainer = mars3d.DomUtil.create("div", "toolSearch")
    this._container.appendChild(this._queryInputContainer)

    // 搜寻结果，在mars3dContainer面板下面
    this._queryResultContainer = mars3d.DomUtil.create("div", "poiButtonResult")
    this._container.appendChild(this._queryResultContainer)
    this.toolSearchNoShow("none")

    // 创建input输入框
    const textInput = mars3d.DomUtil.create("input", "searchInput")
    textInput.type = "search"
    textInput.setAttribute("placeholder", "请输入地址...")
    this._queryInputContainer.appendChild(textInput)

    // input的单击事件
    const deleteInput = mars3d.DomUtil.create("div", "deleteInput", this._queryInputContainer)

    this._addPElement(deleteInput, "×", () => {
      this._queryInputContainer.querySelector(".searchInput").value = ""
      this.clear()
      this.toolSearchNoShow("none")
      mars3d.DomUtil.removeClass(this._container, "queryPoiButton")
      this._container.style.height = ""
      cacheTarget = null
    })

    // 绑定change事件
    let timetik
    textInput.addEventListener("input", () => {
      this.clear()
      clearTimeout(timetik)
      timetik = setTimeout(() => {
        const queryVal = this._queryInputContainer.querySelector(".searchInput").value
        if (queryVal.length !== 0) {
          deleteInput.style.display = "block"
          this.autoTip(queryVal)
        }
      }, 250)
    })

    // 绑定回车键
    textInput.addEventListener("keydown", (event) => {
      if (event.keyCode === 13) {
        clearTimeout(timetik)
        // 让change事件执行完成之后，在执行以下操作
        timetik = setTimeout(() => {
          this.clear()
          this.showPages = 1
          this.strartQueryPOI()
        }, 250)
      }
    })
  }

  toolActive() {
    this._queryInputContainer.style.display = "block"
    const searchInput = this._queryInputContainer.querySelector(".searchInput")
    searchInput.focus()
    if (document.activeElement.tagName === "INPUT" && searchInput.value === "") {
      return
    }
    this.clear()
    this.showPages = 1
    this.strartQueryPOI()
  }

  // 根据输入框内容，查询显示列表
  strartQueryPOI() {
    const text = this._queryInputContainer.querySelector(".searchInput").value
    if (text.trim().length === 0) {
      globalMsg("请输入搜索关键字！")
      return
    }
    // 输入经纬度数字时
    if (this.isLonLat(text)) {
      this.centerAtLonLat(text)
      return
    }
    this.queryTextByServer(text)
  }

  queryTextByServer(text) {
    this._gaodePOI.queryText({
      text: text,
      count: 10,
      page: this.showPages - 1,
      success: (result) => {
        const pois = result.list
        if (pois.length > 0) {
          result.list.forEach((item, index) => {
            if (!item.x || !item.y) {
              return
            }
            // 在地图上将搜寻的结果展现为矢量数据
            const graphic = new mars3d.graphic.PointEntity({
              id: item.id,
              position: [item.x, item.y],
              style: {
                name: item.name,
                pixelSize: 10,
                color: "#3388ff",
                outline: true,
                outlineColor: "#ffffff",
                outlineWidth: 2,
                scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1),
                clampToGround: true, // 贴地
                visibleDepth: false, // 是否被遮挡

                highlight: {
                  type: mars3d.EventType.click,
                  color: "#ff0000"
                },

                label: {
                  text: item.name,
                  font_size: 20,
                  color: "rgb(240,255,255)",
                  outline: true,
                  outlineWidth: 2,
                  outlineColor: Cesium.Color.BLACK,
                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                  pixelOffsetY: -10, // 偏移量
                  distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
                  clampToGround: true, // 贴地
                  visibleDepth: false // 是否被遮挡
                }
              },
              attr: item
            })
            this.graphicLayer.addGraphic(graphic)
          })
          this.graphicLayer.flyTo({
            radius: 2000
          })
          this.showDifferentPagesResult(result)
        }
      }
    })
  }

  flyTo(item) {
    const graphic = this.graphicLayer.getGraphicById(item.id)
    if (graphic === null) {
      globalMsg(item.name + " 无经纬度坐标信息！")
      return
    }

    graphic.openHighlight()

    graphic.flyTo({
      radius: 2000,
      complete: () => {
        graphic.openPopup()
      }
    })
  }

  // 构造查询结果的面板Html
  showDifferentPagesResult(result) {
    this._queryResultContainer.innerHTML = ""

    // 页面上显示结果li列表
    const resultDiv = document.createElement("div")
    resultDiv.className = "searchResults"

    const suggestionsList = document.createElement("ul")
    resultDiv.appendChild(suggestionsList)

    this._queryResultContainer.appendChild(resultDiv)

    result.list.forEach((item, index) => {
      const name = item.name
      if (!item.x || !item.y) {
        return
      }

      let number
      if (this.showPages > 1) {
        number = (this.showPages - 1) * 10 + index + 1
      } else {
        number = index + 1
      }
      const suggestions = document.createElement("li")
      const resultList = document.createTextNode(number + ". " + name)

      suggestionsList.appendChild(suggestions)
      suggestions.appendChild(resultList)
      suggestions.addEventListener("click", () => {
        this.flyTo(item)
      })
    })
    const allPages = Math.ceil(result.allcount / 10) // 全部的页数 10 = result.count
    this.resultNextPages = document.createElement("div")
    this.resultNextPages.className = "resultNextPages"
    this._queryResultContainer.appendChild(this.resultNextPages)

    // 共加载条数
    this._addPElement(this.resultNextPages, "共加载了" + result.allcount + "条", null)

    // 展示的页数
    this._addPElement(this.resultNextPages, this.showPages + "/" + allPages + "页", null)

    // 首页
    this._addPElement(this.resultNextPages, "首页", () => {
      this.showPages = 1
      this.pagesClickToPages()
    })

    // 上一页
    this._addPElement(this.resultNextPages, "<", () => {
      if (this.showPages === 1) {
        globalMsg("当前已是第一页！")
        return
      }
      this.showPages--
      this.pagesClickToPages()
    })

    // 下一页
    this._addPElement(this.resultNextPages, ">", () => {
      if (this.showPages >= allPages) {
        globalMsg("当前已是最后一页！")
        return
      }
      this.showPages++
      this.pagesClickToPages() // 查询结果
    })
  }

  // 添加p元素
  _addPElement(parentElement, chilidWord, callback) {
    const allResult = document.createElement("p")
    const allResultWord = document.createTextNode(chilidWord)
    parentElement.appendChild(allResult) // 添加p元素

    allResult.appendChild(allResultWord) // 给p元素添加内容

    allResult.addEventListener("click", callback)
  }

  // 点击上、下一页，清空当前页
  pagesClickToPages() {
    if (this.graphicLayer) {
      this.graphicLayer.clear()
    }
    this.strartQueryPOI()
  }

  autoTip(text) {
    this._gaodePOI.autoTip({
      text: text,
      success: (result) => {
        const pois = result.list
        const gaodesousuo = this._queryResultContainer.querySelector(".gaodesousuo")
        if (gaodesousuo) {
          gaodesousuo.remove()
        }
        const resultDiv = document.createElement("div")
        resultDiv.className = "searchResults gaodesousuo"

        const suggestionsList = document.createElement("ul")
        resultDiv.appendChild(suggestionsList)

        this._queryResultContainer.appendChild(resultDiv)

        if (pois.length > 0) {
          result.list.forEach((item) => {
            const name = item.name

            const suggestions = document.createElement("li")
            const resultList = document.createTextNode(name)
            const fa_search = document.createElement("img")
            fa_search.src = "img/icon/search.svg"
            suggestions.appendChild(fa_search)

            suggestionsList.appendChild(suggestions)
            suggestions.appendChild(resultList)
            suggestions.addEventListener("click", () => {
              this._queryInputContainer.querySelector(".searchInput").value = name

              this.showPages = 1
              this.queryTextByServer(name)
            })
          })
        } else {
          resultDiv.style.display = "none"
        }
      }
    })
  }

  toolSearchNoShow(val) {
    this._queryInputContainer.style.display = val
    this._queryResultContainer.style.display = val
  }

  //= ===========================坐标定位处理====================================
  isLonLat(text) {
    const reg = /^-?((0|1?[0-7]?[0-9]?)(([.][0-9]*)?)|180(([.][0]*)?)),-?((0|[1-8]?[0-9]?)(([.][0-9]*)?)|90(([.][0]*)?))$/ /* 定义验证表达式 */
    return reg.test(text) /* 进行验证 */
  }

  centerAtLonLat(text) {
    const arr = text.split(",")
    if (arr.length !== 2) {
      return
    }

    this._queryResultContainer.style.display = "none"
    const jd = Number(arr[0])
    const wd = Number(arr[1])
    if (isNaN(jd) || isNaN(wd)) {
      return
    }

    this._map.setCameraView({ lng: jd, lat: wd, minz: 2500 })

    // 添加实体
    const graphic = new mars3d.graphic.PointEntity({
      position: Cesium.Cartesian3.fromDegrees(jd, wd),
      style: {
        color: "#3388ff",
        pixelSize: 10,
        outline: true,
        outlineColor: "#ffffff",
        outlineWidth: 2,
        scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1),
        clampToGround: true, // 贴地
        visibleDepth: false // 是否被遮挡
      }
    })
    this.graphicLayer.addGraphic(graphic)

    graphic.bindPopup(`<div class="mars3d-template-titile">坐标定位</div>
              <div class="mars3d-template-content" >
                <div><label>经度</label> ${jd}</div>
                <div><label>纬度</label>${wd}</div>
              </div>`)

    setTimeout(() => {
      graphic.openPopup()
    }, 3000)
  }
}