import {CodepenOutlined, LockOutlined, MobileOutlined,} from '@ant-design/icons';
import {ProForm, ProFormCaptcha, ProFormText,} from '@ant-design/pro-components';
import {message} from 'antd';
import React from 'react';
import {register, sendCaptcha} from "@/services/login";
import styles from './index.less';
import Footer from "@/components/Footer";
import {history} from "@@/core/history";


const Register: React.FC = () => {
  const [form] = ProForm.useForm();

  const handleSubmit = async (values: API.RegisterParams) => {
    register({...values}).then(data => {
      if (data.code === 200) {
        message.success("注册成功！");
        history.push("/user/login")
        return;
      } else {
        message.error(data.message);
      }
    });
  };

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.top}>
          <div className={styles.header}>
            <span className={styles.title}>高潜咨询</span>
          </div>
          <div className={styles.desc}>
            中国企业人效的未来
          </div>
          <ProForm
            form={form}
            initialValues={{}}
            submitter={{
              render: (_, dom) => dom.pop(),
              submitButtonProps: {
                size: 'large',
                style: {
                  width: '100%',
                },
              },
              searchConfig: {
                submitText: '注册',
              },
            }}
            onFinish={async (values) => {
              await handleSubmit(values);
            }}
          >
            <>
              <ProFormText
                fieldProps={{
                  size: 'large',
                  prefix: <MobileOutlined className={styles.prefixIcon}/>,
                }}
                required
                name="phone"
                placeholder="手机号"
                rules={[
                  {
                    required: true,
                    message: "请输入手机号！",
                  },
                  {
                    pattern: /^1\d{10}$/,
                    message: "手机号格式错误！",
                  },
                ]}
              />
              <ProFormText.Password
                name="password"
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={styles.prefixIcon}/>,
                }}
                required
                placeholder={"密码"}
                rules={[
                  {
                    required: true,
                    message: "请输入密码"
                  },
                ]}
              />
              <ProFormText
                fieldProps={{
                  size: 'large',
                  prefix: <CodepenOutlined className={styles.prefixIcon}/>,
                }}
                required
                name="inviteCode"
                placeholder="邀请码"
                rules={[
                  {
                    required: true,
                    message: "请输入邀请码！",
                  },
                  {
                    max: 6,
                  },
                  {
                    min: 4,
                  },
                ]}
              />
              <ProFormCaptcha
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={styles.prefixIcon}/>,
                }}
                captchaProps={{
                  size: 'large',
                }}
                placeholder="请输入验证码"
                captchaTextRender={(timing, count) => {
                  if (timing) {
                    return `${count} 获取验证码`;
                  }
                  return "获取验证码";
                }}
                name="captcha"
                rules={[
                  {
                    required: true,
                    message: "请输入验证码！",
                  },
                ]}
                onGetCaptcha={async () => {
                  const phone = form.getFieldValue('phone')
                  if (!phone) {
                    message.error('请先输入手机号');
                    throw new Error("请先输入手机号");
                  }
                  const result = await sendCaptcha({
                    phone,
                  });
                  console.log(result)
                  if (result === false) {
                    return;
                  }
                  message.success('获取验证码成功');
                }}
              />
            </>

          </ProForm>
        </div>
      </div>
      <Footer/>
    </div>
  );
};

export default Register;
