<template>
  <div class="vee-preview-panel">
    <PanelHeader name="效果"></PanelHeader>
    <div class="vee-panel-content">
      <div class="vee-preview-p" :class="previewThemeParentClass">
        <div class="vee-preview" :class="previewThemeClass">
          <v-chart class="vve-v-chart" :options="jsonCode" autoresize></v-chart>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PanelHeader from './PanelHeader'
import ECharts from 'vue-echarts'
import 'echarts'
import { mapGetters, mapMutations } from 'vuex'
import { veeStoreName } from './store/name'

export default {
  components: {
    PanelHeader,
    'v-chart': ECharts
  },
  computed: {
    ...mapGetters(veeStoreName, ['jsonCode', 'previewThemeParentClass', 'previewThemeClass', 'compileError'])
  },
  methods: {
    ...mapMutations(veeStoreName, ['setCompileError']),
  },
  data () {
    return {
    }
  },
  errorCaptured () {
    this.setCompileError(true) // 编译错误
  },
  watch: {
    jsonCode () {
      this.setCompileError(false)
    }
  }
}
</script>
<style lang="scss">
  .vee-preview-panel {
    width: 100%;
    height: 100%;
  }
  .vee-preview-p {
    width: 100%;
    height: 100%;
  }
  .vee-preview {
    width: 100%;
    height: 100%;
  }
  .vve-v-chart.echarts {
    width: 100%;
    height: 100%;
  }
</style>
