<template>
  <div class="vee-main-container">
    <layout></layout>
  </div>
</template>
<script>

import layout from './layout'
import { veeStoreName } from './store/name'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import debounce from 'lodash/debounce'
import ChartWorker from './workers/chart.worker.js'

const chartWorker = new ChartWorker()

export default {
  name: 'VueEchartsEditor',
  props: {
    previewThemeClass: {
      type: String,
      default: ''
    },
    previewThemeParentClass: {
      type: String,
      default: ''
    },
    echartsOptions: {
      type: [String, Object],
      default () {
        return {}
      }
    },
    customChartTemplates: {
      type: Array,
      required: false,
    },
    overwriteDefaultchartTemplates: {
      type: Boolean,
      default () {
        return true
      }
    },
    showSubmitBtn: {
      type: Boolean,
      default: false,
    },
    showCloseBtn: {
      type: Boolean,
      default: false,
    }
  },
  created () {
    this.setPreviewThemeClass(this.previewThemeClass)
    this.setPreviewThemeParentClass(this.previewThemeParentClass)
    this.restoreSoul(this.echartsOptions)
    this.initChartTemplate()
    this.setShowSubmitBtn(this.showSubmitBtn)
    this.setShowCloseBtn(this.showCloseBtn)
    chartWorker.addEventListener("message", this.listernerChartWorkerMessage)
  },
  beforeDestroy () {
    chartWorker.removeEventListener('message', this.listernerChartWorkerMessage)
  },
  computed: {
    ...mapGetters(veeStoreName, ['soul'])
  },
  watch: {
    previewThemeClass (val) {
      this.setPreviewThemeClass(val)
    },
    previewThemeParentClass (val) {
      this.setPreviewThemeParentClass(val)
    },
    echartsOptions (val) {
      this.restoreSoul(val)
    },
    customChartTemplates () {
      this.initChartTemplate()
    },
    overwriteDefaultchartTemplates () {
      this.initChartTemplate()
    },
    showSubmitBtn (val) {
      this.setShowSubmitBtn(val)
    },
    showCloseBtn (val) {
      this.setShowCloseBtn(val)
    },
    soul: {
      deep: true,
      handler () {
        this.sendSoul2Worker()
      }
    }
  },
  methods: {
    listernerChartWorkerMessage (e) {
      const { type, data } = e.data
      if (this[type] && typeof (this[type]) === 'function') {
        this[type](data)
      } else {
        console.warn(`worker响应方法${type}未定义`)
      }
    },
    makeECOptionsResponse (data) {
      this.setJsonCode(data)
    },
    sendSoul2Worker: debounce(function() {
      chartWorker.postMessage({
        method: 'makeECOptions',
        params: this.soul
      })
    }, 100),
    ...mapMutations(veeStoreName, [
      'setPreviewThemeParentClass',
      'setPreviewThemeClass',
      'setChartTemplates',
      'addChartTemplates',
      'setShowSubmitBtn',
      'setShowCloseBtn',
      'setJsonCode'
    ]),
    ...mapActions(veeStoreName, [
      'restoreSoul'
    ]),
    initChartTemplate () {
      if (Array.isArray(this.customChartTemplates)) {
        if (this.overwriteDefaultchartTemplates) {
          this.setChartTemplates(this.customChartTemplates)
        } else {
          this.addChartTemplates(this.customChartTemplates)
        }
      }
    }
  },
  components: {
    layout
  }
}
</script>

<style lang="scss">
.vee-main-container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  font-size: 16px;
}
</style>
