<template>
  <div class="geoeye" style="width: 100%;height: 100%;"></div>
</template>

<script>
import { Screen, validate } from '../index'
export default {
  props: {
    config: Object
  },
  methods: {
    init() {
      try {
        this.screen = new Screen({
          config: this.config,
          container: this.$el
        })
        this.screen.on('on-click', this.click)
        this.screen.on('on-mouseenter', this.mouseenter)
        this.screen.on('on-mouseleave', this.mouseleave)
        this.screen.on('on-mousedown', this.mousedown)
        this.screen.on('on-mouseup', this.mouseup)
      } catch (err) {
        this.$emit('on-error', err)
        throw err
      }
    },
    click(e) {
      this.$emit('on-click', e)
    },
    mouseenter(e) {
      this.$emit('on-mouseenter', e)
    },
    mouseleave(e) {
      this.$emit('on-mouseleave', e)
    },
    mousedown(e) {
      this.$emit('on-mousedown', e)
    },
    mouseup(e) {
      this.$emit('on-mouseup', e)
    }
  },
  mounted() {
    if (!validate(this.config).length) {
      this.init()
      this.$emit('on-render')
    }
  },
  data() {
    return {
      screen: null
    }
  },
  watch: {
    config() {
      try {
        if (validate(this.config).length) {
          this.screen && this.screen.destroy()
          return
        }
        if (!this.screen) {
          this.init()
        } else {
          this.screen.setConfig(this.config)
        }
        this.$emit('on-render')
      } catch (err) {
        this.$emit('on-error', err)
        throw err
      }
    }
  }
}
</script>

<style scoped></style>
