<template>
  <div>
    <!--  自定义生命周期函数弹框  -->
    <a-modal
      title="执行方法参数编辑器"
      width="60%"
      :destroyOnClose="true"
      :z-index="1002"
      @ok="handleOK"
      @cancel="changeVisible"
      :visible="showRunFunctionParamsEditor">
      <a-popover title="参数说明" style="margin-right: 5%">
        <template slot="content">
          <p>该方法有以下几个参数：</p>
          <p>vm：触发事件的组件对象(this)</p>
          <p>data：触发的事件原生数据</p>
        </template>
        <a-button type="primary">
          参数说明
        </a-button>
      </a-popover>
      <a-popover title="返回值说明" style="margin-bottom: 5%">
        <template slot="content">
          <p>该方法需要一个数组类型的返回值</p>
          <p>运行的目标方法有几个参数，至少就要几个返回值</p>
          <p>返回值的顺序与方法的形参一一对应</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.runFunctionParam"
        :value="eventEditorContent.runFunctionParam"/>
    </a-modal>
  </div>
</template>

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

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

<style scoped lang="less">

</style>
