<!-- 敏感受体 -->
<template>
  <!-- 自定义表单 -->
  <BasicForm @register="registerForm"> </BasicForm>
</template>

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

  const props = defineProps({
    data: {
      type: Object,
      default: {},
    },
    isRead: {
      type: Boolean,
      default: 0,
    },
  });
  //自定义表单字段
  const formSchemas: FormSchema[] = [
    {
      label: '污染地块id',
      field: 'wrdkid',
      component: 'Input',
      show: false,
    },
    {
      label: 'id',
      field: 'id',
      component: 'Input',
      show: false,
    },
    {
      label: '地块周边1km范围内敏感点类型',
      field: 'mgstlx',
      component: 'CheckboxGroup',
      required: true,
      colProps: { span: 24 },
      componentProps: {
        options: [
          { label: '幼儿园', value: '幼儿园' },
          { label: '学校', value: '学校' },
          { label: '居民区', value: '居民区' },
          { label: '医院', value: '医院' },
          { label: '食用农产品产地', value: '食用农产品产地' },
          { label: '地表水体', value: '地表水体' },
          { label: '集中式饮水水源地', value: '集中式饮水水源地' },
          { label: '自然保护区', value: '自然保护区' },
          { label: '无', value: '无' },
          { label: '其他', value: '其他' },
        ],
      },
    },
  ];

  const [registerForm, { getFieldsValue, setFieldsValue, validate, updateSchema }] = 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: '210px' } },
    //row行的样式
    baseRowStyle: { width: '100%' },
    //表单布局属性，支持（vertical,horizontal），默认为horizontal
    layout: 'horizontal',
  });

  watch(
    () => [props.data, props.isRead],
    async ([val, val1]) => {
      console.log('敏感受体信息>>', val, val && Object.keys(val).length);
      console.log('props.data>>', props.data);
      console.log('props.isRead>>', props.isRead);
      if (val && !Object.keys(val).length) {
        return;
      }
      await nextTick();
      updateSchema({
        label: '地块周边1km范围内敏感点类型',
        field: 'mgstlx',
        component: 'CheckboxGroup',
        required: val1 ? true : false,
        colProps: { span: 24 },
        componentProps: {
          options: [
            { label: '幼儿园', value: '幼儿园' },
            { label: '学校', value: '学校' },
            { label: '居民区', value: '居民区' },
            { label: '医院', value: '医院' },
            { label: '食用农产品产地', value: '食用农产品产地' },
            { label: '地表水体', value: '地表水体' },
            { label: '集中式饮水水源地', value: '集中式饮水水源地' },
            { label: '自然保护区', value: '自然保护区' },
            { label: '无', value: '无' },
            { label: '其他', value: '其他' },
          ],
        },
      });
      await setFieldsValue({
        ...val,
      });
    },
    { deep: true, immediate: true }
  );
  // 获取子组件 列表
  async function getFormValueMgst() {
    //获取所有值
    let fieldsValue = await getFieldsValue();
    fieldsValue = await validate();

    return fieldsValue;
  }

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

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

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