import React, { Component, Fragment } from 'react'
import {
	Page, Validator, Notification, FormItem,
	InputItem, Input, Bind, SelectItem, Button, Label, Table, Section, DatePickerItem,ConfirmButton
} from '@/components/Common-Library'
import Api from '@/service/api'
import mChgpwd from '../model'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable } from 'mobx'
import { Col, Row, Card } from 'antd'

@inject('UserContext')
@inject('i18n')
@observer
export default class ChgpwdScreen extends Page {
	@observable
  formBlur = false
  
	constructor(props) {
		super(props)
		this.model = new mChgpwd()
    this.bind = Bind.bind(this)
  }
  
  //初始化代码
  async componentWillMount() {
    //快照模式下，不必开启校验，否则，静默校验，和记录变动
    !this.loadDisplay() && this.model.openMonitor() //开启校验	
  }

	componentWillUnmount() {
		this.model.stopMonitor&&this.model.stopMonitor()//关闭校验
  }
  
  chgpwd=()=>{
    this.formBlur=true  //已触发表单提交处理
    console.log(this)
    Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
      if(errors)
        return 
      const rtnmsg = await Api.post('office/offp_chgpaswod',{data:this.model})
      if(rtnmsg.retmsg == "success")
      {
        Notification.success({message:'密码修改成功!'})
        this.props.history.push("home")
      }
      else
      {
        Notification.error({message:`${rtnmsg.retmsg}`})
      }
              //余下逻辑处理
    })
  }

  goBack=()=>{
    this.props.history.push("home");
  }

  //若输入的新密码与确认密码不一样，则清空确认密码
  pwdBlur=()=>{
    console.log(this.model)
    if(this.model.offp_newpwdcom){
      let newpwdcom = this.model.offp_newpwdcom
      if(this.model.offp_newpwd !== this.model.offp_newpwdcom){
        newpwdcom = ""
      }
      this.model.offp_newpwdcom = ""  //清空再赋值，重新触发检核机制，避免错误提示
      this.model.offp_newpwdcom = newpwdcom
    }
  }

	//交易内实现
	renderPage() {
		const bind = this.bind
		const { i18n } = this.props
		const CodeTable = CodeTableFactory.getInstance()

		return (
			<Card title="修改密码" size="small" className="transTitle">
        <div style={{ position: 'relative',marginTop:50 }}>
            <Row type="flex" justify="center">
              <Col span={10}>
                <Row className="row">
                  <Col span={5} offset={1}>
                    <Label itext="原密码" trn="bptopn" />
                  </Col>
                  <Col span={14}>
                    <InputItem InputProps={{type:"password",...bind("offp_oldpwd")}} />
                  </Col>
                </Row>
              </Col>
            </Row>
            <Row type="flex" justify="center">
              <Col span={10}>
                <Row className="row">
                  <Col span={5} offset={1}>
                    <Label itext="新密码" trn="bptopn" />
                  </Col>
                  <Col span={14}>
                    <InputItem InputProps={{type:"password",...bind("offp_newpwd"),onBlur:this.pwdBlur}} />
                  </Col>
                </Row>
              </Col>
            </Row>
            <Row type="flex" justify="center">
              <Col span={10}>
                <Row className="row">
                  <Col span={5} offset={1}>
                    <Label itext="新密码确认" trn="bptopn" />
                  </Col>
                  <Col span={14}>
                    <InputItem InputProps={{type:"password",...bind("offp_newpwdcom")}} />
                  </Col>
                </Row>
              </Col>
            </Row>
            <Row type="flex" justify="center" style={{marginTop:15}}>
              <Col style={{marginRight:30}}>
                <Button type="primary" onClick={this.chgpwd}>修改密码</Button>
              </Col>
              <Col>
                <Button type="primary" onClick={this.goBack}>返回</Button>
              </Col>
            </Row>
        </div>
      </Card>
		)
	}
}
