<!-- 表单布局 -->
<template>
    <div class=" w-[98%] mx-auto">
        <BasicForm @register="registerForm">
        </BasicForm>
    </div>
</template>
  
<script lang="ts" setup>

import { ref, nextTick, watch } from 'vue'
import { useForm, BasicForm, FormSchema } from '/@/components/Form';
const props = defineProps({
    data: {
        type: Object,
    }
})

const formSchemas: FormSchema[] = [
    {
        label: '评审方式',
        field: 'meetingMinutes',
        component: 'Input',
        colProps: { span: 24 },
        componentProps: {
            readonly: true
        }
    },
    {
        label: '第几次评审',
        field: 'wz',
        component: 'Input',
        componentProps: {
            readonly: true
        }
    },
    {
        label: '会议时间',
        field: 'hysj',
        component: 'DatePicker',
        componentProps: {

            //日期格式化，页面上显示的值
            format: 'YYYY-MM-DD',
            //返回值格式化（绑定值的格式）
            valueFormat: 'YYYY-MM-DD',
            //是否显示今天按钮
            showToday: true,
        },
    },
    {
        label: '会议地点',
        field: 'hydd',
        component: 'Input',
        componentProps: {
            readonly: true
        }
    },
    {
        label: '会议组织方式',
        field: 'meeting',
        component: 'Input',
        componentProps: {
            readonly: true
        }

    },
    {
        label: '报告是否通过',
        field: 'name',
        component: 'Input',
        componentProps: {
            readonly: true
        }

    },
    {
        label: '评审文件',
        field: 'meetingMinute',
        component: 'Input',
        colProps: { span: 24 },
        componentProps: {
            readonly: true
        }
    },
    {
        label: '专家意见',
        field: 'zjyj',
        component: 'InputTextArea',
        colProps: { span: 24 },
        componentProps: {
            readonly: true
        }


    },
];

const [registerForm, { setFieldsValue }] = useForm({
    //注册表单列
    schemas: formSchemas,
    //不显示查询和重置按钮
    showActionButtonGroup: false,
    //默认row行配置,当 layout 为 horizontal 生效
    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',
});
watch(
    () => props.data,
    async (val: any) => {

        val && nextTick(async () => {
            await setFieldsValue({
                ...val,
            });
        });

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

:deep(.ant-picker) {
    width: 100%;
}

:deep(.ant-form-item-label) {
    background-color: #FBFBFB;
    border: 1px solid #E6E6E6;
    border-right: 0;
    text-align: center;
}
</style>