import React, { useEffect, useState } from 'react';
import { Form, Button, Input, Row, Col, Modal, Spin, message } from 'antd';
import { UserOutlined, LockOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
import './style.less';
import { changePass } from './service';
import logo from '@/images/login/logoPic.png';
import { refreshTokenApi, ZjfakeAccountLogin } from '@/services/login';
import { history } from 'umi';
import cookie from 'react-cookies';
import moment from 'moment';

const layout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 13 },
};

const Index: React.FC<{}> = () => {
  const [form] = Form.useForm();
  const [imgUrl, setImgUrl] = useState<any>('');
  const [tmpToken, setTmpToken] = useState<any>('');
  const remainingTime = 3 //刷新token的剩余时间，单位小时
  const [changeForm] = Form.useForm();
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
  const [spinning, setSping] = useState<boolean>(false);//加载遮罩

  const genRandomString = (len: number) => {
    const text = 'abcdefghijklmnopqrstuvwxyz0123456789';
    const rdmIndex = (text: string | any[]) => (Math.random() * text.length) | 0;
    let rdmString = '';
    for (; rdmString.length < len; rdmString += text.charAt(rdmIndex(text)));
    return rdmString;
  };
  const changeCaptcha = () => {
    let tmpToken = genRandomString(16);
    let url = '/api/auth/captcha?token=' + tmpToken;
    setTmpToken(tmpToken);
    setImgUrl(url);
  };

  //登录刷新Token方法
  const refreshToken = async (data: any) => {
    const params = {
      grant_type: "refresh_token",
      refresh_token: data?.refreshToken?.value,
      client_id: REACT_APP_CLIENT_KEY,
      client_secret: REACT_APP_CLIENT_SECRET,
    }
    const header = {
      clientId: REACT_APP_CLIENT_KEY,
    }
    await refreshTokenApi(params, header).then(res => {
      if (res?.success == true) {
        sessionStorage.setItem('Authorization', res?.data?.value);
        sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
        sessionStorage.setItem('scope', res?.data?.scope);
        history.push('/redirect');
      }
    })
  }

  const handleSubmit = async (values: any) => {
    await ZjfakeAccountLogin({ ...values, tmpToken }).then((res) => {
      if (res?.success) {
        if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
          refreshToken(res?.data)
        } else {
          sessionStorage.setItem('Authorization', res?.data?.value);
          sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
          sessionStorage.setItem('scope', res?.data?.scope);
          history.push('/redirect');
        }
      }
      changeCaptcha();
    });
  };

  const handleOk = () => { // 确定修改密码
    if (changeForm.getFieldValue("newPassword") !== changeForm.getFieldValue("newPassword1")) {
      message.warn('两次密码输入不一致，请重新输入')
    } else {
      changeForm.validateFields().then(res => {
        setSping(true);
        const date = {
          identityCard: changeForm.getFieldValue("identityCard"),
          oldPassword: changeForm.getFieldValue("oldPassword"),
          newPassword: changeForm.getFieldValue("newPassword"),
        };
        changePass({ ...date }).then(res => {
          if (res.success) {
            setSping(false);
            setIsModalVisible(false)
            message.success('修改密码成功');
            changeForm.resetFields()
          } else {
            setSping(false);
          }
        }).finally(() => {
          setSping(false);
        });;
      })
    }
  }

  useEffect(() => {
    cookie.remove('mall3_token');
    sessionStorage.clear();
    changeCaptcha();
  }, []);

  return (
    <Spin spinning={spinning}>
      <div className="login-box">
        <div className="top">
          <img src={logo} />
          <h3>中国联通智慧供应链平台 | 招标采购中心</h3>
          <Button className="change" danger style={{ borderColor: '#b30000', color: '#b30000' }} onClick={() => (setIsModalVisible(true), changeForm.resetFields())}>修改密码</Button>
        </div>
        <div className="main">
          <div className="text">
            <h3>登 录</h3>
            <Form
              name="basic"
              className="form-box"
              initialValues={{ remember: true }}
              form={form}
              onFinish={handleSubmit}
            // onFinishFailed={onFinishFailed}
            >
              <Form.Item
                label=""
                name="userName"
                rules={[{ required: true, message: '请输入用户名!' }]}
              >
                <Input
                  prefix={
                    <UserOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
                  }
                  placeholder="请输入用户名"
                />
              </Form.Item>
              <Form.Item
                label=""
                name="password"
                rules={[{ required: true, message: '请输入密码!' }]}
              >
                <Input.Password
                  prefix={
                    <LockOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
                  }
                  placeholder="请输入密码"
                />
              </Form.Item>

              <Row>
                <Col span={14}>
                  <Form.Item
                    label=""
                    name="captcha"
                    rules={[{ required: true, message: '请输入验证码!' }]}
                  >
                    <Input
                      prefix={
                        <SafetyCertificateOutlined
                          style={{ fontSize: '18px' }}
                          className="site-form-item-icon"
                        />
                      }
                      placeholder="请输入验证码"
                    />
                  </Form.Item>
                </Col>
                <Col span={10}>
                  <img className="verification" onClick={() => changeCaptcha()} src={imgUrl} />
                </Col>
              </Row>

              {/* <Form.Item className="remember" name="remember" valuePropName="checked">
              <Checkbox>记住密码</Checkbox>
            </Form.Item> */}
              <Form.Item>
                <Button type="primary" className="w100" htmlType="submit">
                  登 录
              </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
        {/* <div className="footer">版权所有：中国联合网络通信有限公司</div> */}
        <Modal
          title="修改密码"
          visible={isModalVisible}
          onCancel={() => setIsModalVisible(false)}
          footer={[
            <Button onClick={() => handleOk()} loading={spinning}>确 定</Button>,
            <Button onClick={() => setIsModalVisible(false)}>取 消</Button>
          ]}
          width={600}
        >
          <Spin spinning={spinning}>
            <Form
              {...layout}
              name="basic"
              form={changeForm}
            >
              <Form.Item
                label="身份证(用户名)"
                name="identityCard"
                rules={[
                  {
                    required: true,
                    message: '请输入身份证(用户名)',
                  },
                ]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="原密码"
                name="oldPassword"
                rules={[
                  {
                    required: true,
                    message: '请输入原始密码',
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>
              <Form.Item
                label="新密码"
                name="newPassword"
                rules={[
                  {
                    required: true,
                    validator: (rule, value, callback) => {
                      const oNumber = new RegExp(/\d/);
                      const oLetter = new RegExp(/[a-zA-Z]/);
                      const oSpecial = '.~!@#$%^&*()_+=-{}|:<>?,./[]-;\\"';
                      if (!value) {
                        callback('请输入新密码');
                        return;
                      }
                      if (value.length < 6) {
                        callback('密码不能小于六位，至少含字母、数字、特殊字符其中的2种！');
                        return;
                      }
                      try {
                        [...value].forEach(val => {
                          if (
                            !(
                              oNumber.test(val) ||
                              oLetter.test(val) ||
                              oSpecial.indexOf(val) >= 0
                            )
                          ) {
                            throw new Error();
                          }
                        });
                      } catch (e) {
                        callback('密码不能小于六位，至少含字母、数字、特殊字符其中的2种！');
                      }
                      const contain: boolean[] = [];
                      [...value].forEach(val => {
                        if (oNumber.test(val)) {
                          contain[0] = true;
                        }
                        if (oLetter.test(val)) {
                          contain[1] = true;
                        }
                        if (oSpecial.indexOf(val) >= 0) {
                          contain[2] = true;
                        }
                      });
                      if (contain.filter(item => item === true).length < 2) {
                        callback('密码不能小于六位，至少含字母、数字、特殊字符其中的2种！');
                        return;
                      }
                      callback();
                    }
                  }
                ]}
              // rules={[
              //   {
              //     required: true,
              //     message: '请输入新密码',
              //   },
              // ]}
              >
                <Input.Password />
              </Form.Item>
              <Form.Item
                label="新密码确认"
                name="newPassword1"
                rules={[
                  {
                    required: true,
                    message: '请再次输入新密码',
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>
            </Form>
          </Spin>
        </Modal>
      </div>
    </Spin>
  );
};

export default Index;