<template>
  <BasicModal :useWrapper="true" @register="registerModal" @ok="ok(1)" v-bind="$attrs" title="选择" :width="800">
    <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>
