<!-- 初调文件上传 --><!-- 表单布局 -->
<template>
    <!-- 自定义表单 -->
    <BasicForm @register="registerForm">

    </BasicForm>
</template>
  
<script lang="ts" setup>
//引入依赖
import { ref, nextTick, watch } from 'vue'
import { updateCbdc, updateXxdc, saveGFxpg } from '/@/api/common/api'
import { useForm, BasicForm, FormSchema } from '/@/components/Form';

const props = defineProps({
    labelFirst: {
        type: String,
        default: '初步'
    },
    objec: {
        type: Array,
    },
    data: {
        type: Object,
        default: {}
    }
})
//自定义表单字段
const formSchemas: FormSchema[] = [
    {
        label: '污染地块id',
        field: 'wrdkid',
        component: 'Input',
        show: false
    },
    {
        label: 'id',
        field: 'id',
        component: 'Input',
        show: false
    },
    {
        label: '边界文件',
        field: 'dkshp',
        required: true,
        component: 'JUpload',
        componentProps: ({ formModel, formActionType }) => {
            return {
                showUploadList: false,
                onChange: async (v) => {
                    const arry = v.split(',')
                    debugger
                    console.log(props.data)
                    upLoad({
                        wrdkid: props.data.wrdkid,
                        id: props.data.id,
                        dkshp: arry[arry.length - 1]
                    })
                },

            }
        },
    },
    {
        label: '边界图片',
        field: 'dkpic',
        required: true,
        component: 'JUpload',
        componentProps: ({ formModel, formActionType }) => {
            return {
                showUploadList: false,
                onChange: async (v) => {
                    const arry = v.split(',')
                    upLoad({
                        wrdkid: props.data.wrdkid,
                        id: props.data.id,
                        dkpic: arry[arry.length - 1]
                    })
                },

            }
        },
    },
];

const [registerForm, { getFieldsValue, setFieldsValue, resetFields, validate }] = 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 }
);
// 点击上传图片接口
async function upLoad(param) {
    if (props.labelFirst == '初步') {
        await updateCbdc(param)
    } else if (props.labelFirst == '风险') {
        await saveGFxpg(param)
    } else {
        await updateXxdc(param)
    }
}
</script>
  
<style scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
    width: 100%;
}

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