/* eslint-disable */
/*
 * @Author: shangshunli;
 * @Date: 2021-08-02 09:39:46;
 * @LastEditTime: 2021-09-06 09:35:36
 * @LastEditors: shangshunli
 * @Description:信息化登录页;
 */
import React from 'react';
import styles from './style/infoLogin.less'
import { connect } from 'react-redux';
// import { withRouter } from 'react-router-dom';
import { withRouter } from '@wisdom-utils/runtime';
import Logo from '@/assets/oa/login/信息化logo.png'
import Code from '@/assets/oa/login/扫码.png'
import Web from '@/assets/oa/login/电脑.png'
import TitleImg from '@/assets/oa/login/信息化panda图标.png'
import MyHead from '@/assets/oa/login/我的.png'
import PassWord from '@/assets/oa/login/密码.png'
import Close from '@/assets/oa/login/close.png'
import Open from '@/assets/oa/login/open.png'
import Selected from '@/assets/oa/login/selected.jpg'
import UnSelected from '@/assets/oa/login/unselected.jpg'
import LoginAction from '../login';
import { actionCreators } from '@/containers/App/store';
import Cookies from 'js-cookie';
import { initMicroApps } from '../../../../micro';
const Logger = logger('login');
// 、登录页
class InfoLogin extends React.Component{
  state={
    loginStyle:false, //true  账号密码登录 false  扫码登录
    isOpen:false,   //查看密码
    isRember:false, //记住密码
    ddOrWeixin:''
  }
  componentDidMount(){
    let action=new LoginAction(this.props,false,true)
    this.loginEvent(action)
  }
  // 切换登录方式
  changeloginStyle=()=>{
    const {ddOrWeixin}=this.state
    this.setState({
      loginStyle:!this.state.loginStyle,
      ddOrWeixin:ddOrWeixin ? '':'dingding'
    },()=>{
      Cookies.set('loginMode', `${this.state.ddOrWeixin ? 'dingding' : 'pdw'}`, {
        path: '/',
      });
       if (this.state.ddOrWeixin==='dingding'){
        let action=new LoginAction(this.props,false,true)
        action.loginByDD()
      }
    })
  }
// 切换二维码
changeQrCode=(item)=>{
  this.setState({
    ddOrWeixin:item
  },()=>{
    Cookies.set('loginMode', item, {
      path: '/',
    });
    let action=new LoginAction(this.props,false,true)
    if(item==='qywx'){
      action.loginByWx()
    }else if (item==='dingding'){
      action.loginByDD()
    }
  })
}

  // 查看密码
  seePassWord=(e)=>{
    this.setState({
      isOpen:!this.state.isOpen
    })
  }
  // 记住密码
  remberWord=()=>{
    this.setState({
      isRember:!this.state.isRember
    })
  }
  // 输入框变化
  handleForm=(e)=>{
    const target=e.target
    // 判断事件类型，如果是checkbox返回checked值，不是返回文本框的value值
        const value=target.type=='checkbox'?target.checked:target.value;
    // 获取文本框的name值
        const name=target.name
        this.setState({
          [name]:value
        })
  }
  // 登录
  loginToWeb5=()=>{
    const {loginName,passWord,isRember}=this.state
    let action=new LoginAction(this.props,false,true)
    action.loginHandler(loginName,passWord,null,isRember,false)
    this.loginEvent(action)
   
  }
  // 登录成功事件
  loginEvent(action){
    action.globalConfig = this.props.global;
    this.props.updateCurrentIndex && this.props.updateCurrentIndex(-1);
    action && action.events.on('loginSuccess', event => {
      this.props.updateCurrentIndex && this.props.updateCurrentIndex(0);
      this.props.history.push(`/?client=${this.props.global.client}`);
      // window.share.event.emit('triggerMicro', this.props.global);
      initMicroApps();
    });
    action && action.events.on('loginError', event => {
     
    });
    action && action.events.on('loginVisible', status => {
      
    });
  }
  render(){
    const {loginStyle,isOpen,isRember,loginName,passWord,ddOrWeixin}=this.state
    return(
       <div className={styles.InfoBg}>
         <div className={styles.loginBg}>
           {/* 标题 */}
          <span className={styles.title}>
            <img  src={Logo} alt=""/>
            {this.props.global.title}
          </span>
      {/* 登录切换 */}
          <img role="ddCode" className={styles.ddCode} title={loginStyle?'账号密码登录':'扫码登录'} src={loginStyle?Web:Code} alt="gis" onClick={()=>this.changeloginStyle()}/>
          <img role="logo" src={TitleImg} alt="gis" className={styles.titleImg} />
          {/* 登录主题 */}
          <div className={styles.login_container} id='login_container' style={{display:ddOrWeixin=='dingding'? '' :'none'}}></div>
          <div className={styles.wxlogin_container} id='wxlogin_container' style={{display:ddOrWeixin=='qywx'? '' :'none'}}></div>
          <div  className={styles.changeCode} style={{display:ddOrWeixin? '' :'none'}}>
              <div style={{margin:'10px',cursor:'pointer',color:ddOrWeixin=='dingding'?'#25bc9e':''}} onClick={()=>this.changeQrCode('dingding')}  className={styles.ddLoginBtn}>钉钉登录</div>
              <div  style={{margin:'10px',cursor:'pointer',color:ddOrWeixin=='qywx'?'#25bc9e':''}} onClick={()=>this.changeQrCode('qywx')}  className={styles.wxLoginBtn}>企业微信登录</div>
          </div>
          <form className={styles.loginForm} style={{display:loginStyle? 'none' :''}}>
            <div className={styles.formgroup}>
                <img src={MyHead} alt="" />
                <input type="text" className={styles.inputLg} id='loginName' name='loginName' value={loginName} onChange={this.handleForm}  placeholder="请输入你的用户名"/>
            </div>
            <div className={styles.formgroup}>
                <img src={PassWord} alt="" />
                <input type={isOpen ? 'text':"password"} className={styles.inputLg} id='passWord' name='passWord' value={passWord} onChange={this.handleForm}  placeholder="请输入你的密码"  />
                <img  className={styles.eyes} src={isOpen ? Open :Close} alt="" onMouseDown={(e)=>this.seePassWord(e)} onMouseUp={(e)=>this.seePassWord(e)}/>
            </div>
            <div className={styles.formgroup} style={{position: 'relative',marginTop:'20px'}}>
              <img src={isRember ? Selected:UnSelected} alt="" onClick={()=>this.remberWord()} style={{width:'25px',height:'24px'}}/>
              <span style={{color: '#9FA8B3',marginLeft: '35px',fontSize: '14px'}}>下次自动登录</span>
            </div>
            <div className={styles.submitBtn} onClick={this.loginToWeb5}>登录</div>
          </form>
         </div>
       </div>

    )
  }
}
const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
  loginMode: state.getIn(['global', 'loginMode']),
});

const mapDispatchToProps = dispatch => ({
  updateConfig(config) {
    dispatch(actionCreators.getConfig(config));
  },
  createContext(data) {
    dispatch(actionCreators.createContext(data));
  },
  updateLoginMode(mode) {
    dispatch(actionCreators.changeLoginMode(mode));
  },
  updateCurrentIndex(index) {
    dispatch(actionCreators.updateCurrentIndex(index));
  },
});
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(withRouter(InfoLogin));
 
