<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: '表单设计',
              }
            ]"
          ></a-steps>
        </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" @click="submitClick" type="primary">保存</a-button>
          <a-button type="primary" danger @click="closeModalClick">关闭</a-button>
        </div>
      </div>
      <div class="design-content">
        <FormDesign v-show="stepsCurrent==1" :isSubmitClick="isSubmitClick" @designformback="designformback"></FormDesign>
        <FormPage v-show="stepsCurrent==0" :formScheme="formScheme" :isNextSteps="isNextSteps" :isAddVisible="isAddVisible" @formDataBack="handleformData" @formDataNoBack="formDataNoBack" />
      </div>
      <!-- <FormPage /> -->
      <!-- <FormDesign></FormDesign> -->
    </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, setModalProps }] = 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
  }
  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")
      })
    }
  }
  
 
</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>