import { sitecontrollerAll } from '@/servers/api/site';
import { SyncOutlined } from '@ant-design/icons';
import {
  ActionType,
  DrawerForm,
  ProForm,
  ProFormSelect,
  ProFormDateRangePicker,
} from '@ant-design/pro-components';
import { Button } from 'antd';
import dayjs from 'dayjs';
import React from 'react';

// 定义SyncForm组件的props类型
interface SyncFormProps {
  tableRef: React.MutableRefObject<ActionType | undefined>;
  onFinish: (values: any) => Promise<void>;
  siteId?: string;
  dateRange?: [dayjs.Dayjs, dayjs.Dayjs];
}

/**
 * 同步订单的表单组件
 * @param {SyncFormProps} props 组件属性
 * @returns {React.ReactElement} 抽屉表单
 */
const SyncForm: React.FC<SyncFormProps> = ({ tableRef, onFinish, siteId, dateRange }) => {
  // 使用 antd 的 App 组件提供的 message API
  const [loading, setLoading] = React.useState(false);

  if (siteId) {
    return (
      <Button
        key="syncSite"
        type="primary"
        loading={loading}
        onClick={async () => {
          try {
            setLoading(true);
            await onFinish({ siteId: Number(siteId) });
          } finally {
            setLoading(false);
          }
        }}
      >
        <SyncOutlined />
        同步订单
      </Button>
    );
  }

  // 返回一个抽屉表单
  return (
    <DrawerForm<API.ordercontrollerSyncorderParams>
     initialValues={{
    dateRange: [dayjs().subtract(1, 'week'), dayjs()],
  }}

    title="同步订单"
      // 表单的触发器,一个带图标的按钮
      trigger={
        <Button key="syncSite" type="primary">
          <SyncOutlined />
          同步订单
        </Button>
      }
      // 自动聚焦第一个输入框
      autoFocusFirstInput
      // 抽屉关闭时销毁内部组件
      drawerProps={{
        destroyOnHidden: true,
      }}
      // 表单提交成功后的回调
      onFinish={onFinish}
    >
      <ProForm.Group>
        
        {/* 站点选择框 */}
        <ProFormSelect
          name="siteId"
          width="lg"
          label="站点"
          placeholder="请选择站点"
          // 异步请求站点列表数据
          request={async () => {
            const { data = [] } = await sitecontrollerAll();
            // 将返回的数据格式化为 ProFormSelect 需要的格式
            return data.map((item: any) => ({
              label: item.name || String(item.id),
              value: item.id,
            }));
          }}
        />

        <ProFormDateRangePicker
        name="dateRange"
        label="同步日期范围"
        placeholder={['开始日期', '结束日期']}
        
        transform={(value) => {
          return {
            dateRange: value,
          };
        }}
        fieldProps={{
          showTime: false,
          style: { width: '100%' },
        }}
      />
      </ProForm.Group>
    </DrawerForm>
  );
};

export default SyncForm;