<template>
  <div>
    <!--  自定义Logic参数JS弹框  -->
    <a-modal
      title="自定义Logic参数JS编辑器"
      width="60%"
      :destroyOnClose="true"
      :z-index="1002"
      @ok="handleOK"
      @cancel="() => { showLogicParamJSEditor = false}"
      :visible="showLogicParamJSEditor">
      <a-popover title="参数说明" style="margin-right: 5%">
        <template slot="content">
          <p>该方法有以下几个参数：</p>
          <p>componentData：所有组件暴露给低代码平台的属性，key为每个组件的id</p>
          <p>data：由事件源emit发出的参数</p>
        </template>
        <a-button type="primary">
          参数说明
        </a-button>
      </a-popover>
      <a-popover title="返回值说明" style="margin-bottom: 5%">
        <template slot="content">
          <p>该方法需要一个JSON类型的返回值</p>
          <p>该返回值就是传递给Logic执行的参数</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.logicParamJSFunction"
        :value="eventEditorContent.logicParamJSFunction"/>
    </a-modal>
  </div>
</template>

<script>
import codeMirror from '@vue2-client/components/CodeMirror/inedx.vue'
export default {
  name: 'LowCodeLogicParamModal',
  components: {
    codeMirror
  },
  data () {
    return {
      // 控制自定义Logic参数自定义JS函数弹框显隐
      showLogicParamJSEditor: false,
    }
  },
  methods: {
    changeVisible () {
      this.showLogicParamJSEditor = !this.showLogicParamJSEditor
    },
    handleOK () {
      this.$store.commit('setEventEditorContent', this.eventEditorContent)
      this.changeVisible()
    }
  },
  computed: {
    eventEditorContent () {
      return this.$store.state.lowCode.eventEditorContent
    }
  }
}
</script>

<style scoped lang="less">

</style>
