import React,{Component,Fragment} from 'react'
import PropTypes from 'prop-types'
import {Page,Validator,Notification,FormItem,DatePickerItem,TextAreaItem,CheckboxItem,Checkbox,
    InputItem,Input,Bind,SelectItem,Button,Label,Image,Table} from '@/components/Common-Library'
import Api from '@/service/api'
import mDbiurl from '../model'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable,runInAction } from 'mobx'
import { Col, Row, Card } from 'antd'

const CodeTable = CodeTableFactory.getInstance()


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

    @observable
		extra = { inifrm: 'dbiurl', sptinr: '', bas_usrnam: [], bas_rolnam:[] }

    constructor(props)
    {
        super(props)
        this.model = new mDbiurl()    
        this.bind = Bind.bind(this)
    }
  
    async componentWillMount() {
      if(this.props.location.query){
        let dblinr = this.props.location.query.inr
        const rtnmsg = await Api.post(this.extra.inifrm+'/init', { params: {dblinr} })
        if (rtnmsg.retcod == SUCCESS) {
          Object.assign(this.model,rtnmsg.data)
          this.extra.bas_usrnam = rtnmsg.codetable.bas_usrnam;
          this.extra.bas_rolnam = rtnmsg.codetable.bas_rolnam;
        }
        else {
          Notification.error({ message: '服务端请求失败!' })
        }	
      }	
      //快照模式下，不必开启校验，否则，静默校验，和记录变动
		  !this.loadDisplay() && this.model.openMonitor && this.model.openMonitor() //开启校验	
    }

    componentWillUnmount()
    {
        this.model.stopMonitor&&this.model.stopMonitor()//关闭校验
    }

    //按钮事件
    onRtn = ()=>{
      this.props.history.goBack();
    }

    //交易内实现
    renderPage(){
    	const bind = this.bind
      const {i18n} = this.props
      return (
        <Card title="用户与角色关系" size="small" className="transTitle">
          <div style={{position:'relative'}}>
            <Row>
              <Col span={12}>
                <Row className="row">
                  <Col span={5} offset={2}>
                    <Label itext="用户ID" trn="dbiurl" />
                  </Col>
                  <Col span={14}>
                    <SelectItem InputProps={bind("bas_usrnam")} code={this.extra.bas_usrnam} disabled={true} />
                  </Col>
                </Row>
              </Col>
              <Col span={12}>
                <Row className="row">
                  <Col span={5} offset={2}>
                    <Label itext="角色名称" trn="dbiurl" />
                  </Col>
                  <Col span={14}>
                    <SelectItem InputProps={bind("bas_rolnam")} code={this.extra.bas_rolnam} disabled={true} />
                  </Col>
                </Row>
              </Col>
            </Row>

            <Row type="flex" justify="center">
              <Col>
                <div className="button0">
                  <div className='button2'>
                    {/* 退出按钮 */}
                    <Button type="primary" onClick={this.onRtn}>
                      <Label i18nId="MTABUT_BT000020" />      
                    </Button>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
        </Card>
      )

             
  //       return (
  //       	<div className="transPage">
	// <Button  type="primary" icon="save"
	// 	  onClick={this.onUrlp_sav} desp="Save" path="/urlp/sav">
	// 	<Label   itext="Save"/>
	// </Button>
	// <SelectItem InputProps={bind("bas_usrnam")}   desp="用户ID" path="/recgrp/bas/usrnam"/>

	
	// <Label itext="用户ID" trn="dbiurl" />	
	// <Button  type="primary"  onClick={this.onUrlp_esc} desp="Return" path="/urlp/esc">
	// 	<Label   itext="Return"/>
	// </Button>
	// <SelectItem InputProps={bind("bas_rolnam")}   desp="角色名称" path="/recgrp/bas/rolnam"/>

	
	// <Label itext="角色名称" trn="dbiurl" />	
	// 	</div>
	// 	)
	}
}
