<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" :isNextSteps="isNextSteps" />
        <ModalDesign v-show="stepsCurrent === 1" :isSubmitClick="isSubmitClick" />
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';

  import { BasicModal, useModalInner } from '/@/components/Modal';
  import ModalForm from './modalForm.vue';
  import ModalDesign from './modalDesign.vue';

  // 当前指向页面
  let stepsCurrent = ref();
  // 是否是第二页
  let isNextSteps = ref(false);
  // 提交按钮
  let isSubmitClick = ref(false);

  const [registerModal, { closeModal }] = useModalInner((data: any) => {
    stepsCurrent.value = 0;
    isSubmitClick.value = false;
  });

  // 下一页
  function formNextClick() {
    stepsCurrent.value = 1;
    isNextSteps.value = true;
    isSubmitClick.value = false;
  }
  // 上一页
  function formPrevClick() {
    isNextSteps.value = false;
    stepsCurrent.value = 0;
  }
  // 关闭窗口
  function closeModalClick() {
    stepsCurrent.value = 1;
    isNextSteps.value = false;
    closeModal();
  }
  // 提交
  function submitClick() {
    isSubmitClick.value = true;
  }
</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>
