    import { Zondy, defaultValue } from '@mapgis/webclient-common'
    import * as L from '@mapgis/leaflet'
    import Widget from '../Widget'
    /**
     * 二维场景信息弹窗(leaflet引擎)
     * 参考示例：
     * <a href='#MapView'>[初始化二维场景视图]</a>
     * <br>[ES5引入方式]：<br/>
     * Zondy.MapView() <br/>
     * [ES6引入方式]：<br/>
     * import { MapView } from '@mapgis/webclient-leaflet-plugin' <br/>
     * @class Popup
     * @extends Widget
     * @moduleEX Widget
     * @param {Object} options 构造参数
     * @param {MapView} [options.view] 弹窗地图视图对象
     * @param {String}  [options.id]  弹窗ID
     * @param {Point} [options.location] 弹窗定位点
     * @param {String} [options.title] 弹窗标题
     * @param {String|HTMLElement} [options.content] 弹框内容
     *
     * @example <caption><h7 id='MapView'>初始化一个二维场景视图</h7></caption>
     * // ES5引入方式
     * const { Popup } = Zondy
     * // ES6引入方式
     * import { Popup } from "@mapgis/webclient-leaflet-plugin"
     * // 初始化图层管理容器
     * const map = new Map();
     * // 初始化地图视图对象
     * const mapView = new MapView({
     *   // 二维场景视图的容器(html的div标签)ID
     *   viewId: "二维场景视图的容器的id",
     *   // 图层管理容器
     *   map: map
     * });
     * const popupObj = {
     *  title: "坐标",
     *  content:"AAAAAAAAAAAAAAAAAAAAAAAAAA",
     *  location: new Point({coordinates:[123,34]})
     *}
     * mapView.popup.open(popupObj)
     */

    class Popup extends Widget {
      constructor(options) {
        super(options)
        /**
         * 弹框的地图视野
         * @member {MapView}
         */
        this.view = this._view
        /**
         * 弹框唯一id
         * @member {String}
         */
        this.id = this._id
        /**
         * 弹框位置
         * @member {String}
         */
        this.location = defaultValue(options.location, '')
        /**
         * 弹框标题
         * @member {String}
         */
        this.title = defaultValue(options.title, '')
        /**
         * 弹框内容
         * @member {String}
         */
        this.content = defaultValue(options.content, '')
        /**
         * 弹框按钮事件
         * @member {String}
         */
        this.action = undefined
        /**
         * popup对象
         * @member {String}
         */
        this._popup = undefined
        // 初始化弹窗
        this._initPopup()
      }

      /**
       * 初始化弹窗
       * @private
       * */
      _initPopup() {
        this._customPopup()
        // 关闭地图点击关闭弹窗事件
        this.view.closePopupOnClick = false
        // 初始化弹窗默认面板
        this._initDefaultUI()
      }

      /**
       * 自定义弹窗样式，修改leaflet默认样式
       * @private
       * */
      _customPopup() {
        L.CustomPopup = L.Popup.extend({
          // _initLayout0() {
          //   const prefix = 'leaflet-popup'
          //   const container = L.DomUtil.create(
          //     'div',
          //     `${prefix} ${this.options.className || ''} leaflet-zoom-animated`
          //   )
          //   this._container = container

          //   const wrapper = container
          //   const contentNode = L.DomUtil.create(
          //     'div',
          //     `${prefix}-content`,
          //     wrapper
          //   )

          //   L.DomEvent.disableClickPropagation(wrapper)
          //     .disableScrollPropagation(contentNode)
          //     .on(wrapper, 'contextmenu', L.DomEvent.stopPropagation)
          // }
          _initLayout() {
            const prefix = 'leaflet-popup'
            const container = L.DomUtil.create(
              'div',
              `${prefix} ${this.options.className || ''} leaflet-zoom-animated`
            )
            this._container = container

            if (this.options.closeButton) {
              const closeButton = L.DomUtil.create(
                'a',
                `${prefix}-close-button`,
                container
              )
              this._closeButton = closeButton
              closeButton.href = '#close'
              closeButton.innerHTML = '&#215;'
              closeButton.style.top = '12px'
              // L.DomEvent.on(closeButton, 'click', this._onCloseButtonClick, this)wrapper
            }

            const wrapper = L.DomUtil.create(
              'div',
              `${prefix}-content-wrapper`,
              container
            )
            this._wrapper = wrapper
            this._contentNode = L.DomUtil.create(
              'div',
              `${prefix}-content`,
              wrapper
            )
            this._contentNode.setAttribute('style', 'margin:8px')
            L.DomEvent.disableClickPropagation(wrapper)
              .disableScrollPropagation(this._contentNode)
              .on(wrapper, 'contextmenu', L.DomEvent.stopPropagation)

            this._tipContainer = L.DomUtil.create(
              'div',
              `${prefix}-tip-container`,
              container
            )
            this._tip = L.DomUtil.create('div', `${prefix}-tip`, this._tipContainer)
          }
        })
      }

      /**
       * 初始化弹窗默认面板
       * @private
       * */
      _initDefaultUI(title, content) {
        let defaultUI = undefined
        if (typeof content === 'object' && content instanceof HTMLElement) {
          defaultUI = document.createElement('div')
          defaultUI.setAttribute('id', `${this.id}-popup-default`)
          const headerDom = document.createElement('div')
          headerDom.setAttribute(
            'style',
            'font-size: 18px;font-weight: 600;height: 36px;line-height: 36px;'
          )
          headerDom.innerHTML = `${title}<div class="zongdy-popup__toggle" style="display: inline-block;width: 36px;height: 36px;line-height: 36px;text-align: center;position: absolute;right: 20px;">
            <svg aria-hidden="true" class="svg" fill="currentColor" height="16px" width="16px" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M5 13.793l7-7 7 7v1.414l-7-7-7 7z"></path></svg>
          </div>`
          const contentDom = document.createElement('div')
          contentDom.setAttribute('class', 'zongdy-popup__content')
          contentDom.setAttribute('style', 'padding: 8px;')
          contentDom.appendChild(content)
          const footerDom = document.createElement('div')
          footerDom.setAttribute('style', 'border-top: 1px solid;')
          footerDom.innerHTML = `<div class="zongdy-popup__zoom" style="display: inline-block;width: 36px;height: 36px;line-height: 36px;text-align: center;">
            <svg class="svg" fill="currentColor" height="16px" width="16px" viewBox="0 0 16 16" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M9 7H7v2H6V7H4V6h2V4h1v2h2zm6.805 7.861l-.943.942a.665.665 0 0 1-.943 0l-3.067-3.067a.667.667 0 0 1 0-.943l.129-.13-1.108-1.107A5.279 5.279 0 1 1 11.8 6.5a5.251 5.251 0 0 1-1.237 3.366l1.108 1.108.124-.124a.668.668 0 0 1 .943 0l3.067 3.068a.666.666 0 0 1 0 .943zM10.8 6.5a4.3 4.3 0 1 0-4.3 4.3 4.304 4.304 0 0 0 4.3-4.3zm4.062 7.89l-2.595-2.598-.473.473 2.597 2.595z"></path></svg>
          </div>`
          defaultUI.appendChild(headerDom)
          defaultUI.appendChild(contentDom)
          defaultUI.appendChild(footerDom)
        } else {
          defaultUI = `
            <div id="${this.id}-popup-default">
              <div class="zongdy-popup__header" style="font-size: 18px;font-weight: 600;height: 36px;line-height: 36px;">
                ${title}
                <div class="zongdy-popup__toggle" style="display: inline-block;width: 36px;height: 36px;line-height: 36px;text-align: center;position: absolute;right: 20px;">
                  <svg aria-hidden="true" class="svg" fill="currentColor" height="16px" width="16px" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M5 13.793l7-7 7 7v1.414l-7-7-7 7z"></path></svg>
                </div>
              </div>
              <div class="zongdy-popup__content" style="padding: 8px;">${content}</div>
              <div class="zongdy-popup__footer" style="border-top: 1px solid;">
                <div class="zongdy-popup__zoom" style="display: inline-block;width: 36px;height: 36px;line-height: 36px;text-align: center;">
                  <svg class="svg" fill="currentColor" height="16px" width="16px" viewBox="0 0 16 16" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M9 7H7v2H6V7H4V6h2V4h1v2h2zm6.805 7.861l-.943.942a.665.665 0 0 1-.943 0l-3.067-3.067a.667.667 0 0 1 0-.943l.129-.13-1.108-1.107A5.279 5.279 0 1 1 11.8 6.5a5.251 5.251 0 0 1-1.237 3.366l1.108 1.108.124-.124a.668.668 0 0 1 .943 0l3.067 3.068a.666.666 0 0 1 0 .943zM10.8 6.5a4.3 4.3 0 1 0-4.3 4.3 4.304 4.304 0 0 0 4.3-4.3zm4.062 7.89l-2.595-2.598-.473.473 2.597 2.595z"></path></svg>
                </div>
              </div>
            </div>
          `
        }
        return defaultUI
      }

      /**
       * 打开popup弹窗
       * @param {Object} options 弹窗属性对象
       * */
      open(options) {
        if (this._popup) {
          this.view.closePopup(this._popup)
          this._popup = undefined
          setTimeout(() => {
            this.openPopup(options)
          }, 0)
        } else {
          this.openPopup(options)
        }
      }

      /**
       * 打开popup弹窗
       * @param {Object} options 弹窗属性对象
       * */
      openPopup(options) {
        const latlng = L.latLng(
          options.location.coordinates[1],
          options.location.coordinates[0]
        )
        const content = this._initDefaultUI(options.title, options.content)
        this._popup = new L.CustomPopup({
          className: 'layerPopup',
          // autoClose: false,
          minWidth: 50,
          offset: L.point(0, -10)
        })
          .setLatLng(latlng)
          .setContent(content)
          .openOn(this._view)
        // this._popup = L.popup().setLatLng(latlng).setContent(content).openOn(this._view)
        const self = this
        this._popup._container.querySelector('.zongdy-popup__zoom').onclick =
          function () {
            self.view.setZoom(self.view._zoom + 1)
          }
        let showContentFlag = true
        this._popup._container.querySelector('.zongdy-popup__toggle').onclick =
          function () {
            showContentFlag = !showContentFlag
            if (showContentFlag) {
              document
                .getElementById(`${self.id}-popup-default`)
                .querySelector('.zongdy-popup__content').style.display = 'block'
            } else {
              document
                .getElementById(`${self.id}-popup-default`)
                .querySelector('.zongdy-popup__content').style.display = 'none'
            }
          }
      }
    }
    Zondy.Popup = Popup
    export default Popup