<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :canFullscreen="false"
    :defaultFullscreen="true"
    :showCancelBtn="false"
    :showOkBtn="false"
    :draggable="false"
    title="慧创 表单发布"
  >
    <div class="form-box">
      <div class="form-box-header">
        <div class="form-box-header-logo"> 慧创 表单发布 </div>
        <div class="steps-box">
          <a-steps
            :current="stepsCurrent"
            :items="[
              {
                title: '基本配置',
              },
              {
                title: '页面设计',
              },
            ]"
          />
        </div>
        <div class="button-box">
          <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="design-content">
        <ModalForm
          v-show="stepsCurrent == 0"
          @change-form-verisons="changeFormVerisons"
          ref="modalFrom_formData"
          :editData="editData"
          :isNextSteps="isNextSteps"
          @set-steps-current="setStepsCurrent"
        />
        <ModalDesign
          v-show="stepsCurrent == 1"
          ref="modalDesign_config"
          :modalFormVerison="modalFormVerison"
          :editData="editData"
        />
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } 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';

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

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

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

  // 下一页
  function formNextClick() {
    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 (formEdit) {
      await Post_UpdateForm(postData);
    } else {
      await Post_AddForm(postData);
    }
    closeModal();
    isSubmitClick.value = true;
  }

  function getForm() {
    const formData = modalFrom_formData.value.formData;
    const config = modalDesign_config.value.config;

    // 基本配置信息
    let formModuleEntity = {};
    formModuleEntity = formData;
    formModuleEntity.formCode = formData.formCode;
    formModuleEntity.formVerison = formData.formVerison;
    formModuleEntity.modifyDate = new Date();
    formModuleEntity.scheme = JSON.stringify(config);

    // 目录sysModule
    let sysModule = {};
    sysModule.id = '';
    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 = [];
    if (config.table.btns) {
      config.table.btns.forEach((t) => {
        let temp = {};
        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 = '';
        sysModuleElement.push(temp);
      });
    }
    // 列sysModuleColumn
    let sysModuleColumn = [];
    if (config.table.columns) {
      config.table.columns.forEach((t) => {
        let temp = {};
        temp.encode = t.prop;
        temp.fullName = t.label;
        sysModuleColumn.push(temp);
      });
    }
    // 表单sysModuleForm
    let sysModuleForm = [];
    if (config.table.querys) {
      config.table.querys.forEach((t) => {
        let temp = {};
        temp.encode = t.key;
        temp.fullName = t.label;
        sysModuleForm.push(temp);
      });
    }

    // postData
    let postData = {};
    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;
  }
</script>
<style scoped>
  .form-box {
    width: 100%;
    /* height: calc(100% - 55px); */
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 1111;
  }
  .form-box-header {
    height: 55px;
  }
  .form-box-header-logo {
    line-height: 55px;
    font-size: 18px;
    margin-left: 20px;
    font-weight: bold;
  }
  .design-content {
    height: calc(100% - 55px);
    padding: 10px;
    background: #f0f2f5;
  }
  .steps-box {
    width: 320px;
    height: 56px;
    position: fixed;
    left: 50%;
    margin-left: -160px;
    top: 0;
    display: flex;
    align-items: center;
  }
  .button-box {
    width: 310px;
    height: 56px;
    position: fixed;
    right: 10px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
</style>
