import React, { Component, Fragment } from 'react'
import {
    Page, Validator, Notification, FormItem,
    InputItem, Input, Bind, SelectItem, Button, Label, Table, Section, DatePickerItem
} from '@/components/Common-Library'
import { Divider } from 'antd'
import Api from '@/service/api'
import mDblusr 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,Tooltip } from 'antd'
import { Link } from 'react-router-dom'
import Moment from 'moment'
const CodeTable = CodeTableFactory.getInstance()

@inject('UserContext')
@inject('i18n')
@observer
export default class DblusrScreen extends Page {
    @observable
    formBlur = false

    @observable
	usg:[]

    constructor(props) {
        super(props)
        this.model = new mDblusr()
        this.bind = Bind.bind(this)
    }

    componentWillUnmount() {
      this.model.stopMonitor&&this.model.stopMonitor()//关闭校验
    }
    
	async componentWillMount() {
		 if (this.props.location.state) {
             let selflg = this.props.location.state.selflg
		     if (selflg)
                this.onSel()   
     }	
     const rtnmsg = await Api.post('dblusr/init',{})
		if(rtnmsg.retcod == SUCCESS)
		{
            const { data } = rtnmsg
            Object.assign(this.model, data)
            this.usg = rtnmsg.codetable['\\usrgrp\\rec\\usg'];

        }
     //快照模式下，不必开启校验，否则，静默校验，和记录变动
    !this.loadDisplay() && this.model.openMonitor() //开启校验	
	}
	
    usrp_usrlstHeader=[
    	{
    		title:<Label itext="用户ID" />, 
    		dataIndex:"nam",
    		key:"nam",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.nam,r2.nam),
    	},
    	{
    		title:<Label itext="用户名称" />, 
    		dataIndex:"dspnam",
    		key:"dspnam",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.dspnam,r2.dspnam),
    	},
    	{
    		title:<Label itext="用户组" />, 
    		dataIndex:"usg",
    		key:"usg",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.usg,r2.usg),
    	},
    	{
    		title:<Label itext="用户状态" />, 
    		dataIndex:"sta",
    		key:"sta",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.sta,r2.sta),
    		render:(val, row, index)=>{
    			let text = val
    			let em = CodeTable.usrsta.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		}
    	},
    	{
    		title:<Label itext="电话" />, 
    		dataIndex:"tel",
    		key:"tel",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.tel,r2.tel),
    	},
    	{
    		title:<Label itext="所属机构联行行号" />, 
    		dataIndex:"rmbrpt",
    		key:"rmbrpt",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.rmbrpt,r2.rmbrpt),
    	},
    	{
    		title:<Label itext="所属机构名称" />, 
    		dataIndex:"bchnam",
    		key:"bchnam",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.bchnam,r2.bchnam),
    	},
    	{
    		title:<Label itext="注册时间" />, 
    		dataIndex:"credat",
    		key:"credat",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.credat,r2.credat),
    	},
        {
            title: '操作',
            dataIndex: "op",
            key: "op",
            width: 120,
            render: (val, row, index) => {
                return (
                    <div>
                        {row.sta == '4' && this.model.usr_usg == 'bnkadm' ?
                        <span> <Link to={{ pathname: 'dbeusr', query: { usrinr: row.inr ,usg:this.usg}} }>重新注册</Link>
                            <Divider type="vertical" /> </span>:null
                        }
                         {(row.sta == '3' || row.sta == '5') && this.model.usr_usg == 'bnkbmg' ?
                        <span> <Link to={{ pathname: 'usrrel', query: { usrinr: row.inr,usg:this.usg}}}>复核</Link>
                            <Divider type="vertical" /> </span> :null
                            }
                           {row.sta == '0' && this.model.usr_usg == 'bnkadm' ?
                            <span> <Link to={{ pathname: 'dbdusr', query: { usrinr: row.inr,usg:this.usg}}}>用户注销</Link>
                            <Divider type="vertical" /> </span> :null
            }
                {(row.sta == '2'||row.sta == '0' )&& this.model.usr_usg == 'bnkadm' ?
                            <span> <Link to={{ pathname: 'dbiusr', query: { usrinr: row.inr,usg:this.usg}}}>解锁密码</Link>
                            <Divider type="vertical" /> </span>:null
            }
               {row.sta == '4' && this.model.usr_usg == 'bnkadm' ?
                            <a href='javascript:;' onClick={() => { this.onRegdel( row.inr) }} >删除</a>:null}
                    
             
                    </div>
                )
            }
        },
    ]

    onRegdel= ( usrinr)=>{
        this.formBlur=true  //已触发表单提交处理
        Validator.validate(this.model,this.model.descriptor,async(errors,values)=>{
                // if(errors)
                //     return 
                const rtnmsg = await Api.post('dblusr/regdel',{data:this.model, params:{usrinr}})
                if(rtnmsg.retcod == SUCCESS)
                {
                    Notification.success({message:'删除成功!'})
                    this.onSel();
                    
                }
                else
                {
                	Notification.error({message:'服务端请求失败!'})
                }
                //余下逻辑处理
                    
        })
    }
    link = (path) => {
        this.props.history.push({ pathname: path,  query: { usrinr: row.inr }  });

    }
  
    onAdd = () => {
        this.props.history.push({pathname:'dbausr',query:{usg:this.usg}});
    }
    onSel = () => {
        this.formBlur = true  //已触发表单提交处理
        Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
            if (errors)
                return
            const rtnmsg = await Api.post('dblusr/regsel', { data: this.model })
            if (rtnmsg.retcod == SUCCESS) {
                //Notification.success({message:'数据提交成功!'})
                this.model.usrp_usrlst = rtnmsg.data['usrp_usrlst'];
                console.log(this.model)
            }
            else {
                Notification.error({ message: '查询失败!' })
            }
            //余下逻辑处理

        })
    }


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

        return (
		 <Card title="用户注册" size="small" className="transTitle">
            <div style={{ position: 'relative' }}>
           
                <Row>
                    <Col span={20}>

                        <Row>
                            <Col span={12}>
                                <Row className='row'>
                                    <Col span={5} offset={2}>
                                    <Label   itext="用户ID"/>
                                    </Col>
                                    <Col span={14}>
                                    <InputItem InputProps={bind("nam")}  maxLength={8}  desp="用户id" path="/nam" />
                                    </Col>
                                </Row>
                            </Col>
                            <Col span={12}>
                                <Row className='row'>
                                    <Col span={5} offset={2}>
                                        <Label itext="用户名称" />
                                    </Col>
                                    <Col span={14}>
                                    <InputItem InputProps={bind("dspnam")}  maxLength={40}  desp="用户名称" path="/dspnam" />
                                    </Col>
                                </Row>
                            </Col>
                        </Row>


                    </Col>
                </Row>

                <Row>
                    <Col span={20}>

                        <Row>
                            <Col span={12}>
                                <Row className='row'>
                                    <Col span={5} offset={2}>
                                    <Label   itext="开始日期"/>
                                    </Col>
                                    <Col span={14}>
                                    <DatePickerItem InputProps={bind("strdat")}  desp="开始日期" path="/strdat" />
                                    </Col>
                                </Row>
                            </Col>
                            <Col span={12}>
                                <Row className='row'>
                                    <Col span={5} offset={2}>
                                        <Label itext="用户状态" />
                                    </Col>
                                    <Col span={14}>
                                    <SelectItem InputProps={bind("usrsta")} code={CodeTable.usrsta}  desp="用户状态" path="/usrsta"/>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>


                    </Col>
                </Row>


                <Row>
                    <Col span={20}>

                        <Row>
                            <Col span={12}>
                                <Row className='row'>
                                    <Col span={5} offset={2}>
                                    <Label   itext="结束日期"/>
                                    </Col>
                                    <Col span={14}>
                                    <DatePickerItem InputProps={bind("enddat")}  desp="结束日期" path="/enddat" />
                                    </Col>
                                </Row>
                            </Col>
                       
                        </Row>


                    </Col>
                </Row>


                <div className='button0'>
                    <div className='button2'>
                        <Button type="primary" icon="search" onClick={this.onSel}>
                            <Label i18nId="MTABUT_BT000022" />
                        </Button>
                    </div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 
				 <div className='button2'>
                        <Button type="primary" onClick={this.onAdd}>
                        <Label   itext="用户注册"/>
                        </Button>
                    </div>
    
                </div>

                <Row >
                    <Col span={23} style={{marginLeft:40}}>
                        <Table pagination={{ pageSize: 10, hideOnSinglePage: true }} columns={this.usrp_usrlstHeader} dataSource={this.model.usrp_usrlst}   path="/usrp/usrlst"/>
                    </Col>
                </Row>
              
            </div >
			  </Card>
        )
    }
}
