import React, {useEffect, useRef, useState} from 'react';
import { history,useRequest } from 'umi';
import Base64 from 'base64-js';
import { ProFormInstance, ProFormRadio } from '@ant-design/pro-form';
import ProForm, {
  StepsForm,
  ProFormText,
  ProFormDatePicker,
  ProFormSelect,
  ProFormDigit,
  ProFormTextArea,
  ProFormCheckbox,
  ProFormDateRangePicker,
} from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
// import { Button, Col, message, Row } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import ProDescriptions from '@ant-design/pro-descriptions';
import { queryPersonInfo,changePwd } from './service';
import './index.less';
import cookie from 'react-cookies';
import { Tabs,Input,Button,message,Modal } from 'antd';
import {saveTrain} from "../../../../admin/src/pages/training/option/service";
import {outLogin} from "@/services/ant-design-pro/api";
import {stringify} from "querystring";
// import {savePersonSignUpInfo,changePwd} from "@/pages/registration/service";
const { TabPane } = Tabs;
const { confirm } = Modal;


export default () => {
  const [personInfo, setPersonInfo] = useState({});
  const [oldPassWord,setOldPassWord] = useState('');
  const [newPassWord,setNewPassWord] = useState('');
  const [secondNewPassWord,setSecondNewPassWord] = useState('');
  const data = useRequest(() => {
    return queryPersonInfo({
      identity_id:cookie.load('identity_id'),
      person_id:cookie.load('person_id')
    });
  },{
    formatResult: (result) => {
      setPersonInfo(result.table_List);
    }
  });

  const showConfirm=async ()=>{
    confirm({
      title: '确认进行密码修改吗?',
      centered:true,
      onOk() {
        savePassWord()
      },
      onCancel() {
      },
    });
  };

  const loginOut = async () => {
    await outLogin();
    const { query = {}, pathname } = history.location;
    const { redirect } = query;
    // Note: There may be security issues, please note
    if (window.location.pathname !== '/user/login' && !redirect) {
      history.replace({
        pathname: '/user/login',
        search: stringify({
          redirect: pathname,
        }),
      });
    }
  };

  const savePassWord = async ()=>{
    // const success = await changePwd({
    //   pwd_original:oldPassWord,
    //   pwd_new:newPassWord
    // });
    try {
      const code=await changePwd({
        pwd_original:oldPassWord,
        pwd_new:newPassWord
      });
      if(code.success){
        message.success('密码修改成功');
        loginOut();
      }

      return true;
    } catch (error) {
      if(error.response){
        message.error(error.response.info);
      }else {
        message.error('修改失败');
      }

    }

  };

  return (
   <div className="personalCenter" style={{background:'#fff',padding:24,height:window.innerHeight-150,}}>
     <Tabs defaultActiveKey="1" onChange={()=>{

     }}>
       <TabPane tab="个人信息" key="1">
         <div style={{paddingTop:'3rem',width:'20rem',margin:'0 auto'}}>
           <div  className='condition' >
             <div className='condition-title' >考生姓名：</div>
             <span className='condition-text' >{personInfo?.person_name}</span>
           </div>
           <div className='condition'>
             <div className='condition-title' >所在学校：</div>
             <span className='condition-text'>{personInfo?.bureau_name}</span></div>
           <div className='condition'>
             <div className='condition-title' >性别：</div>
             <span className='condition-text'>{personInfo?.xb_name}</span></div>
         </div>
       </TabPane>
       <TabPane tab="密码修改" key="2">
         <div style={{paddingTop:'3rem',width:'20rem',margin:'0 auto'}}>
           <div  className='condition' >
             <div className='condition-title' >原密码：</div>
             <div className='condition-text' style={{display:'inline-block',}} >
               <Input.Password maxLength='12'
                               placeholder="输入内容"
                               value={oldPassWord}
                               onChange={(e)=>{
                                 const strExp= /^[A-Za-z0-9]+$/;
                                 if(strExp.test(e.target.value) || e.target.value===''){
                                   setOldPassWord(e.target.value);
                                   return true;
                                 }else {
                                   message.warning('请输入英文或者是数字！');
                                   setOldPassWord(e.target.value.replace(/[\W]/g, ''));
                                 }
                               }}
               />
             </div>
           </div>
           <div className='condition'>
             <div className='condition-title' >新密码：</div>
             <div className='condition-text' style={{display:'inline-block',}} >
               <Input.Password maxLength='12'
                               value={newPassWord}
                               placeholder="输入内容"
                               onChange={(e)=>{
                                 const strExp= /^[A-Za-z0-9]+$/;
                                 if(strExp.test(e.target.value) || e.target.value===''){
                                   setNewPassWord(e.target.value);
                                   return true;
                                 }else {
                                   message.warning('请输入英文或者是数字！');
                                   setNewPassWord(e.target.value.replace(/[\W]/g, ''));
                                 }
                               }}
               />
             </div>
           </div>
           <div className='condition'>
             <div className='condition-title' >确认密码：</div>
             <div className='condition-text' style={{display:'inline-block',}} >
               <Input.Password maxLength='12'
                               value={secondNewPassWord}
                               placeholder="输入内容"
                               onChange={(e)=>{
                                 const strExp= /^[A-Za-z0-9]+$/;
                                 if(strExp.test(e.target.value) || e.target.value===''){
                                   setSecondNewPassWord(e.target.value);
                                   return true;
                                 }else {
                                   message.warning('请输入英文或者是数字！');
                                   setSecondNewPassWord(e.target.value.replace(/[\W]/g, ''));
                                 }
                               }}
               />
             </div>
           </div>
           <div className="tip">提示：密码支持英文和数字，长度为6-12位</div>
           <div style={{marginTop:'3rem',textAlign:'center'}}>
             <Button type="primary" onClick={async ()=>{
               if(oldPassWord.trim()===''||newPassWord.trim()===''||secondNewPassWord.trim()===''){
                 message.warning('密码不能为空！');
               }else if(oldPassWord.length<6||newPassWord.length<6||secondNewPassWord.length<6){
                 message.warning('密码长度不能小于6位！');
               }else if(newPassWord!==secondNewPassWord){
                 message.warning('两次输入的新密码不一致！');
               }else {
                 showConfirm();
               }

             }}>确定修改</Button>
           </div>
         </div>

       </TabPane>
     </Tabs>
   </div>

  );
};
