// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Button, Checkbox, Form, Icon, Input, TreeSelect, message, notification } from 'antd'
// 工具库
import MD5 from 'md5'
import storage from '../utils/storage'
import { guid } from '../utils/common'
import config from '../config'
// 样式
import './login.less'

const openNotificationPass = placement => {
  notification.info({
    duration: null,
    message: `密码修改提示：`,
    description:
      '您的登录密码过于简单，请尽快修改您的登录密码！',
    placement,
  });
};

const openNotificationMobile = placement => {
  notification.info({
    //duration: null,
    message: `浏览友情提示：`,
    description:
      '您当前用的是手机在访问，为更好使用体验，建议用电脑访问！',
    placement,
  });
};

class LoginPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      treeData: [],
      tokenData: {},
      formData: {
        orgId: undefined,
        username: '',
        password: '',
        verifyCode: '',
        phoneCode: ''
      },
      verify: {
        orgId: '',
        username: '',
        password: '',
        verifyCode: '',
        phoneCode: ''
      },
      // 图片验证码
      verifyCodeApi: config.serviceHost('api/UT/VerificationCode/Number'),
      verifyRandomCode: guid(),
      // 手机验证码
      hasCheckPhoneCode: storage('lacal').getItem('verifyPhoneCode').val,
      isCheckPhoneCode: null,
      // 重发验证码倒计时
      checkTime: 60,
      // 登陆错误提示
      loginError: ''
    }
    this.timer = -1
  }

  componentDidMount() {
    if (window.navigator.userAgent.indexOf("Windows") < 1) {
      window.location.replace(config.guideH5Host)
      //alert('手机');
    } 
    // if (window.navigator.userAgent.indexOf("Windows") < 1)  openNotificationMobile('bottomRight');
    this.removeRequestKey()
    this.getOrgList()
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  removeRequestKey = () => {
    const { localStorage } = window
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i)
      key.indexOf('_requestKey') > -1 && localStorage.removeItem(key)
    }
  }

  recurseData = (data) => {
    data.forEach(item => {
      const { Node = item, Children } = item
      item.title = `${Node.NAME}(${Node.CODE})`
      item.key = Node.ID
      item.value = Node.ID
      Children && Children.length && this.recurseData(Children)
    })
  }

  getOrgList = () => {
    this.props.dispatch({
      type: 'login/getOrg',
      payload: {
        Sort: 'CODE',
        Order: 0,
        Parameter10: window.location.host,
        Parameter11: '0'
      }
    }).then(res => {
      if (res && res.Data) {
        this.recurseData(res.Data)
        this.setState({
          treeData: res.Data,
          formData: {
            ...this.state.formData,
            orgId: storage('lacal').getItem('webOrgId').val ? storage('lacal').getItem('webOrgId').val : res.Data[0].Node.ORG_ID,
          }
        })
      }
    })
  }

  handleFormChange = (type, val) => {
    this.setState({
      formData: {
        ...this.state.formData,
        [type]: val
      },
      verify: {
        ...this.state.verify,
        [type]: val ? '' : 'error'
      }
    })
  }

  startCountDown = () => {
    this.timer = setInterval(() => {
      const { checkTime } = this.state
      if (checkTime > 0) {
        this.setState({ checkTime: checkTime - 1 })
      } else {
        clearInterval(this.timer)
      }
    }, 1000)
  }

  getPhoneCode = () => {
    const { tokenData, formData } = this.state
    this.props.dispatch({
      type: 'app/getDataByGet',
      url: 'PF/VerifyPhone/PhoneVerifyCode',
      payload: {
        uid: tokenData.userid,
        orgId: formData.orgId
      },
      onlyData: false
    }).then(res => {
      if (res) {
        if (!res.IsSuccessful) {
          message.error(res.ErrorMessage)
          this.setState({ isCheckPhoneCode: null })
          return
        }
        this.setState({ checkTime: tokenData.second }, this.startCountDown)
      }
    })
  }

  toLogin = (requestCode = false) => {
    const { tokenData, formData } = this.state
    const { orgId, username, password, phoneCode } = formData
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BI/BIController/getVersion',
      onComplete: (ret) => {
        if (ret > config.version) {
          window.localStorage.clear()
          message.success('清除成功，即将重新加载页面', 2, () => {
            setTimeout(() => window.location.reload(true), 500)
          })
        } else {
          this.props.dispatch({
            type: 'login/toLogin',
            payload: {
              Parameter1: username,
              Parameter2: MD5(password),
              Parameter4: orgId,
              Parameter5: storage('lacal').getItem('formConfigVersion').val,
              Parameter6: requestCode,
              Parameter7: phoneCode
            },
            loginPayload: {
              username: username,
              password: MD5(password),
              accessToken: tokenData.access_token,
              refreshToken: tokenData.refreshToken,
              expiresIn: tokenData.expiresIn,
              userid: tokenData.userid
            }
          }).then(validRes => {
            if (validRes) {
              storage('lacal').setItem('verifyPhoneCode', tokenData.userid)
              this.props.dispatch({
                type: 'app/getAllEnum',
              })
              //if (window.navigator.userAgent.indexOf("Windows") < 1)  openNotificationMobile('topRight');
              //暂时先取消
              //if(password == '123456' || password == '1234' || password == '123' || password == '111111' || password == '12345678' || password == '888888') openNotificationPass('topRight');
              if (window.navigator.userAgent.indexOf("Windows") < 1) {
                // window.location.replace('http://localhost:8000/#/HomeMobileTask')
                window.location.replace(config.guideH5Host)
                // this.props.history.push({ pathname: '/HomeMobileNew' })
              } else {
                this.props.history.push({ pathname: '/home' })
              }
            }
          })
        }
      }
    })
  }

  preLogin = () => {
    const { formData, verifyRandomCode } = this.state
    const { orgId, username, password, verifyCode } = formData
    this.props.dispatch({
      type: 'login/getToken',
      payload: {
        orgId,
        username,
        password: MD5(password),
        grant_type: 0,
        random: verifyRandomCode,
        verificationCode: verifyCode
      }
    }).then(res => {
      // this.setState({
      //   formData: {
      //     ...this.state.formData,
      //     orgId:  res.orgId,
      //   }
      // })
      if (res) {
        if (res.error) {
          this.setState({ loginError: res.error_description })
          return
        }
        const { isCheckPhoneCode, userid } = res
        const { hasCheckPhoneCode } = this.state
        if (isCheckPhoneCode && (!hasCheckPhoneCode || hasCheckPhoneCode.indexOf(userid) === -1)) {
          // 需要进行验证码验证
          this.setState({
            isCheckPhoneCode: true,
            tokenData: res
          }, this.getPhoneCode)
        } else {
          // 不需要进行验证码验证，则直接登录
          this.setState({ tokenData: res }, this.toLogin)
        }
      }
    })
  }

  formFieldInvalid = () => {
    const { formData, isCheckPhoneCode } = this.state
    const { orgId, username, password, verifyCode, phoneCode } = formData
    const phoneCodeVerify = !isCheckPhoneCode || (isCheckPhoneCode === true && phoneCode)
    this.setState({
      verify: {
        //orgId: orgId ? '' : 'error',
        username: username ? '' : 'error',
        password: password ? '' : 'error',
        verifyCode: verifyCode ? '' : 'error',
        phoneCode: phoneCodeVerify ? '' : 'error'
      }
    })
    //return !orgId || !username || !password || !verifyCode || !phoneCodeVerify
    return !username || !password || !verifyCode || !phoneCodeVerify

  }

  handleLogin = () => {
    if (this.formFieldInvalid()) return

    const { isCheckPhoneCode } = this.state
    !isCheckPhoneCode ? this.preLogin() : this.toLogin(true)
  }

  render() {
    const { loading } = this.props
    const { tokenData, formData, treeData, verify, verifyCodeApi, verifyRandomCode, isCheckPhoneCode, checkTime, loginError } = this.state
    const { orgId, username, password, verifyCode, phoneCode } = verify

    return (
      <div className='login-page'>
        <div className='login-page__main'>
          <div className='login-page__slogan'>
            {/* <p>人人讲安全</p>
            <p>安全为人人</p>
            <img src={require('../assets/login/product.png')} alt='product' /> */}
          </div>
          <div className='login-page__login'>
            <p className='login-page__login-cn'>用户登录</p>
            {/* <span className='login-page__login-en'>LOGIN</span> */}
            <div className='login-page__login-box'>
              <div className={`login-page__login-formWrap ${isCheckPhoneCode === true ? 'showPhoneCode' : ''}`}>
                <Form className='login-page__login-form'>
                  <Form.Item validateStatus={orgId} style={{display:"none"}}>
                    <TreeSelect
                      treeDefaultExpandAll
                      treeData={treeData}
                      value={formData.orgId}
                      onChange={val => this.handleFormChange('orgId', val)}
                      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                      placeholder='请选择组织'
                    />
                  </Form.Item>
                  <Form.Item validateStatus={username} style={{marginTop:"40px"}}>
                    <Input
                      onChange={evt => this.handleFormChange('username', evt.target.value)}
                      onPressEnter={this.handleLogin}
                      prefix={<Icon type='user' />}
                      placeholder="请输入用户名"
                      className='login-page__login-input'
                    />
                  </Form.Item>
                  <Form.Item validateStatus={password}>
                    <Input
                      type='password'
                      onChange={evt => this.handleFormChange('password', evt.target.value)}
                      onPressEnter={this.handleLogin}
                      prefix={<Icon type='lock' />}
                      placeholder='请输入密码'
                      className='login-page__login-input'
                    />
                  </Form.Item>
                  <div className='login-page__login-pwd'>
                    <Checkbox defaultChecked>记住密码</Checkbox>
                    {/* <a>忘记密码？</a> */}
                  </div>
                  <Form.Item validateStatus={verifyCode}>
                    <Input
                      onChange={evt => this.handleFormChange('verifyCode', evt.target.value)}
                      onPressEnter={this.handleLogin}
                      prefix={<Icon type='safety' />}
                      suffix={
                        <img
                          key={verifyRandomCode}
                          src={`${verifyCodeApi}?random=${verifyRandomCode}`}
                          alt='验证码'
                          onClick={() => this.setState({ verifyRandomCode: guid() })}
                          className='login-page__login-verifyCode'
                        />
                      }
                      placeholder='验证码'
                      className='login-page__login-input'
                    />
                  </Form.Item>
                </Form>
                <Form className='login-page__login-form'>
                  <Form.Item>
                    <Input
                      disabled
                      value={`验证码已发送：${tokenData.phoneNumber}`}
                      prefix={<Icon type='phone' />}
                      className='login-page__login-input'
                    />
                  </Form.Item>
                  <Form.Item validateStatus={phoneCode}>
                    <Input
                      onChange={evt => this.handleFormChange('phoneCode', evt.target.value)}
                      onPressEnter={this.handleLogin}
                      prefix={<Icon type='message' />}
                      suffix={
                        <Button
                          disabled={checkTime > 0}
                          size='small'
                          type='primary'
                          onClick={this.getPhoneCode}
                          className='login-page__login-verifyCode'
                        >{`${checkTime > 0 ? checkTime + 's后' : ''}再次发送`}</Button>
                      }
                      placeholder='请输入短信验证码'
                      className='login-page__login-input'
                    />
                  </Form.Item>
                </Form>
              </div>
            </div>
            <Button
              type='primary'
              className='login-page__login-btn'
              disabled={loading.effects['login/getOrg']}
              loading={!!loading.effects['login/toLogin']}
              onClick={this.handleLogin}
            >登录</Button>
            {loginError ? <div className='login-page__login-error'>{loginError}</div> : null}
          </div>
        </div>
        <div className='login-page__footer'>
          {/* <img src={require('../assets/login/footer_logo.png')} alt='OPT' /> */}
          <div className='login-page__footer-copyright'>
            <p>Copyright ©2022-2023 厦门鸣鹤管理咨询股份有限公司</p>
          </div>
          <div className='login-page__footer-qrcode'>
            {/* <img src={require('../assets/login/footer_qrcode.png')} alt='二维码' />
            <p>访问移动端</p> */}
          </div>
        </div>
      </div>
    )
  }
}

export default connect(({ login, loading }) => ({ login, loading }))(LoginPage)
