<!-- 土壤污染 -->
<template>
  <!-- 自定义表单 -->
  <BasicForm @register="registerForm">
    <template #zyfx="{ model, field }">
      <a-radio-group v-model:value="model[field]" style="width: 100%">
        <a-radio :value="1">公众健康风险</a-radio>
        <a-radio :value="2">
          <div class="flex w-full"> <div style="width: 50px">其他</div><a-input v-model:value="model['zyfxQt']" /> </div>
        </a-radio>
      </a-radio-group>
    </template>
  </BasicForm>
</template>

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

  const props = defineProps({
    labelFirst: {
      type: String,
      default: '初步',
    },
    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: 'zyfxQt',
      component: 'Input',
      show: false,
    },

    {
      label: '需要风险管控修复土壤污染面积(m²)',
      field: 'wrmj',
      labelWidth: 200,
      component: 'InputNumber',
      required: true,
    },
    {
      label: '主要风险',
      field: 'zyfx',
      component: 'InputNumber',
      colProps: { span: 24 },
      required: true,
      slot: 'zyfx',
    },
    {
      label: '风险管控、修复要求',
      colProps: { span: 24 },
      field: 'gkxflx',
      component: 'RadioGroup',
      required: true,
      componentProps: {
        options: [
          { label: '风险管控', value: 1000 },
          { label: '修复', value: 2000 },
          { label: '管控及修复', value: 3000 },
          { label: '风险可接受', value: 4000 },
        ],
      },
    },
  ];

  const [registerForm, { getFieldsValue, setFieldsValue, resetFields, validate }] = useForm({
    //注册表单列
    schemas: formSchemas,
    //不显示查询和重置按钮
    showActionButtonGroup: false,
    layout: 'horizontal',
  });

  watch(
    () => props.data,
    async (val: any) => {
      val &&
        nextTick(async () => {
          await setFieldsValue({
            ...val,
          });
        });
    },
    { deep: true, immediate: true }
  );
  // 获取子组件 列表
  async function getFormValueTrhj() {
    console.log('子组件执行');
    //获取所有值
    let fieldsValue = await getFieldsValue();
    fieldsValue = await validate();

    return fieldsValue;
  }

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

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

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