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 styles from './index.less';
const formItemLayout = {
  labelCol: {
    xs: { span: 6 },
    sm: { span: 6 },
  },
};
/**
 * 云平台上判断是否是默认密码
 * 如果是默认密码，强制要求修改密码
 */
let info = '666';
let infoPre = 'panda';
const ValidContainer = props => {
  const [needChangePassword, setNeedChangePassword] = useState(false);
  const [form] = Form.useForm();
  useEffect(() => {
    if (window.location.origin.replace(/^(http|https):\/\//, '') !== 'panda-water.cn') return;
    const { global } = props;
    const tk = global.token;
    if (tk) {
      appService.validDefaultPWD({
        ignoreSite: true,
        token: tk
      }).then(res => {
        if(res.code === 0) {
          const { data } = res;
          setNeedChangePassword(data.valid);
          info = data.info;
        }
      }).catch(err => {
      })
    }
  }, []);

  const handleOK = (e) => {
    e.stopPropagation();
    form
      .validateFields()
      .then((res) => {
        const params = {
            password: `${infoPre}${info}`, // 拼接默认密码
            newpassword: res.newPwd,
            token: window.globalConfig.token,
            ignoreSite: true,
        }
        appService
          .changePassword(params)
          .then((res) => {
            if (res.success) {
              message.success(globalHeader['component.account.password.update.success']);
              setTimeout(() => {
                  // setNeedChangePassword(false);
                  props.logout();
              }, 300);
            } else {
              message.error(globalHeader['component.account.oldpassword.errorMessage']);
            }
          })
          .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('用户首次登录之前必须修改密码')}
        // zIndex={2000}
      >
        <div className={styles['info-label']}>
            <ExclamationCircleFilled style={{color: '#FCAC0F', fontSize: '16px'}}/>
            <span>用户首次登录之前必须修改密码</span>
        </div>
        <Form labelAlign="left" {...formItemLayout} form={form}>
          <Form.Item
            name="newPwd"
            label="新密码"
            rules={[
              {
                required: true,
                message: '请输入新密码',
              },
              {
                pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9_]{8,16}$/,
                message: '密码需为8-16个数字、字符和下划线',
              },
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  if(value === `${infoPre}${props?.global?.userInfo?.loginName ?? info}` || value === 'panda666')
                    return Promise.reject('密码规则不允许');
                  return Promise.resolve();
                },
              })
            ]}
            hasFeedback
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name="confirmPwd"
            label="确认密码"
            dependencies={['newPwd']}
            hasFeedback
            rules={[
              {
                required: true,
                message: '请输入确认密码',
              },
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9_]{8,16}$/.test(value))
                    return Promise.reject('密码需为8-16个数字、字符和下划线');
                  if (value === `${infoPre}${props?.global?.userInfo?.loginName ?? info}` || value === 'panda666')
                    return Promise.reject('密码规则不允许');
                  if (!value || getFieldValue('newPwd') === value) {
                    return Promise.resolve();
                  }
                  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);