<template>
  <div class="vee-code-panel">
    <PanelHeader name="代码"></PanelHeader>
    <div class="vee-panel-content">
      <json-editor v-model="mJsonCode" @json-change="handleCodeChange"></json-editor>
    </div>
  </div>
</template>
<script>
import PanelHeader from './PanelHeader'
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { veeStoreName } from './store/name'
import JsonEditor from './components/JsonEditor'

export default {
  components: {
    PanelHeader,
    JsonEditor
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(veeStoreName, ['jsonCode']),
    mJsonCode: {
      get () {
        return this.jsonCode
      },
      set (val) {
        this.setRealJsonCode(val) // 先直接设置jsonCode，加快预览效果
        this.sendUpdateJsonCodeRequest(val)
      }
    },
  },
  methods: {
    ...mapMutations(veeStoreName, ['setRealJsonCode']),
    ...mapActions(veeStoreName, ['sendUpdateJsonCodeRequest']),
    handleCodeChange () {
      // console.log('change')
    }
  }
}
</script>
<style lang="scss">
  .vee-code-panel {
    width: 100%;
    height: 100%;
  }
  .vee-textarea {
    width: 100%;
    height: 100%;
  }
</style>
