import React ,{ useState } from 'react';
import { Form , Input , Button } from 'antd';
import phone from './image/phone.svg';
import lock from "./image/lock.png";
import axios from 'axios';
import cookie from 'react-cookies';


const phonereg = /^([1][3456789])\d{9}$/
const emailreg = /^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
function Bind(props){
  const { form } = props;

  const { getFieldDecorator , getFieldsValue } = form;
  const [ bindFlag , setBindFlag]  = useState(true);
  const type = props.match.params.type;
  // 绑定登录
  function bindloginFunc(){
    const {username, password } = getFieldsValue();
    if(username && password){
      var url = '/bind_user.json';
      axios.post(url,{
        username,password,type
      }).then(result=>{
        if(result && result.data.status === 0){
          cookie.save("supplyphone",true);
          cookie.save("login",result.data.login);
          window.location.href = "/"+result.data.login;
        }else{
          props.showNotification(result.data.message);
        }
      })
    }
  }

  function accountConfirm(r,v,c){
    if(v){
      const {password } = getFieldsValue();
      if(!(phonereg.test(v) || emailreg.test(v))){
        setBindFlag(true);
        c(`请输入正确的手机号或邮箱地址`);
      }else if(password){
        setBindFlag(false);
      }
    }else{
      c();
      setBindFlag(true);
    }
  }
  function psdConfirm(r,v,c){
    if(v){
      const { username } = getFieldsValue();
      if(phonereg.test(username) || emailreg.test(username)){
        setBindFlag(false);
      }else{
        setBindFlag(true);
      }
    }else{
      c();
      setBindFlag(true);
    }
  }
  return(
    <div>
      <Form className="bind_form">
        <Form.Item>
          {getFieldDecorator('username',{
            rules:[
              {
                required:true,
                message:"请输入手机号或邮箱地址"
              },
              {
                validator: (rule, value, callback) => { accountConfirm(rule, value, callback) }
              }
            ],
            validateTrigger:"onInput",
          })(<Input className="account"  addonBefore={<img src={phone} alt="" width="13px" />} size="large" placeholder="请输入手机号或邮箱地址"/>)}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [
              {
                required:true,
                message:"请输入登录密码"
              },
              {
                validator: (rule, value, callback) => { psdConfirm(rule, value, callback) }
              }
            ],
            validateTrigger:"onInput",
          })(
            <Input.Password autoComplete="new-password" addonBefore={<img src={lock} alt="" width="13px" />} className="psd" size="large" placeholder="请输入登录密码" />,
          )}
        </Form.Item>
        <Button type="primary" disabled={bindFlag} size="large" style={{width:"100%",marginTop:"40px"}} onClick={bindloginFunc}>
          绑定并登录
        </Button>
      </Form>
    </div>
  )
}
export default Form.create({ name: 'Bind' })(Bind);