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

  const { createMessage } = useMessage();
  const props = defineProps({
    data: {
      type: Object,
    },
    isRead: {
      type: Boolean,
      default: false,
    },
  });
  const formSchemas: FormSchema[] = [
    {
      label: '污染地块id',
      field: 'wrdkid',
      component: 'Input',
      show: false,
    },

    {
      label: '监测时间',
      field: 'jcsj',
      required: true,
      component: 'DatePicker',
      componentProps: {
        disabled: props.isRead,
        //日期格式化，页面上显示的值
        format: 'YYYY-MM-DD',
        //返回值格式化（绑定值的格式）
        valueFormat: 'YYYY-MM-DD',
        //是否显示今天按钮
        showToday: true,
      },
    },
    {
      label: '土壤环境监测结论',
      field: 'trhjjcjl',
      required: true,
      component: 'Select',
      componentProps: {
        disabled: props.isRead,
        options: [
          { label: '不达标', value: '不达标' },
          { label: '达标', value: '达标' },
          { label: '未检测', value: '未检测' },
        ],
      },
    },
    {
      label: '地下水环境监测结论',
      field: 'dxshjjcjl',
      required: true,
      component: 'Select',
      componentProps: {
        disabled: props.isRead,
        options: [
          { label: '不达标', value: '不达标' },
          { label: '达标', value: '达标' },
          { label: '未检测', value: '未检测' },
        ],
      },
    },
    {
      label: '地表水环境监测结论',
      field: 'dbshjjcjl',
      required: true,
      component: 'Select',
      componentProps: {
        disabled: props.isRead,
        options: [
          { label: '不达标', value: '不达标' },
          { label: '达标', value: '达标' },
          { label: '未检测', value: '未检测' },
        ],
      },
    },
    {
      label: '空气环境监测结论',
      field: 'kqhjjcjl',
      required: true,
      component: 'Select',
      componentProps: {
        disabled: props.isRead,
        options: [
          { label: '不达标', value: '不达标' },
          { label: '达标', value: '达标' },
          { label: '未检测', value: '未检测' },
        ],
      },
    },
    {
      label: '监测方案',
      field: 'jcfa',
      required: true,
      component: 'JUpload',
      componentProps: () => {
        return {
          disabled: props.isRead,
          showUploadList: false,
          fileName: '监测方案',
          accept: '.pdf,.zip',
          beforeUpload: (file) => {
            let isshow = false;
            const isFile = file.name.split('.')[file.name.split('.').length - 1];
            console.log(file, 'file');
            if (isFile == 'pdf' || isFile == 'zip' || isFile == 'PDF') {
              isshow = true;
            } else {
              createMessage.error('只能上传.pdf/.zip格式的文件');
              isshow = false;
            }
            return isshow;
          },
        };
      },
    },

    {
      label: '监测报告',
      field: 'jcbg',
      required: true,
      component: 'JUpload',
      componentProps: () => {
        return {
          disabled: props.isRead,
          showUploadList: false,
          fileName: '监测报告',
          accept: '.pdf,.zip',
        };
      },
    },
  ];

  const [registerForm, { getFieldsValue, setFieldsValue, resetFields, 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: '180px' } },
    //row行的样式
    baseRowStyle: { width: '100%' },
    //表单布局属性，支持（vertical,horizontal），默认为horizontal
    layout: 'horizontal',
  });
  watch(
    () => props?.data,
    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) => {
      if (val == 'view') {
        await nextTick();
        handleChange(val);
      }
    },
    { deep: true, immediate: true }
  );
  function handleChange(val) {
    console.log(val, 'val');
    updateSchema({
      label: '监测时间',
      field: 'jcsj',
      required: false,
      component: 'Input',
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '土壤环境监测结论',
      field: 'trhjjcjl',
      component: 'Input',
      required: false,
      componentProps: {
        disabled: val,
      },
    });

    updateSchema({
      label: '地下水环境监测结论',
      field: 'dxshjjcjl',
      component: 'Input',
      required: false,
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '地表水环境监测结论',
      field: 'dbshjjcjl',
      component: 'Input',
      required: false,
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '空气环境监测结论',
      field: 'kqhjjcjl',
      required: false,
      component: 'Input',
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '监测方案',
      field: 'jcfa',
      required: false,
      component: 'JUpload',
      componentProps: {
        disabled: val,
        showUploadList: false,
      },
    });
    updateSchema({
      label: '监测报告',
      field: 'jcbg',
      required: false,
      component: 'JUpload',
      componentProps: {
        disabled: val,
        showUploadList: false,
      },
    });
  }

  async function getFormValue() {
    console.log('子组件执行');
    //获取所有值
    let fieldsValue = await getFieldsValue();
    fieldsValue = await validate();

    return fieldsValue;
  }
  defineExpose({
    getFormValue,
  });
</script>

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

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