<template>
  <div>
    <!--  事件编辑弹窗  -->
    <LowCodeEventEditorModal
      ref="eventEditor"
      @changeOuterValue="changeOuterValue"
      @refresh="refresh"
      @openModal="changeModalVisible"
      :event-editor-current="eventEditorCurrent"
      :editor-properties-config="editorPropertiesConfig"/>
    <!--  增加页面弹窗  -->
    <LowCodeAddPageModal
      ref="addPage"
      @refresh="refresh"/>
    <!--  生命周期函数弹窗  -->
    <LowCodeLifeCycleModal ref="lifeCycle"/>
    <!--  Logic回调弹窗  -->
    <LowCodeLogicCallbackModal ref="logicCallBack"/>
    <!--  Logic参数弹窗  -->
    <LowCodeLogicParamModal ref="logicParam"/>
    <!--  自定义JS弹窗  -->
    <LowCodeCustomJSModal ref="customJS"/>
    <LowCodeRunFunctionParamModal ref="functionParam" />
  </div>
</template>

<script>
import LowCodeEventEditorModal from '@vue2-client/base-client/components/common/LowCodeComponent/modal/lowCodeEventEditorModal.vue'
import LowCodeAddPageModal from '@vue2-client/base-client/components/common/LowCodeComponent/modal/lowCodeAddPageModal.vue'
import LowCodeLifeCycleModal from '@vue2-client/base-client/components/common/LowCodeComponent/modal/lowCodeLifeCycleModal.vue'
import LowCodeLogicCallbackModal from '@vue2-client/base-client/components/common/LowCodeComponent/modal/lowCodeLogicCallbackModal.vue'
import LowCodeLogicParamModal from '@vue2-client/base-client/components/common/LowCodeComponent/modal/lowCodeLogicParamModal.vue'
import LowCodeCustomJSModal from '@vue2-client/base-client/components/common/LowCodeComponent/modal/lowCodeCustomJSModal.vue'
import LowCodeRunFunctionParamModal from '@vue2-client/base-client/components/common/LowCodeComponent/modal/lowCodeRunFunctionParamModal.vue'

export default {
  name: 'LowCodeEditorModal',
  components: {
    LowCodeLogicCallbackModal,
    LowCodeLifeCycleModal,
    LowCodeEventEditorModal,
    LowCodeAddPageModal,
    LowCodeLogicParamModal,
    LowCodeCustomJSModal,
    LowCodeRunFunctionParamModal
  },
  props: {
    // 用于保存右侧编辑组件的属性
    // eslint-disable-next-line vue/require-default-prop
    editorPropertiesConfig: {
      type: Object,
      require: true
    },
    // 用于事件编辑的回显，在点击事件编辑按钮后，会将此变量赋值
    eventEditorCurrent: {
      type: Object,
      default: undefined
    }
  },
  inject: [
    'componentsMap'
  ],
  methods: {
    // 打开弹框
    changeModalVisible (modalName) {
      switch (modalName) {
        case 'eventEditor' :
          this.$refs.eventEditor.changeVisible()
          return
        case 'addPage':
          this.$refs.addPage.changeVisible()
          return
        case 'lifeCycle':
          this.$refs.lifeCycle.changeVisible()
          return
        case 'logicCallBack':
          this.$refs.logicCallBack.changeVisible()
          return
        case 'logicParam':
          this.$refs.logicParam.changeVisible()
          return
        case 'customJS':
          this.$refs.customJS.changeVisible()
          return
        case 'functionParam':
          this.$refs.functionParam.changeVisible()
      }
    },
    // 刷新组件
    refresh (type) {
      this.$emit('refresh', type)
    },
    // 修改外侧（编辑器）的值
    changeOuterValue (key, value) {
      this.$emit('changeOuterValue', key, value)
    }
  },
  computed: {
    config () {
      return this.$store.state.lowCode.config
    }
  }
}
</script>

<style scoped lang="less">

</style>
