import {
  UserOutlined,
  LockOutlined,
  MobileOutlined,
  SafetyCertificateOutlined,
} from "@ant-design/icons";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Form, Input, message } from "antd";
import React, { useState } from "react";
import { NS_REGISTER } from "~/enumerate/namespace";

import loginbg from "~/enumerate/img/loginbg.jpg";
import logo from "~/enumerate/img/logo.png";
import leftIcon from "~/enumerate/img/left-img.jpg";
import "./index.less";

function Register(props) {
  const { sendMessageAction, registerAction, register } = props;
  const [form] = Form.useForm();
  const [countdown, setCountdown] = useState(0);
  const [sending, setSending] = useState(false);
  const {registerLoading}= register;

  const handleSendCode = async () => {
    const phone = form.getFieldValue("phone");
    if (!phone) {
      message.error("请输入手机号");
      return;
    }
    const phoneReg = /^1[3-9]\d{9}$/;
    if (!phoneReg.test(phone)) {
      message.error("请输入正确的手机号");
      return;
    }

    setSending(true);
    try {
      const res = await sendMessageAction({ mobile: phone });
      if (res.success) {
        message.success("验证码已发送");
        setCountdown(60);
        const timer = setInterval(() => {
          setCountdown((prev) => {
            if (prev <= 1) {
              clearInterval(timer);
              return 0;
            }
            return prev - 1;
          });
        }, 1000);
      }
    } finally {
      setSending(false);
    }
  };

  const handleSubmit = async (values) => {
    const payload = {
      account: values.account,
      phone: values.phone,
      password: values.password,
      type: 1,
    };
    const res = await registerAction(payload);
    if (res.success) {
      message.success("操作成功");
      form.resetFields();
      props.history.push(`registerMore?account=${values.account}&registerUserId=${res.data.id}`);
    }
  };

  return (
    <div className="register-page" style={{ backgroundImage: `url(${loginbg})` }}>
      <div className="register-top-bar">
        <div className="register-top-logo">
          <img src={logo} alt="logo" />
          <span className="register-top-title">
            重庆市安全评价在线监管一件事
          </span>
          <span className="register-top-subtitle">安全评价机构服务系统</span>
        </div>
      </div>
      <div className="register-card">
        <div className="register-left" >
          <img src={leftIcon} className="register-left-icon" />
        </div>

        <div className="register-right">
          <div className="register-header">
            <div className="register-title">欢迎注册安全评价机构服务系统</div>
            <div className="register-subtitle">创造更值得信赖的世界</div>
          </div>

          <Form
            form={form}
            className="register-form"
            onFinish={handleSubmit}
            autoComplete="off"
          >
            <Form.Item
              name="account"
              rules={[{ required: true, message: "请输入账号" }]}
            >
              <Input
                prefix={<UserOutlined style={{ color: "#bfbfbf" }} />}
                placeholder="请输入账号"
                size="large"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: "请输入密码" }]}
            >
              <Input.Password
                prefix={<LockOutlined style={{ color: "#bfbfbf" }} />}
                placeholder="请输入密码"
                size="large"
              />
            </Form.Item>

            <Form.Item
              name="phone"
              rules={[
                { required: true, message: "请输入手机号" },
                { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号" },
              ]}
            >
              <Input
                prefix={<MobileOutlined style={{ color: "#bfbfbf" }} />}
                placeholder="请输入手机号"
                size="large"
                maxLength={11}
              />
            </Form.Item>

            <Form.Item
              name="verifyCode"
              rules={[{ required: true, message: "请输入验证码" }]}
            >
              <div className="register-verify-row">
                <Form.Item name="verifyCode" noStyle>
                  <Input
                    className="register-verify-input"
                    prefix={
                      <SafetyCertificateOutlined style={{ color: "#bfbfbf" }} />
                    }
                    placeholder="验证码"
                    size="large"
                  />
                </Form.Item>
                <Button
                  className="register-verify-btn"
                  type="primary"
                  disabled={countdown > 0 || sending}
                  loading={sending}
                  onClick={handleSendCode}
                >
                  {countdown > 0 ? `${countdown}s后重试` : "获取验证码"}
                </Button>
              </div>
            </Form.Item>

            <Form.Item>
              <Button
                className="register-submit-btn"
                type="primary"
                htmlType="submit"
                loading={registerLoading}
              >
                注册
              </Button>
              <Button
                className="register-submit-btn"
                loading={registerLoading}
                onClick={() => window.location.href = "https://gbs-gateway.qhdsafety.com/login/client/72cf4f659dc54dcfaeecd32eabf483b5"}
              >
                去登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}

export default Connect([NS_REGISTER], true)(Register);
