<!-- 表单布局 -->
<template>
  <!-- 自定义表单 -->
  <BasicForm @register="registerForm" />
</template>

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

  const props = defineProps({
    data: {
      type: Object,
    },
    isRead: {
      type: Boolean,
      default: false,
    },
  });

  //自定义表单字段
  const formSchemas: FormSchema[] = [
    {
      label: '单位名称',
      field: 'dwmc',
      component: 'Input',
      required: true,
      componentProps: {
        disabled: props.isRead,
      },
    },
    {
      label: '工商营业执照号',
      field: 'gsyyzzh',
      required: true,
      component: 'Input',
      dynamicRules: () => {
        return [{ pattern: /^[\u4e00-\u9fa5]{1}[A-Za-z0-9]{17}$/, message: '电话格式有误', required: true }];
      },
      componentProps: {
        disabled: props.isRead,
      },
    },

    {
      label: '住所',
      field: 'zs',
      component: 'Input',
      required: true,
      componentProps: {
        disabled: props.isRead,
      },
    },
    {
      label: '联系人',
      field: 'lxr',
      component: 'Input',
      required: true,
      componentProps: {
        disabled: props.isRead,
      },
    },
    {
      label: '联系电话',
      field: 'lxdh',
      component: 'InputNumber',
      required: true,
      dynamicRules: () => {
        return [{ pattern: /^(\d{3}-\d{8}|\d{4}-\d{7}|\d{11})$/, message: '电话格式有误', required: true }];
      },
      componentProps: {
        disabled: props.isRead,
      },
    },
  ];
  /**
   * BasicForm绑定注册;
   */
  const [registerForm, { getFieldsValue, setFieldsValue, resetFields, updateSchema, 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?.id,
    async (val: any) => {
      if (val) {
        await nextTick();
        await setFieldsValue({
          ...props.data,
        });
      } else {
        await nextTick();
        await resetFields();
      }
    },
    { deep: true, immediate: true }
  );
  watch(
    () => props?.isRead,
    async (val: any) => {
      await nextTick();
      handleChange(val);
    },
    { deep: true, immediate: true }
  );

  // 根据isRead字段判断是否禁用
  function handleChange(val) {
    updateSchema({
      label: '单位名称',
      field: 'dwmc',
      component: 'Input',
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '工商营业执照号',
      field: 'gsyyzzh',
      component: 'Input',
      componentProps: {
        disabled: val,
      },
    });

    updateSchema({
      label: '住所',
      field: 'zs',
      component: 'Input',
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '联系人',
      field: 'lxr',
      component: 'Input',

      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '联系电话',
      field: 'lxdh',
      component: 'InputNumber',

      componentProps: {
        disabled: val,
      },
    });
  }
  const fieldsValue = ref<any>({});
  // 获取子组件 列表
  async function getFormValue() {
    //获取所有值
    fieldsValue.value = await getFieldsValue();
    fieldsValue.value = await validate();

    return fieldsValue.value;
  }

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

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

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