<template>
  <BasicForm @register="registerForm"> </BasicForm>
</template>
<script setup lang="ts">
  import { watch, nextTick } from 'vue';
  import { FormSchema } from '/@/components/Table';
  import { BasicForm, useForm } from '/@/components/Form/index';

  const props = defineProps({
    data: {
      type: Object,
      default: {},
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
  });
  const formSchema: FormSchema[] = [
    {
      label: '是否落实土壤污染状况调查及报告评审制度',
      field: 'sflstrwrztdcjbgpszd',
      component: 'Select',
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      componentProps: {
        options: [
          { label: '否', value: 0 },
          { label: '是', value: 1 },
        ],
      },
    },
    {
      label: '是否落实土壤污染风险评估及报告评审制度',
      field: 'sflstrwrfxpgjbgpszd',
      component: 'Select',
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      componentProps: {
        options: [
          { label: '否', value: 0 },
          { label: '是', value: 1 },
        ],
      },
    },
    {
      label: '是否落实土壤污染风险管控和修复及报告评审制度',
      field: 'sflstrwrfxgkhxfjbgpszd',
      component: 'Select',
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      componentProps: {
        options: [
          { label: '否', value: 0 },
          { label: '是', value: 1 },
        ],
      },
    },
    {
      label: '是否明确土壤污染风险管控和修复责任主体',
      field: 'sfmqtrwrfxgkhxfzrzt',
      component: 'Select',
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      componentProps: {
        options: [
          { label: '否', value: 0 },
          { label: '是', value: 1 },
        ],
      },
    },
    {
      label: '是否落实建设用地土壤污染风险管控和修复名录制度',
      field: 'sflsjsydtrwrfxgkhxfmlzd',
      component: 'Select',
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      componentProps: {
        options: [
          { label: '否', value: 0 },
          { label: '是', value: 1 },
        ],
      },
    },
    {
      label: '是否落实信息上报制度',
      field: 'sflsxxsbzd',
      component: 'Select',
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      componentProps: {
        options: [
          { label: '否', value: 0 },
          { label: '是', value: 1 },
        ],
      },
    },
    {
      label: '结论：是否依法落实土壤污染风险管控和修复措施',
      field: 'sfyflstrwrfxgkhxfcs',
      component: 'Select',
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      required: true,
      componentProps: {
        options: [
          { label: '否', value: 0 },
          { label: '是', value: 1 },
        ],
      },
    },
  ];
  //表单配置
  const [registerForm, { resetFields, setFieldsValue, getFieldsValue, validate }] = useForm({
    labelWidth: 380,
    schemas: formSchema,
    showActionButtonGroup: false,
    //默认row行配置,当 layout 为 horizontal 生效
    rowProps: { gutter: 24, justify: 'start', align: 'middle' },
    //全局col列占比(每列显示多少位)，和schemas中的colProps属性一致
    baseColProps: { span: 12 },
    //使用labelCol的样式参数来控制标题宽度
    labelCol: { style: { width: '240px' } },
    //row行的样式
    baseRowStyle: { width: '100%' },
    //表单布局属性，支持（vertical,horizontal），默认为horizontal
    layout: 'horizontal',
  });
  watch(
    () => props.data,
    async (val: any) => {
      if (val) {
        //重置表单
        await nextTick();
        await resetFields();

        await setFieldsValue({
          ...val,
        });
      }
    },
    { deep: true, immediate: true }
  );

  // 获取子组件 列表
  async function getFormValue() {
    //获取所有值
    let fieldsValue = await getFieldsValue();
    fieldsValue = await validate();
    return fieldsValue;
  }

  // 通过ref必须把在父组件里面的方法导出
  defineExpose({
    getFormValue,
  });
</script>
