<template>
  <a-button-group class="j-table-operator">
    <a-button type="primary" @click="setDisabled(0)">启用</a-button>
    <a-button type="primary" @click="setDisabled(1)">禁用</a-button>
    <a-button type="primary" @click="showUploadModal">文件弹窗</a-button>
  </a-button-group>
  <BasicForm @register="register" @submit="handleSubmit" />
  <JUploadModal v-model:value="uploadModalValue" @register="registerModel" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { FormSchema, useForm, BasicForm } from '/@/components/Form';
  import { UploadTypeEnum } from '/@/components/Form/src/jeecg/components/JUpload';
  import { JUploadModal } from '/@/components/Form/src/jeecg/components/JUpload';
  import { useModal } from '/@/components/Modal';

  const uploadModalValue = ref('');

  const schemas: FormSchema[] = [
    {
      field: 'uploadFile',
      component: 'JUpload',
      helpMessage: '无限制上传',
      label: '上传文件',
    },
    {
      field: 'uploadFileMax',
      component: 'JUpload',
      helpMessage: '最多上传3个文件',
      label: '上传文件（3）',
      componentProps: { maxCount: 3 },
    },
    {
      field: 'uploadImage',
      component: 'JUpload',
      label: '上传图片',
      helpMessage: '无限制上传',
      componentProps: {
        fileType: UploadTypeEnum.image,
      },
    },
    {
      field: 'uploadImageMax',
      component: 'JUpload',
      label: '上传图片（1）',
      helpMessage: '最多上传1张图片',
      componentProps: {
        fileType: UploadTypeEnum.image,
        maxCount: 1,
      },
    },
  ];

  const [registerModel, { openModal }] = useModal();

  const [register, { setProps, validate, setFieldsValue }] = useForm({
    labelWidth: 120,
    schemas: schemas,
    actionColOptions: {
      span: 24,
    },
    compact: true,
    showResetButton: false,
    showSubmitButton: false,
    showAdvancedButton: false,
    disabled: false,
  });

  function handleSubmit(values) {
    console.log(values);
  }

  function setDisabled(flag) {
    setProps({ disabled: !!flag });
  }

  function showUploadModal() {
    openModal(true, {
      maxCount: 9,
      fileType: UploadTypeEnum.image,
    });
  }
</script>