<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :canFullscreen="false"
    :defaultFullscreen="true"
    :showCancelBtn="false"
    :showOkBtn="false"
    :draggable="false"
    title="慧创 表单发布"
  >
    <div :class="`${prefixCls}`">
      <div :class="`${prefixCls}-header`">
        <div :class="`${prefixCls}-header-logo`"> 慧创 表单发布 </div>
        <div :class="`${prefixCls}-header-stepsBox`">
          <a-steps
            :current="stepsCurrent"
            :items="[
              {
                title: '基本配置',
              },
              {
                title: '页面设计',
              },
            ]"
          />
        </div>
        <div :class="`${prefixCls}-header-btnBox`">
          <a-button :disabled="stepsCurrent != 1" @click="formPrevClick">上一步</a-button>
          <a-button :disabled="stepsCurrent === 1" @click="formNextClick">下一步</a-button>
          <a-button :disabled="stepsCurrent != 1" type="primary" @click="submitClick">
            保存
          </a-button>
          <a-button type="primary" danger @click="closeModalClick">关闭</a-button>
        </div>
      </div>
      <div :class="`${prefixCls}-content`">
        <ModalForm
          v-show="stepsCurrent == 0"
          @change-form-verisons="changeFormVerisons"
          ref="modalFrom_formData"
          :editData="editData"
          :isNextSteps="isNextSteps"
          :isEdit="isEdit"
          :formVerison_now="formVerison_now"
          @set-steps-current="setStepsCurrent"
        />
        <ModalDesign
          v-show="stepsCurrent == 1"
          ref="modalDesign_config"
          :modalFormVerison="modalFormVerison"
          :editData="editData"
          :isEdit="isEdit"
          :formVerison_now="formVerison_now"
        />
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, defineEmits } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import ModalForm from './modalForm.vue';
  import ModalDesign from './modalDesign.vue';
  import { Post_AddForm, Post_UpdateForm } from '@/api/demo/formModule';
import { debug } from 'console';

  // emit
  const emit = defineEmits(['submit-reload']);

  // 当前指向页面
  let stepsCurrent = ref(0);
  // 是否是第二页
  let isNextSteps = ref(false);
  // 提交按钮
  let isSubmitClick = ref(false);
  // 是否是编辑
  const isEdit = ref(false);
  // 子组件的暴露属性
  const modalFrom_formData = ref();
  const modalDesign_config = ref();
  // 编辑时发送给子组件的数据
  const editData = ref();
  // 当前formVerison
  const formVerison_now = ref();

  const defaultFormData = {
    type: 1,
    code: '',
    name: '',
    icon: 'ant-design:star-outlined',
    formCode: '',
    formCodeName: '',
    formVerison: '',
    pmoduleId: '',
    moduleId: '',
    enabledMark: 1,
    isSys: true,
    sortCode: '0',
    description: '',
  };

  const [registerModal, { closeModal }] = useModalInner((data: any) => {
    isEdit.value = data.isEdit;
    formVerison_now.value = data.formVerison;
    if (isEdit.value) {
      editData.value = data;
    } else {
      data.record = defaultFormData;
      editData.value = data;
    }
    stepsCurrent.value = 0;
    isSubmitClick.value = false;
  });

  // 下一页
  function formNextClick() {
    console.log('click')
    isNextSteps.value = true;
    isSubmitClick.value = false;
  }
  // 等待下一页的回传数据
  function setStepsCurrent(flag) {
    if (flag) {
      stepsCurrent.value = 1;
      isNextSteps.value = true;
    } else {
      stepsCurrent.value = 0;
      isNextSteps.value = false;
    }
  }
  // 上一页
  function formPrevClick() {
    isNextSteps.value = false;
    stepsCurrent.value = 0;
  }
  // 关闭窗口
  function closeModalClick() {
    stepsCurrent.value = 1;
    isNextSteps.value = false;
    closeModal();
  }

  // 提交
  async function submitClick() {
    const postData = getForm();
    if (isEdit.value) {
      await Post_UpdateForm(postData);
    } else {
      await Post_AddForm(postData);
    }
    closeModal();
    isSubmitClick.value = true;
    emit('submit-reload');
    stepsCurrent.value = 1;
    isNextSteps.value = false;
  }

  function getForm() {
    const formData = modalFrom_formData.value.formData;
    const config = modalDesign_config.value.config;
    // 基本配置信息
    let formModuleEntity: any = {};
    formModuleEntity = formData;
    formModuleEntity.formCode = formData.formCode;
    formModuleEntity.formVerison =
      typeof formData.formVerison === 'string' ? formData.formVerison : formData.formVerison.value;
    formModuleEntity.modifyDate = new Date();
    formModuleEntity.scheme = JSON.stringify(config);

    // 目录sysModule
    let sysModule: any = {};
    sysModule.id = formData.moduleId ? formData.moduleId : '';
    sysModule.cascadeId = '';
    sysModule.name = formData.name;
    sysModule.parentId = formData.pmoduleId;
    sysModule.parentName = '';
    sysModule.url = '';
    sysModule.iconName = formData.icon;
    sysModule.status = 1;
    sysModule.sortNo = formData.sortCode;
    sysModule.code = formData.code;
    sysModule.encode = '';
    sysModule.isSys = formData.isSys;
    sysModule.elements = [];

    // 按钮sysModuleElement
    let sysModuleElement: any = [];
    if (config.table.btns) {
      config.table.btns.forEach((t) => {
        let temp: any = {};
        temp.id = '';
        temp.domId = t.prop;
        temp.name = t.label;
        temp.attr = '';
        temp.script = '';
        temp.icon = t.icon;
        temp.class = t.class;
        temp.remark = '';
        temp.sort = t.sort;
        temp.moduleId = '';
        temp.status = true;
        sysModuleElement.push(temp);
      });
    }
    // 列sysModuleColumn
    let sysModuleColumn: any = [];
    if (config.table.columns) {
      config.table.columns.forEach((t) => {
        let temp: any = {};
        temp.encode = t.prop;
        temp.fullName = t.label;
        sysModuleColumn.push(temp);
      });
    }
    // 表单sysModuleForm
    let sysModuleForm: any = [];
    if (config.table.querys) {
      config.table.querys.forEach((t) => {
        let temp: any = {};
        temp.encode = t.key;
        temp.fullName = t.label;
        sysModuleForm.push(temp);
      });
    }

    // postData
    let postData: any = {};
    postData.formModuleEntity = formModuleEntity;
    postData.sysModule = sysModule;
    postData.sysModuleElement = sysModuleElement;
    postData.sysModuleColumn = sysModuleColumn;
    postData.sysModuleForm = sysModuleForm;

    return postData;
  }
  // 子组件modalForm传递数据到父组件，再由父组件传给子组件modalDesign
  const modalFormVerison = ref('');
  function changeFormVerisons(formVerison) {
    modalFormVerison.value = formVerison;
  }

  const prefixCls = 'form-box';
</script>
<style lang="less" scoped>
  .form-box {
    position: fixed;
    z-index: 1111;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: @component-background;

    &-header {
      height: 55px;

      &-logo {
        margin-left: 20px;
        font-size: 18px;
        font-weight: bold;
        line-height: 55px;
      }

      &-stepsBox {
        display: flex;
        position: fixed;
        top: 0;
        left: 50%;
        align-items: center;
        width: 320px;
        height: 56px;
        margin-left: -160px;
      }

      &-btnBox {
        display: flex;
        position: fixed;
        top: 0;
        right: 10px;
        align-items: center;
        justify-content: space-around;
        width: 310px;
        height: 56px;
      }
    }

    &-content {
      height: calc(100% - 55px);
      padding: 10px;
      background-color: @component-background;
    }
  }
</style>
