<template>
  <div>
    <!--  自定义JS事件弹框  -->
    <a-modal
      title="事件编辑器"
      width="60%"
      :destroyOnClose="true"
      :z-index="1002"
      @ok="handleOK"
      @cancel="changeVisible"
      :visible="showJSEventEditor">
      <a-popover title="参数说明" style="margin-right: 5%">
        <template slot="content">
          <p>该方法有以下几个参数：</p>
          <p>eventType：事件类型，比如：changeValue代表修改目标组件的值</p>
          <p>data：由事件源发出的参数列表</p>
          <p>targetKey：修改目标组件值所对应的key</p>
          <p>sourceVM：事件源的vue对象</p>
          <p>targetVM：目标的vue对象</p>
        </template>
        <a-button type="primary">
          参数说明
        </a-button>
      </a-popover>
      <a-popover title="返回值说明" style="margin-bottom: 5%">
        <template slot="content">
          <p>该方法需要的返回值：</p>
          <p>eventType：事件类型</p>
          <p>data：传递给目标组件的数据</p>
          <p>targetKey：修改目标组件值所对应的key</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.JSFunction"
        :value="eventEditorContent.JSFunction"/>
    </a-modal>
  </div>
</template>

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

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

<style scoped lang="less">

</style>
