<template>
    <BasicModal :useWrapper="true" width="60%" @register="registerModal" @ok="ok(1)" v-bind="$attrs" title="选择">
        <BasicForm @register="registerForm">
        </BasicForm>
        <template #centerFooter>
            <a-button type="primary" @click="ok(0)">暂存</a-button>
        </template>
    </BasicModal>
</template>
<script lang="ts" setup>
import { BasicModal, useModalInner } from '/@/components/Modal';
import { defineEmits } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './data'
const emit = defineEmits(['sumbitTable'])

const [registerForm, { resetFields, setFieldsValue, getFieldsValue, updateSchema, validate }] = useForm({
    labelWidth: 150,
    schemas: formSchema,
    showActionButtonGroup: false,
    rowProps: { gutter: 24, justify: 'start', align: 'middle' },
    //全局col列占比(每列显示多少位)，和schemas中的colProps属性一致
    baseColProps: { span: 12 },
    //使用labelCol的样式参数来控制标题宽度
    labelCol: { style: { width: '150px' } },
    //row行的样式
    baseRowStyle: { width: '100%' },
    //表单布局属性，支持（vertical,horizontal），默认为horizontal
    layout: 'horizontal',
});
const [registerModal, { setModalProps, closeModal }] = useModalInner((data) => {
    resetFields();
    console.log(data);
    setFieldsValue({
        ...data,
    });
})

async function ok(type) {
    await validate()
    let fromData = getFieldsValue()
    fromData.status = type
    emit('sumbitTable', fromData)
}
defineExpose({
    // save,
})

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

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