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 mDblurl 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, Divider } from 'antd'
import { Link } from 'react-router-dom'

const CodeTable = CodeTableFactory.getInstance()


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

    constructor(props)
    {
        super(props)
        this.model = new mDblurl()    
        this.bind = Bind.bind(this)
    }
	
	componentWillMount() 
	{
		//快照模式下，不必开启校验，否则，静默校验，和记录变动
		!this.loadDisplay() && this.model.openMonitor && this.model.openMonitor() //开启校验	
	}
    componentWillUnmount()
    {
        this.model.stopMonitor&&this.model.stopMonitor()//关闭校验
    }

    recgrp_urllstHeader=[
    	{
    		title:<Label itext="角色名" />, 
    		dataIndex:"rolnam",
    		key:"rolnam",
    		width:120,
    		sorter: (r1,r2)=>ColSorter(r1.rolnam,r2.rolnam),
    	},
    	{
    		title:<Label itext="用户ID" />, 
    		dataIndex:"usrnam",
    		key:"usrnam",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.usrnam,r2.usrnam),
      },
      {
        title: '操作',
        dataIndex: "op",
        key: "op",
        width: 120,
        render: (val, row, index) => {
            return (
                <div>
                    <Link to={{ pathname: 'dbeurl', query: { inr: row.inr } }}>修改</Link>
                    <Divider type="vertical" />
                    <Link to={{ pathname: 'dbiurl', query: { inr: row.inr } }}>明细</Link>
                    <Divider type="vertical" />
                    <Link to={{ pathname: 'dbdurl', query: { inr: row.inr } }}>删除</Link>
                </div>
            )
        }
    },
    ]


    //按钮事件
    onAdd= ()=>{
      this.props.history.push('dbaurl')
    }
    
    onSel= ()=>{
        this.formBlur=true  //已触发表单提交处理
        Validator.validate(this.model,this.model.descriptor,async(errors,values)=>{
                if(errors)
                    return 
                const rtnmsg = await Api.post('dblurl/urlp_sel',{data:this.model})
                if(rtnmsg.retcod == SUCCESS)
                {
                    this.model.recgrp_urllst=rtnmsg.data.recgrp_urllst
                }
                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="角色名" trn="dblurl" />
                      </Col>
                      <Col span={14}>
                        <InputItem InputProps={bind("bas_rolnam")}  maxLength={20} />
                      </Col>
                    </Row>
                  </Col>
                  <Col span={12}>
                    <Row className="row">
                      <Col span={5} offset={2}>
                        <Label itext="用户ID" trn="dblurl" />
                      </Col>
                      <Col span={14}>
                        <InputItem InputProps={bind("bas_usrnam")}  maxLength={8} />
                      </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>
					    <div className='button2'>
                <Button type="primary" onClick={this.onAdd}>
                  <Label i18nId="MTABUT_BT000182" />
                </Button>
              </div>
            </div>

            <Row >
              <Col span={23} style={{ marginLeft: 40 }}>
                <Table rowKey="inr" pagination={{ pageSize: 10, hideOnSinglePage: true }} columns={this.recgrp_urllstHeader} dataSource={this.model.recgrp_urllst} />
              </Col>
            </Row>
          </div>
			  </Card>
      )
	}
}
