<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';
  import { getTown } from '/@/api/common/api';
  import { useUserStore } from '/@/store/modules/user';

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

  const userStore: any = useUserStore();

  const formSchema: FormSchema[] = [
    {
      label: '省',
      field: 'provinceCode',
      component: 'Input',
      defaultValue: '440000',
      show: false,
      componentProps: {
        disabled: true,
        options: [{ label: '广东省', value: ' 440000' }],
      },
    },

    {
      label: '市',
      field: 'cityCode',
      component: 'ApiSelect',
      required: true,
      ifShow: () => {
        return userStore?.userInfo?.userIdentity == '1' ? true : false;
      },
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      componentProps: ({ formActionType }) => {
        return {
          api: getTown,
          params: 440000, // 行政区划编码
          labelField: 'name',
          valueField: 'id',
          onChange: (val: any) => {
            const { updateSchema } = formActionType;
            // formModel.countryCode = undefined;
            if (val) {
              console.log(val, 'val');
              updateSchema({
                field: 'countryCode',
                componentProps: {
                  api: getTown,
                  params: val,
                  labelField: 'name',
                  valueField: 'id',
                },
              });
            } else {
              updateSchema({
                field: 'countryCode',
                componentProps: {
                  api: undefined,
                },
              });
            }
          },
        };
      },
    },
    // 用updateSchema更新不了
    {
      label: '区县',
      field: 'countryCode',
      ifShow: () => {
        return userStore?.userInfo?.userIdentity == '1' ? true : false;
      },
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      component: 'ApiSelect',
      componentProps: {
        labelField: 'name',
        valueField: 'id',
      },
    },
    {
      label: '区县',
      field: 'countryCode',
      ifShow: () => {
        return userStore?.userInfo?.userIdentity == '2' ? true : false;
      },
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      component: 'ApiSelect',
      componentProps: {
        api: getTown,
        params: userStore?.userInfo?.codeRegion,
        labelField: 'name',
        valueField: 'id',
      },
    },

    {
      label: '项目名称',
      field: 'xmmc',
      required: true,
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      component: 'Input',
    },
    {
      label: '国有建设用地划拨决定书或国有建设用地使用权出让合同编号',
      field: 'htbm',
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      required: true,
      component: 'Input',
    },
    {
      label: '供地日期',
      field: 'gdrq',
      required: true,
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      component: 'DatePicker',
      componentProps: {
        //日期格式化，页面上显示的值
        format: 'YYYY-MM-DD',
        //返回值格式化（绑定值的格式）
        valueFormat: 'YYYY-MM-DD',
      },
    },
    {
      label: '用地位置',
      field: 'ydwz',
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      component: 'Input',
    },
    {
      label: '地块原用途（一级类）',
      field: 'dkyytYl',
      required: true,
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      component: 'Input',
    },
    {
      label: '地块原用途（二级类）',
      field: 'dkyytEl',
      required: true,
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      component: 'Input',
    },
    {
      label: '现土地用途（一级类）',
      field: 'xtdytYl',
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      required: true,
      component: 'Input',
    },
    {
      label: '现土地用途（二级类）',
      field: 'xtdytEl',
      required: true,
      dynamicDisabled: () => {
        return !props.showFooter;
      },
      component: 'Input',
    },
  ];

  //表单配置
  const [registerForm, { resetFields, setFieldsValue, getFieldsValue, validate, updateSchema }] = useForm({
    labelWidth: 280,
    schemas: formSchema,
    showActionButtonGroup: false,
    //默认row行配置,当 layout 为 horizontal 生效
    rowProps: { gutter: 24, justify: 'start', align: 'middle' },
    //全局col列占比(每列显示多少位)，和schemas中的colProps属性一致
    baseColProps: { span: 12 },
    //使用labelCol的样式参数来控制标题宽度
    labelCol: { style: { width: '250px' } },
    //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 }
  );
  // 查看的时候 需要监听showFooter的值 不监听 他收不到
  watch(
    () => props.showFooter,
    async (val: any) => {
      if (val) {
        //重置表单
        updateSchema({});
      }
    },
    { deep: true, immediate: true }
  );
  // 获取子组件 列表
  async function getFormValue() {
    //获取所有值
    let fieldsValue = await getFieldsValue();
    fieldsValue = await validate();
    return fieldsValue;
  }

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