import {
  getOrderErpOrderZoNingSelectUserAll,
  postOrderErpOrderZoNingSaveOrUpdate,
} from '@/services';
import { PlusOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import { provinceEnum, zoningItem } from './constant';
const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default ({ toReload, option, needEditBody }) => {
  const [form] = Form.useForm<zoningItem>();

  return (
    <ModalForm<{
      zoning: string;
      province: string[];
      user: number[];
    }>
      title={option}
      trigger={
        <Button type="primary" key={option.id}>
          {option !== '编辑' && <PlusOutlined />}
          {option}
        </Button>
      }
      form={form}
      autoFocusFirstInput
      initialValues={{
        zoning: needEditBody.zoning ? needEditBody.zoning : '',
        province: needEditBody.orderProvinceShowList
          ? needEditBody.orderProvinceShowList.split('、')
          : [],
        user: needEditBody.orderUserNumberShowList
          ? needEditBody.orderUserNumberShowList
          : [],
      }}
      modalProps={{
        destroyOnClose: true,
      }}
      submitTimeout={500}
      onFinish={async (values) => {
        console.log(values);
        const orderProvinceList = values.province.map((item) => {
          return { province: item };
        });
        const orderUserList = values.user.map((item) => {
          return { uId: item };
        });
        const fetchData: zoningItem = {
          zoning: values.zoning,
          orderProvinceVoList: orderProvinceList,
          orderUserVoList: orderUserList,
        };
        let res = await postOrderErpOrderZoNingSaveOrUpdate({
          data: fetchData,
        });
        if (res) {
          console.log(res);
          await waitTime(500);
          console.log(values);
          message.success('提交成功');
          toReload();
          return true;
        }
        return false;
      }}
    >
      <ProForm.Group>
        <ProFormText
          width="lg"
          name="zoning"
          label="区域名称"
          placeholder="请输入"
          rules={[{ required: true, message: '此项为必填项' }]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect
          name="user"
          width="lg"
          label="负责销售"
          request={async () => {
            const userList = await getOrderErpOrderZoNingSelectUserAll();
            if (userList) {
              let userSelList = [];
              userList.data.forEach((item: { uId: any; userName: any }) =>
                userSelList.push({
                  value: item.uId,
                  label: item.userName,
                }),
              );
              userSelList.unshift({
                value: 0,
                label: '全选',
              });
              return userSelList;
            }
            return [];
          }}
          fieldProps={{
            mode: 'multiple',
          }}
          placeholder="请选择"
          rules={[
            {
              required: true,
              message: '请选择!',
              type: 'array',
            },
          ]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect
          name="province"
          width="lg"
          label="管辖地区"
          valueEnum={provinceEnum}
          fieldProps={{
            mode: 'multiple',
          }}
          placeholder="请选择"
          rules={[
            {
              required: true,
              message: '请选择!',
              type: 'array',
            },
          ]}
        />
      </ProForm.Group>
    </ModalForm>
  );
};