<template>
  <a-card>
    <!--     所有组件       -->
    <a-card-grid class="ui-item" @click="addContainer">
      组件容器
    </a-card-grid>
    <a-card-grid class="ui-item" @click="addTabs">
      标签页容器
    </a-card-grid>
    <template v-for="(item, index) in getRegisteredComponents()">
      <a-card-grid :key="index" class="ui-item" @click="addComponentToContainer(item)">
        {{ item }}
      </a-card-grid>
    </template>
  </a-card>
</template>

<script>
import * as registeredRender from '@vue2-client/utils/lowcode/registerComponentForRender'
import * as lowcodeUtils from '@vue2-client/utils/lowcode/lowcodeUtils'

export default {
  name: 'LowCodeUIStore',
  methods: {
    // 添加容器
    addContainer () {
      // 如果目标不是一个容器
      if (!this.targetContainer) {
        // 如果没有指定页面容器，则直接报错
        if (this.activeMainPage === undefined) {
          this.$message.error('未选中任何工作空间！')
          return
        }
        // 获取当前选中的页面容器
        let targetIndex = this.activeMainPage
        for (let i = 0; i < this.config.page.length; i++) {
          if (this.config.page[i].id === this.activeMainPage) {
            targetIndex = i
            break
          }
        }
        const pageId = this.config.page[targetIndex].id
        const length = this.config.page[targetIndex].body.length
        // 如果是page类型，添加两个容器。其他类型添加一个容器
        if (this.config.page[targetIndex].type === 'page') {
          this.config.page[targetIndex].body.push(
            {
              id: pageId + '_' + length,
              config: {},
              type: 'row',
              body: [
                lowcodeUtils.newContainer(),
                lowcodeUtils.newContainer()
              ]
            }
          )
        } else {
          this.config.page[targetIndex].body.push({
            id: pageId + '_' + length,
            config: {},
            type: 'row',
            body: [
              lowcodeUtils.newContainer()
            ]
          })
        }
      } else {
        // 如果目标是容器
        const row = lowcodeUtils.getRowConfigByComponentId(this.targetContainer.id, this.config)
        const targetInRowIndex = lowcodeUtils.getComponentInRowIndex(this.targetContainer.id, this.config)
        const targetItem = lowcodeUtils.getComponentConfig(this.targetContainer.id, this.config)
        const maxWidth = targetItem.span
        // 确认是水平拆分还是垂直拆分
        this.$confirm({
          content: '是否为水平拆分',
          onOk: () => {
            // 将目标容器一分为二
            row.body.splice(targetInRowIndex, 1,
              lowcodeUtils.newContainer(Math.floor(maxWidth / 2)),
              lowcodeUtils.newContainer(Math.ceil(maxWidth / 2))
            )
            this.$store.commit('setTargetContainer', undefined)
            this.$emit('refresh', 'Organization')
          },
          onCancel: () => {
            const pageId = 'container_page_' + lowcodeUtils.nanoidWithoutSymbol(2)
            // 垂直拆分
            const temp = [
              {
                id: pageId,
                type: 'page',
                body: [
                  {
                    id: pageId + '_0',
                    type: 'row',
                    config: {},
                    body: [
                      lowcodeUtils.newContainer()
                    ]
                  },
                  {
                    id: pageId + '_1',
                    type: 'row',
                    config: {},
                    body: [
                      lowcodeUtils.newContainer()
                    ]
                  }
                ]
              }
            ]
            this.$set(targetItem, 'type', 'container_page')
            this.$set(targetItem, 'page', temp)
            this.$store.commit('setTargetContainer', undefined)
            this.$emit('refresh', 'Organization')
          }
        })
      }
      this.$emit('refresh', 'Organization')
    },
    addTabs () {
      // 如果没有选中容器
      if (!this.targetContainer) {
        this.$message.error('请先选择目标容器！')
        this.$store.commit('setTargetContainer', undefined)
        return
      }
      // 获取选中的容器
      const target = lowcodeUtils.getComponentConfig(this.targetContainer.id, this.config.page)
      const id = 'Tabs_' + lowcodeUtils.nanoidWithoutSymbol(6)
      target.type = 'tabs'
      target.id = id
      target.body = []
      const pageId = lowcodeUtils.nanoidWithoutSymbol(2)
      target.body.push({
        key: id + '_1',
        label: '1',
        type: 'tab',
        body: {
          type: 'container_page',
          span: 24,
          id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6),
          page: [
            {
              id: 'container_page_' + pageId,
              type: 'page',
              body: [
                {
                  id: 'container_page_' + pageId + '_0',
                  type: 'row',
                  config: {
                    align: 'top',
                    gutter: 0,
                    justify: 'start'
                  },
                  body: [
                    {
                      type: 'container',
                      selected: false,
                      span: 24,
                      id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6),
                      props: {}
                    }
                  ]
                }
              ]
            }
          ]
        }
      })
      delete target.selected
      this.$store.commit('setTargetContainer', undefined)
      this.$emit('refresh', 'Organization')
    },
    // 获取所有已注册组件，用于添加至UI库
    getRegisteredComponents () {
      return Object.keys(registeredRender)
    },
    // 添加组件到容器中
    addComponentToContainer (type) {
      // 如果没有选中容器
      if (!this.targetContainer) {
        this.$message.error('请先选择目标容器！')
        this.$store.commit('setTargetContainer', undefined)
        return
      }
      // 获取选中的容器
      const target = lowcodeUtils.getComponentConfig(this.targetContainer.id, this.config.page)
      // 将容器的类型和id改变
      target.type = type
      target.id = target.type + '_' + lowcodeUtils.nanoidWithoutSymbol(6)
      this.$store.commit('setTargetContainer', undefined)
      this.$emit('refresh', 'Organization')
    },
  },
  computed: {
    config () {
      return this.$store.state.lowCode.config
    },
    targetContainer () {
      return this.$store.state.lowCode.targetContainer
    }
  }
}
</script>

<style scoped lang="less">
.ui-item:hover {
  cursor: pointer;
}

.ui-item{
  width: 100%;
  height:10%;
  text-align: center;
  overflow-wrap: break-word;
  padding: 7%
}
</style>
