<template>
  <div v-show="show">
    <slot/>
  </div>
</template>

<script>
import commonMixin from 'vue-baidu-map/components/base/mixins/common.js'
import bindEvents from 'vue-baidu-map/components/base/bindEvent.js'
import { createPoint, createSize } from 'vue-baidu-map/components/base/factory.js'

export default {
  name: 'BaiduMapInfoWindow',
  mixins: [commonMixin('overlay')],
  props: {
    show: {
      type: Boolean,
      default: false
    },
    position: {
      type: Object,
      required: true
    },
    title: {
      type: String,
      default: null
    },
    width: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: 0
    },
    maxWidth: {
      type: Number,
      default: undefined
    },
    offset: {
      type: Object,
      default: undefined
    },
    maximize: {
      type: Boolean,
      default: false
    },
    autoPan: {
      type: Boolean,
      default: true
    },
    closeOnClick: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    show(val) {
      val ? this.openInfoWindow() : this.closeInfoWindow()
    },
    'position.lng'(val, oldVal) {
      this.reload()
    },
    'position.lat'(val, oldVal) {
      this.reload()
    },
    'offset.width'(val, oldVal) {
      this.reload()
    },
    'offset.height'(val) {
      this.reload()
    },
    maxWidth() {
      this.reload()
    },
    width(val) {
      this.originInstance.setWidth(val)
    },
    height(val) {
      this.originInstance.setHeight(val)
    },
    title(val) {
      this.originInstance.setTitle(val)
    },
    maximize(val) {
      val ? this.originInstance.enableMaximize() : this.originInstance.disableMaximize()
    },
    autoPan(val) {
      val ? this.originInstance.enableAutoPan() : this.originInstance.disableAutoPan()
    },
    closeOnClick(val) {
      val ? this.originInstance.enableCloseOnClick() : this.originInstance.disableCloseOnClick()
    }
  },
  methods: {
    redraw() {
      this.originInstance.redraw()
    },
    load() {
      const { BMap, map, show, title, width, height, maxWidth, offset, autoPan, closeOnClick, maximize, bindObserver, $parent } = this
      const $content = this.$el
      const overlay = new BMap.InfoWindow($content, {
        width,
        height,
        title,
        maxWidth,
        offset: createSize(BMap, offset),
        enableAutoPan: autoPan,
        enableCloseOnClick: closeOnClick
        // enableMessage: typeof message === 'undefined',
        // message
      })

      maximize ? overlay.enableMaximize() : overlay.disableMaximize()
      bindEvents.call(this, overlay)
      this.originInstance = overlay
      overlay.redraw()
      ;[].forEach.call($content.querySelectorAll('img'), $img => {
        $img.onload = () => overlay.redraw()
      })
      bindObserver()
      this.$container = $parent.originInstance && $parent.originInstance.openInfoWindow ? $parent.originInstance : map
      show && this.openInfoWindow()
    },
    bindObserver() {
      const MutationObserver = global.MutationObserver
      if (!MutationObserver) {
        return
      }
      const { $el, originInstance } = this
      this.observer = new MutationObserver(mutations => originInstance.redraw())
      this.observer.observe($el, { attributes: true, childList: true, characterData: true, subtree: true })
    },
    openInfoWindow() {
      const { BMap, $container, position, originInstance } = this
      $container.openInfoWindow(originInstance, createPoint(BMap, position))
    },
    closeInfoWindow() {
      this.$container.closeInfoWindow(this.originInstance)
    }
  }
}
</script>