/* eslint-disable prettier/prettier */
import React, { useState, useEffect } from 'react';
import { Modal, message, Form, Input } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { connect } from 'react-redux';
import globalHeader from '@wisdom-utils/components/lib/AppLayout/locales/zh-CN/globalHeader';
import { actionCreators } from '@/containers/App/store';
import { appService } from '@/api';
import { encipher } from '@wisdom-utils/utils/lib/helpers';
import styles from './index.less';
const formItemLayout = {
  labelCol: {
    xs: { span: 6 },
    sm: { span: 6 },
  },
};
const getIOT = () =>
  window.globalConfig.loginTemplate === 'Dark - IOTMultiLogin.html' ||
  window.globalConfig.loginTemplate === '新春 - 智联.html';
/**
 * 云平台上判断是否是默认密码
 * 如果是默认密码,强制要求修改密码
 */
const ValidContainer = props => {
  const needChange = Boolean(localStorage.getItem('password_needChange'));
  const [needChangePassword, setNeedChangePassword] = useState(needChange || false);
  const [form] = Form.useForm();
  // eslint-disable-next-line react/no-this-in-sfc
  let rules = localStorage.getItem('password_pwdRegex') ? localStorage.getItem('password_pwdRegex') : '';
  const check = localStorage.getItem('password_token');
  const rulesTip = localStorage.getItem('password_pwdRegexTip') ? localStorage.getItem('password_pwdRegexTip') : '';
  const accessToken = localStorage.getItem('access_token') ? localStorage.getItem('access_token') : '';
  let reg;
  try {
    reg = new RegExp(rules);
  } catch (error) {
    rules = '';
    reg = new RegExp(rules);
  }
  useEffect(() => {
    // if (window.location.origin.replace(/^(http|https):\/\//, '') !== 'panda-water.cn') return;
    const { global } = props;
    const tk = global.token;
    // eslint-disable-next-line no-eval
    if (tk) {
      if (rules !== '' && check && check === accessToken) {
        setNeedChangePassword(true);
      }
    }
  }, []);

  const handleOK = e => {
    e.stopPropagation();
    form
      .validateFields()
      .then(res => {
        const params = getIOT()
          ? {
            newPassword: res.newPwd,
            phone: window.globalConfig.userInfo.Phone,
          }
          : {
            OldPassWord: encipher(res.oldPwd, window.globalConfig.encrypt).toUpperCase(),
            NewPassWord: encipher(res.newPwd, window.globalConfig.encrypt).toUpperCase(),
            UserId: window.globalConfig.userInfo.OID,
          };
        appService
          .changePassword(params)
          // eslint-disable-next-line no-shadow
          .then(res => {
            if (res.msg === '' || res.msg === 'Ok' || res.success) {
              message.success(globalHeader['component.account.password.update.success']);
              setTimeout(() => {
                setNeedChangePassword(false);
                localStorage.removeItem('password_needChange');
                // props.logout();
              }, 300);
            } else {
              message.error(res.msg);
            }
          })
          .catch(error => {
            message.error(globalHeader['component.account.password.update.fail']);
          });
      })
      .catch(error => {
        console.log(error);
      });
  };
  return (
    <>
      {props.children}
      <Modal
        title="修改密码"
        centered
        width="362px"
        visible={needChangePassword}
        wrapClassName={styles.updatePassword}
        cancelText="取消"
        okText="确定"
        onOk={handleOK}
        onCancel={event => message.info(needChange ? '密码过期,登录之前必须修改密码' : '用户首次登录之前必须修改密码')}
        // zIndex={2000}
      >
        <div className={styles['info-label']}>
          <ExclamationCircleFilled style={{ color: '#FCAC0F', fontSize: '16px' }} />
          <span>{needChange ? '密码过期,登录之前必须修改密码' : '用户首次登录之前必须修改密码'}</span>
        </div>
        <Form labelAlign="left" {...formItemLayout} form={form}>
          <Form.Item
            name="oldPwd"
            label="原密码"
            rules={[
              {
                required: true,
                message: '请输入原始密码',
              },
            ]}
            hasFeedback
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name="newPwd"
            label="新密码"
            rules={[
              {
                required: true,
                message: '请输入新密码',
              },
              {
                pattern: reg,
                message: rulesTip,
              },
            ]}
            hasFeedback
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name="confirmPwd"
            label="确认密码"
            dependencies={['newPwd']}
            hasFeedback
            rules={[
              {
                required: true,
                message: '请输入确认密码',
              },
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  if (!reg.test(value))
                    // eslint-disable-next-line prefer-promise-reject-errors
                    return Promise.reject(rulesTip);
                  if (!value || getFieldValue('newPwd') === value) {
                    return Promise.resolve();
                  }
                  // eslint-disable-next-line prefer-promise-reject-errors
                  return Promise.reject('确认密码与新密码输入不一致');
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
});
const mapDispatchToProps = dispatch => ({
  logout() {
    dispatch(actionCreators.logout());
  },
});
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(ValidContainer);