import BaseForm from '@/components/BaseForm';
import { changeUserPassWord } from '@/services/common/selfCenter';
import { PASSWORD_REG } from '@/utils/constant';
import { encryptDES } from '@/utils/tools';
import { useIntl,useMutation,FormattedMessage } from '@umijs/max';
import {  Card, Form,  Skeleton ,FormProps} from 'antd';
import React,{ useState } from 'react';
import style from './index.less';

const Settings: React.FC = () => {
  const intl = useIntl();
  const [form] = Form.useForm();
  const [awaitLoad, setAwaitLoad] = useState<boolean>(false);
  setTimeout(() => {
    setAwaitLoad(true);
  }, 150);

  const { mutate, isLoading } = useMutation(changeUserPassWord, {
    onSuccess: async () => {
      form.resetFields();
    },
  });
  // const onFinish = async (values: any) => {
  //   (UPDATE_PASSWORD, values);
  // };
  const onFinish = (values: API.userSettingReq) => {
    const data: any = {
      newPassword: encryptDES(values.newPassword),
      oldPassword: encryptDES(values.oldPassword),
      confirmPassword: encryptDES(values.confirmPassword),
    };
    mutate(data);
  };

  let itemColumn = [
    {
      type: 'inputPassword',
      itemProps: {
        name: 'oldPassword',
        label: intl.formatMessage({
          id: 'pages.account.passwordOld',
        }),
        rules: [
          {
            required: true,
            message: intl.formatMessage({
              id: 'pages.account.passwordOldRequired',
            }),
          },
          {
            min: 8,
            max: 20,
            // 正则
            pattern: PASSWORD_REG,
            message: intl.formatMessage({
              id: 'pages.account.passwordOldInvalid',
            }),
          },
        ],
      },
      elementProps: {
        placeholder: intl.formatMessage({
          id: 'form.info.text.entrt',
        }),
      },
    },
    {
      type: 'inputPassword',
      itemProps: {
        name: 'newPassword',
        label: intl.formatMessage({
          id: 'pages.account.passwordNew',
        }),
        rules: [
          {
            required: true,
            message: intl.formatMessage({
              id: 'pages.account.passwordNewRequired',
            }),
          },
          {
            min: 8,
            max: 20,
            // 正则
            pattern: PASSWORD_REG,
            message: intl.formatMessage({
              id: 'pages.account.passwordNewInvalid',
            }),
          },
          {
            validator: (_: any, value: string) => {
              if (value && value === form.getFieldValue('oldPassword')) {
                return Promise.reject(
                  intl.formatMessage({
                    id:'pages.account.passwordNewRepeat',
                  }),
                );
              }
              return Promise.resolve();
            },
          },
        ],
      },
      elementProps: {
        placeholder: intl.formatMessage({
          id: 'form.info.text.entrt',
        }),
      },
    },
    {
      type: 'inputPassword',
      itemProps: {
        name: 'confirmPassword',
        label: intl.formatMessage({
          id: 'pages.account.passwordConfirm',
        }),
        rules: [
          {
            required: true,
            message: intl.formatMessage({
              id: 'pages.account.passwordConfirmRequired',
            }),
          },
          {
            min: 8,
            max: 20,
            // 正则
            pattern: PASSWORD_REG,
            message: intl.formatMessage({
              id: 'pages.account.passwordConfirmInvalid',
            }),
          },
          {
            validator: (_: any, value: string) => {
              if (value && value !== form.getFieldValue('newPassword')) {
                return Promise.reject(
                  intl.formatMessage({
                    id: 'pages.account.passwordConfirmNotMatch',
                  }),
                );
              }
              return Promise.resolve();
            },
          },
        ],
      },
      elementProps: {
        placeholder: intl.formatMessage({
          id: 'form.info.text.entrt',
        }),
      },
    },
    {
      type: 'button',
      itemProps: {
        className:'text-center',
        wrapperCol: { span: 9, offset:7 },
      },
      columns:[
        {
          elementProps:{
            type:'primary',
           htmlType:'submit',
           loading:isLoading
          },
          key:1,
          value:<FormattedMessage id="form.handel.submit" />
        },
        {
          elementProps:{
           htmlType:'reset',
           className:style['margin-left-8']
          },
          value:<FormattedMessage id="form.handel.reset" />,
          key:2
        }
      ]
      
    }
  ];

  const config: FormProps = {
    form: form,
    labelCol: { span: 9 },
    wrapperCol: { span: 6 },
    layout: 'horizontal',
    onFinish: onFinish
  };



  return (
    <div className={style['card-container']}>
    <Card className={style['card']} title={intl.formatMessage({ id: 'menu.account.settings' })}>
      {!awaitLoad ? (
        <Skeleton active />
      ) : (
        <BaseForm itemColumn={itemColumn} config={config}/>
      )}
    </Card>
    </div>

  );
};
export default Settings;