import React from 'react';

import {
  Avatar,
  Form,
  Input,
  message,
  Modal,
  Popover,
  Spin,
} from 'antd';
import Cookies from 'js-cookie';
import { withRouter } from 'react-router-dom';

import { API } from '../../api/baseService';
import styles from './index.less';

const formItemLayout = {
  labelCol: {
    xs: { span: 4 },
    sm: { span: 4 },
  }
};
const getIOT = () => {
  return window.globalConfig.loginTemplate === 'Dark - IOTMultiLogin.html'
}
class AvatarDropdown extends React.Component {
  /* eslint-disable no-unused-vars */
  loginout = event => {
    createStoreage.remove('PANDA_STORE');
    Cookies.set(window.globalConfig.client, "", {
      path: "/"
    });
    Cookies.set("token", "", {
      path: "/"
    })
    Cookies.set("loginMode", "", {
      path: "/"
    })
    Cookies.set("redirect_state", "", {
      path: "/"
    })

    if(window.globalConfig.style === "ios" && window.globalConfig.loginTemplate === "IOSCloud.html") {
      window.location.href= window.location.origin + "/#login"
      return false;
    }

    this.props.history.push(
      `/user/login/?client=${window.globalConfig.client}`,
    );
    location.reload();
  };

  getRoles = () => {
    const roles = this.props.global.userInfo.roles || []
    let ret = []
    roles.forEach(item => {
      ret.push(item.name)
    })
    return ret.join(",")
  }
  state = { 
    visible: false,
    popVisible: false
  };

  showModal = (event) => {
    event.stopPropagation()
    this.setState({
      visible: true
    });
  };

  handleOk = (event, form) => {
    event.stopPropagation()
    form.validateFields().then(res => {
      const params = getIOT() ? {
        newPassword: res.newPwd,
        phone: window.globalConfig.userInfo.Phone
      }: {
        password: res.oldPwd,
        newpassword: res.newPwd,
        token: window.globalConfig.token
      }
      Http.changePassword(params).then(res => {
        if(res.success) {
          message.success("修改密码成功");
          setTimeout(() => {
            this.setState({
              visible: false
            })
          }, 300);
        } else {
          message.error("原密码输入错误")
        }
      }).catch(error => {
        message.error("修改密码失败")
      })
    }).catch(error => {
      console.log(error)
    })
  };

  handleCancel = (event, form) => {
    event.stopPropagation()
    form.resetFields();
    this.setState({
      visible: false,
    });
  };
  
  transformAvatarImage() {
    const { userInfo } = this.props.global;
    let defaultImage = window.location.origin + '/civweb4/assets/images/icon/熊猫新2.png';
    let image = defaultImage
    if(userInfo && userInfo.UserImge && userInfo.UserImge.indexOf("个人信息") > -1) {
      image = `${API.FILE_DOWNLOAD}/${userInfo.UserImge}`;
    } else if(userInfo.UserImge && userInfo.UserImge !== "" && userInfo.UserImge !== "default_user.png") {
      image = userInfo.UserImge;
    } else if (userInfo.WxImage && userInfo.WxImage != "") {
      image = userInfo.WxImage;
    }
    return image
  }

  render() {
    const props = this.props;
    const { userInfo } = props.global;
    const site = (props.global && props.global.userInfo && props.global.userInfo.site && userInfo.site !== "" && props.global.client !== "oms" ) ? userInfo.site: "";
    const {
      currentUser = {
        avatar: this.transformAvatarImage(),
        name:
          (props.global &&
            props.global.userInfo &&
            props.global.userInfo.fullName) ||
          'Serati Ma',
      },
    } = this.props;


    const menuHeaderDropdown = (
      <div className={styles.userInfo}>
        <div className={styles.header}>
          <div className={styles.avatar} style={{backgroundImage: `url(${currentUser.avatar})`}}></div>
          <div className={styles.name}>{userInfo.fullName}</div>
        </div>
        <div className={styles.body}>
          <div className={styles.item}>
            <ul>
              <li>
                <span></span>
                <span className={styles.label}>账号：</span>
                <span className={styles.value}>{userInfo.loginName}</span>
              </li>
              <li>
                <span></span>
                <span className={styles.label}>姓名：</span>
                <span className={styles.value}>{userInfo.fullName}</span>
              </li>
              <li>
                <span></span>
                <span className={styles.label}>部门：</span>
                <span className={styles.value}>{userInfo && userInfo.depart && userInfo.depart.name}</span>
              </li>
              <li>
                <span></span>
                <span className={styles.label}>角色：</span>
                <span className={styles.value}>{this.getRoles()}</span>
              </li>
              {
                site ? (
                  <li>
                    <span></span>
                    <span className={styles.label}>企业编号：</span>
                    <span className={styles.value}>{userInfo.site}</span>
                  </li>
                ): null
              }
              
            </ul>
          </div>
          <div className={styles.exit}>
            {
              (userInfo && userInfo.site === "" ) && <a onClick={(event) => this.showModal(event)}>修改密码</a>
            }
            
            <a onClick={this.loginout}>退出登录</a>
          </div>
        </div>
      </div>
    );

    return currentUser && currentUser.name ? (
      <>
      <Popover 
        overlayClassName={styles.userWrapper} 
        placement="bottom" 
        trigger="click" 
        content={ (props.global && props.global.userInfo) ? menuHeaderDropdown: null} 
       >
        <span className={`${styles.action} ${styles.account}`} ref={r => this.avatarRef = r}>
          <Avatar
            size="small"
            className={styles.avatar}
            src={currentUser.avatar}
            alt="avatar"
          />
          {/* <span className={`${styles.name} anticon`}>{currentUser.name}</span> */}
        </span>
      </Popover>
      <Modal
          title="修改密码"
          centered
          width="480px"
          visible={this.state.visible}
          wrapClassName={styles.updatePassword}
          cancelText="取消"
          okText="确定"
          onOk={(event) => this.handleOk(event, this.form)}
          onCancel={(event) => this.handleCancel(event, this.form)} zIndex={2000}>
          <Form labelAlign="right" {...formItemLayout} ref={f => this.form = f}>
              {
                !getIOT() && (
                  <Form.Item
                    name="oldPwd"
                    label="原密码"
                    rules={[
                      {
                        required: true,
                        message: '请输入原始密码',
                      },
                    ]}
                    hasFeedback>
                    <Input.Password />
                  </Form.Item>
                )
              }
              <Form.Item
                name="newPwd"
                label="新密码"
                rules={[
                  {
                    required: true,
                    message: '请输入新密码',
                  },
                  {
                    pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9!@#$%^&*_]{8,16}$/,
                    message: '密码字符长度为8-16个字符'
                  }
                ]}
                hasFeedback>
              <Input.Password />
            </Form.Item>
            <Form.Item
                name="confirmPwd"
                label="确认密码"
                dependencies={['newPwd']}
                hasFeedback
                rules={[
                  {
                    required: true,
                    message: '请输入确认密码',
                  },
                  ({ getFieldValue }) => ({
                    validator(rule, value) {
                      if (!value || getFieldValue('newPwd') === value) {
                        return Promise.resolve();
                      }
                      return Promise.reject('确认密码与新密码输入不一致');
                    },
                  }),
                ]}>
              <Input.Password />
            </Form.Item>
          </Form>
      </Modal>
    </>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    );
  }
}


export default withRouter(AvatarDropdown)
