<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" @click="submitClick" type="primary"
            >保存</a-button
          >
          <a-button type="primary" danger @click="closeModalClick">关闭</a-button>
        </div>
      </div>
      <div :class="`${prefixCls}-content`">
        <FormDesign
          v-show="stepsCurrent == 1"
          :isSubmitClick="isSubmitClick"
          @designformback="designformback"
        />
        <FormPage
          v-show="stepsCurrent == 0"
          :formScheme="formScheme"
          :isNextSteps="isNextSteps"
          :isAddVisible="isAddVisible"
          @form-data-back="handleformData"
          @form-data-no-back="formDataNoBack"
        />
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, provide, computed } from 'vue';
  import { message } from 'ant-design-vue';

  import { BasicModal, useModalInner } from '/@/components/Modal';
  import FormPage from './form/index.vue';
  import FormDesign from '../../form-design/index.vue';
  import { getBaseConfigList, addFormDesignData, editFormDesignData } from '@/api/formdesign/index';

  defineOptions({ name: 'FormModal' });

  const emit = defineEmits(['submitsuccess']);
  let isAddVisible = ref();

  let formScheme = ref();

  let saveFormDatas = ref({});
  provide(
    'handleNextStepsData',
    computed(() => saveFormDatas.value),
  );

  function designSendGrandson(value) {
    let designTab = JSON.parse(value);
    let schems = JSON.parse(saveFormDatas.value.scheme.scheme);
    schems.formInfo = designTab;

    saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
    console.log('孙子传值给我', designTab);
    submitSaveClick();

    console.log('saveschems', schems);
    designTab.schemas.forEach((item) => {});
  }
  provide('designSendGrandson', designSendGrandson);

  const [registerModal, { closeModal }] = useModalInner((data: any) => {
    stepsCurrent.value = 0;
    isSubmitClick.value = false;
    if (data.id) {
      isAddVisible.value = false;
      getBaseConfigList({ id: data.id }).then((res: AreaRespVO[]) => {
        formScheme.value = res;
        saveFormDatas.value = res;
        console.log('res');
      });
    } else {
      isAddVisible.value = true;
      formScheme.value = {
        info: {},
        scheme: {},
      };
      saveFormDatas.value = {
        info: {},
        scheme: {},
      };
    }
  });

  let stepsCurrent = ref();
  let isNextSteps = ref(false);
  let isSubmitClick = ref(false);

  function formNextClick() {
    isNextSteps.value = true;
    isSubmitClick.value = false;
    console.log('saveFormDatas', saveFormDatas.value);
  }
  function formPrevClick() {
    isNextSteps.value = false;
    stepsCurrent.value = 0;
  }

  function closeModalClick() {
    stepsCurrent.value = 1;
    formScheme = ref();
    isNextSteps.value = false;
    closeModal();
  }
  function formDataNoBack() {
    isNextSteps.value = false;
  }
  function handleformData(data) {
    console.log('emitttt', data);
    stepsCurrent.value = 1;
    let arr: any[] = [];
    console.log('adddata', data);
    if (data.table) {
      data.table.forEach((item) => {
        arr.push({
          field: item.field,
          name: item.name,
          relationField: item.relationField,
          relationName: item.relationName,
          type: item.type,
        });
      });
    }
    if (isAddVisible.value) {
      //新增
      let schems;
      if (saveFormDatas.value.scheme.scheme) {
        schems = JSON.parse(saveFormDatas.value.scheme.scheme) || {
          db: arr,
          rdb: data.connect || [],
          dbCode: data.form.DbCode,
          formInfo: {},
        };

        schems.db = arr;
        (schems.rdb = data.connect || []), (schems.dbCode = data.form.DbCode);
      } else {
        schems = {
          db: arr,
          rdb: data.connect || [],
          dbCode: data.form.DbCode,
          formInfo: {},
        };
      }
      let loginUser = localStorage.getItem('fireUserLoginName');
      saveFormDatas.value.info = data.form;
      saveFormDatas.value.info.createUserName = loginUser;
      saveFormDatas.value.scheme.scheme = JSON.stringify(schems);

      console.log('add', saveFormDatas.value.scheme);
    } else {
      //编辑
      console.log('edit');
      let schems = JSON.parse(saveFormDatas.value.scheme.scheme);
      schems.db = arr;
      (schems.rdb = data.connect || []), (saveFormDatas.value.info.category = data.form.category);
      saveFormDatas.value.info.description = data.form.description;
      saveFormDatas.value.info.enabledMark = data.form.enabledMark;
      saveFormDatas.value.info.name = data.form.name;
      saveFormDatas.value.info.DbCode = data.form.DbCode;
      saveFormDatas.value.info.formType = data.form.formType;
      saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
    }
  }

  function submitClick() {
    isSubmitClick.value = true;
  }
  function designformback() {
    isSubmitClick.value = false;
  }
  function submitSaveClick() {
    let param = {
      info: saveFormDatas.value.info,
      scheme: saveFormDatas.value.scheme,
    };
    console.log('param', param);
    if (isAddVisible.value) {
      addFormDesignData(param).then((res: AreaRespVO[]) => {
        console.log('addsuccess', res);
        closeModalClick();
        message.success('操作成功', 2);
        emit('submitsuccess');
      });
    } else {
      editFormDesignData(param).then((res: AreaRespVO[]) => {
        closeModalClick();
        message.success('操作成功', 2);
        emit('submitsuccess');
      });
    }
  }

  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>
