<template>
  <div>
    <!--  新增页面容器弹框  -->
    <a-modal
      title="新增页面容器"
      width="60%"
      :z-index="1001"
      :destroyOnClose="true"
      @ok="handleAddPageContainerModalOk"
      @cancel="() => { showPageContainerAddModal = false }"
      :visible="showPageContainerAddModal">
      <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
        <!--    容器类型    -->
        <a-form-item label="容器类型">
          <a-select v-model="addComponentTemp.type" @change="pageContainerAddTypeChange">
            <a-select-option value="page">
              页面
            </a-select-option>
            <a-select-option value="modal">
              弹框
            </a-select-option>
            <a-select-option value="draw">
              抽屉
            </a-select-option>
          </a-select>
        </a-form-item>
        <!--    标题    -->
        <a-form-item label="标题">
          <a-input v-model="addComponentTemp.title"/>
        </a-form-item>
        <template v-if="addComponentTemp.type !== 'page'">
          <!--    宽度    -->
          <a-form-item label="宽度">
            <a-input v-model="addComponentTemp.width"/>
          </a-form-item>
        </template>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import codeMirror from '@vue2-client/components/CodeMirror/inedx.vue'
import * as lowcodeUtils from '@vue2-client/utils/lowcode/lowcodeUtils'

export default {
  name: 'LowCodeAddPageModal',
  components: {
    codeMirror
  },
  props: {
  },
  inject: [
    'componentsMap'
  ],
  data () {
    return {
      // 控制弹框显隐
      showPageContainerAddModal: false,
      // 添加页面容器参数
      addComponentTemp: { type: 'page' }
    }
  },
  methods: {
    changeVisible () {
      this.addComponentTemp = { type: 'page' }
      this.showPageContainerAddModal = !this.showPageContainerAddModal
    },
    // 添加页面容器弹框确认
    handleAddPageContainerModalOk () {
      const pageId = 'page_' + lowcodeUtils.nanoidWithoutSymbol(6)
      const result = {
        id: pageId,
        type: this.addComponentTemp.type,
        title: this.addComponentTemp.title,
        width: this.addComponentTemp.width,
        body: [
          {
            id: pageId + '_0',
            config: {
              align: 'top',
              gutter: 0,
              justify: 'start'
            },
            type: 'row',
            body: [
              lowcodeUtils.newContainer()
            ]
          }
        ]
      }
      this.addComponentTemp = { type: 'page' }
      this.config.page.push(result)
      this.$store.commit('setConfig', this.config)
      this.$emit('refresh', 'Organization')
      this.changeVisible()
    },
    // 添加页面容器类型修改
    pageContainerAddTypeChange (value) {
      if (value !== 'page') {
        this.addComponentTemp = { width: '70%', type: value }
      } else {
        this.addComponentTemp = { type: value }
      }
    },
  },
  computed: {
    config () {
      return this.$store.state.lowCode.config
    }
  }
}
</script>

<style scoped lang="less">

</style>
