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 mDblrol 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 DblrolScreen extends Page
{
    @observable
    formBlur=false

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

    rolp_rollstHeader=[
    	{
    		title:<Label itext="角色码" />, 
    		dataIndex:"extkey",
    		key:"extkey",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.extkey,r2.extkey),
    	},
    	{
    		title:<Label itext="角色名称" />, 
    		dataIndex:"rolnam",
    		key:"rolnam",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.rolnam,r2.rolnam),
    	},
    	{
    		title:<Label itext="角色级别" />, 
    		dataIndex:"rollev",
    		key:"rollev",
    		width:100,
			sorter: (r1,r2)=>ColSorter(r1.rollev,r2.rollev),
			render:(val, row, index)=>{
    			let text = val
    			let em = CodeTable.bchlev.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		}
    	},
    	{
    		title:<Label itext="创建日期" />, 
    		dataIndex:"credat",
    		key:"credat",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.credat,r2.credat),
    	},
    	{
    		title:<Label itext="备注" />, 
    		dataIndex:"remark",
    		key:"remark",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.remark,r2.remark),
			},
			{
				title: '操作',
				dataIndex: "op",
				key: "op",
				width: 120,
				render: (val, row, index) => {
					return (
						<div>
						{(row.extkey!=='bnkbmg')&&(row.extkey!=='pbcrel')&&(row.extkey!=='bnkadm')&&(row.extkey!=='pbcopr')?	<span>
							<Link to={{ pathname: 'dberol', query: { inr: row.inr } }}>修改</Link>
							<Divider type="vertical" />
							<Link to={{ pathname: 'dbirol', query: { inr: row.inr } }}>明细</Link>
							<Divider type="vertical" />
							<Link to={{ pathname: 'dbdrol', query: { inr: row.inr } }}>删除</Link>
							</span>:null}
						</div>
					)
				}
			},
    ]


    //按钮事件
    onSel= ()=>{
        this.formBlur=true  //已触发表单提交处理
        Validator.validate(this.model,this.model.descriptor,async(errors,values)=>{
                if(errors)
                    return 
                const rtnmsg = await Api.post('dblrol/sel',{data:this.model})
                if(rtnmsg.retcod == SUCCESS)
                {
									this.model.rolp_rollst = rtnmsg.data.rolp_rollst;
                }
                else
                {
                	Notification.error({message:'服务端请求失败!'})
                }
                //余下逻辑处理
                    
        })
		}
		
		//按钮事件
    onAdd = () => {
			this.props.history.push('dbarol')
		}
    

    //交易内实现
    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="dblrol" />
											</Col>
											<Col span={14}>
												<InputItem InputProps={bind("rolp_extkey")} />
											</Col>
										</Row>
									</Col>
									<Col span={12}>
										<Row className="row">
											<Col span={5} offset={2}>
												<Label itext="角色名称" trn="dblrol" />
											</Col>
											<Col span={14}>
												<InputItem InputProps={bind("rolp_rolnam")} />
											</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 i18nId="MTABUT_BT000182" />
                </Button>
              </div>
            </div>

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

					</div>
				</Card>
			)
		}
}
