<template>
  <BasicModal 
  v-bind="$attrs" 
  @register="registerModal" 
  destroyOnClose 
  :title="title" 
  :defaultFullscreen="true"
  @ok="handleSave"
  >
    <a-row :gutter="[16, 24]" style="height:100%;width: 100%;">
        <a-col class="gutter-row" :span="12" style="height:100%;">
            <a-card title="" :bordered="true" style="height:100%">
                <div class="gutter-box">
                    <HightIndex ref="refHightIndex" @callback="handleSetForm"></HightIndex>
                </div>
            </a-card>
        </a-col>
        <a-col class="gutter-row" :span="12">
            <a-card title="" :bordered="true" style="height:100%">
                <div class="gutter-box">
                    <FormulaForm ref="refFormulaForm" @success="handleSuccess"></FormulaForm>
                </div>
            </a-card>
            
        </a-col>
    </a-row>
  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import HightIndex from   './HightIndex.vue'
    import FormulaForm from   './FormulaForm.vue'
    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);
    const refFormulaForm = ref();
    const refHightIndex = ref();
    
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        isUpdate.value = !!data?.isUpdate;
        if(isUpdate.value){
          refFormulaForm.value.iniEditData(data.record);
          refHightIndex.value.iniData(data.record.params);
        } else {
           refHightIndex.value.iniData("");
        }
        
    });
    
    const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));

    const handleSetForm = async(selDatas) => {
        refFormulaForm.value.iniData(selDatas);
    }

    const handleSave = async() => {
        refFormulaForm.value.submitEvent(isUpdate.value);
    }

    const handleSuccess =() => {
        closeModal();
        emit("success")
    }

</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>