<template>
  <div>
    <!--  自定义Logic回调弹框  -->
    <a-modal
      title="事件编辑器"
      width="60%"
      :destroyOnClose="true"
      :z-index="1002"
      @ok="handleOK"
      @cancel="() => { showLogicCallBackEditor = false}"
      :visible="showLogicCallBackEditor">
      <a-popover title="参数说明" style="margin-bottom: 5%">
        <template slot="content">
          <p>该方法有以下几个参数：</p>
          <p>componentsMap：所有组件注册的Map</p>
          <p>responseData：后端的返回值</p>
        </template>
        <a-button type="primary">
          参数说明
        </a-button>
      </a-popover>
      <code-mirror
        :style-obj="{height:'80%',fontSize:'18px',marginBottom:'15px'}"
        :mode="'javascript'"
        :theme="'monokai'"
        v-model="eventEditorContent.logicCallBackFunction"
        :value="eventEditorContent.logicCallBackFunction"/>
    </a-modal>
  </div>
</template>

<script>
import codeMirror from '@vue2-client/components/CodeMirror/inedx.vue'

export default {
  components: {
    codeMirror
  },
  data () {
    return {
      // 控制自定义Logic回调弹框显隐
      showLogicCallBackEditor: false,
    }
  },
  methods: {
    changeVisible () {
      this.showLogicCallBackEditor = !this.showLogicCallBackEditor
    },
    handleOK () {
      this.$store.commit('setEventEditorContent', this.eventEditorContent)
      this.changeVisible()
    }
  },
  computed: {
    eventEditorContent () {
      return this.$store.state.lowCode.eventEditorContent
    }
  }
}
</script>

<style scoped lang="less">

</style>
