<template>
  <div>
    <!--  自定义生命周期函数弹框  -->
    <a-modal
      title="生命周期函数编辑器"
      width="60%"
      :destroyOnClose="true"
      :z-index="1002"
      @ok="handleOK"
      @cancel="changeVisible"
      :visible="showLifeCycleFunctionEditor">
      <a-popover title="参数说明" style="margin-bottom: 5%">
        <template slot="content">
          <p>该方法有以下几个参数：</p>
          <p>vm：VUE组件对象(this)</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.LifeCycleFunction"
        :value="eventEditorContent.LifeCycleFunction"/>
    </a-modal>
  </div>
</template>

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

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

<style scoped lang="less">

</style>
