import React,{Component,Fragment} from 'react'
import PropTypes from 'prop-types'
import {Page,Validator,Notification,FormItem,DatePickerItem,TextAreaItem,CheckboxItem,ConfirmButton,
    InputItem,Input,Bind,SelectItem,Button,Label,Image,Table} from '@/components/Common-Library'
import Api from '@/service/api'
import mDberol 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, Spin, Checkbox } from 'antd'


const CodeTable = CodeTableFactory.getInstance()


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

    constructor(props)
    {
        super(props)
        this.model = new mDberol()    
        this.bind = Bind.bind(this)
    }
	
	async componentWillMount() 
	{
		/*
		*添加初始化代码
		*/
		if(this.props.location.query){
			let selinr = this.props.location.query.inr
			const rtnmsg = await Api.post('dberol/init', { params: {selinr} })
			if (rtnmsg.retcod == SUCCESS) {
				Object.assign(this.model,rtnmsg.data)
				this.flag = false
			}
			else {
				Notification.error({ message: '服务端请求失败!' })
			}	
		} 
		//快照模式下，不必开启校验，否则，静默校验，和记录变动
		!this.loadDisplay() && this.model.openMonitor && this.model.openMonitor() //开启校验	
	}
    componentWillUnmount()
    {
        this.model.stopMonitor&&this.model.stopMonitor()//关闭校验
    }

    //按钮事件
    onSav= ()=>{
        this.formBlur=true  //已触发表单提交处理
        Validator.validate(this.model,this.model.descriptor,async(errors,values)=>{
                if(errors)
                    return 
                const rtnmsg = await Api.post('dberol/sav',{data:this.model})
                if(rtnmsg.retcod == SUCCESS)
                {
                    Notification.success({message:'数据提交成功!'})
                    this.props.history.push("dblrol");
                }
                else
                {
                	Notification.error({message:'服务端请求失败!'})
                }
                //余下逻辑处理
                    
        })
    }
    onRtn= ()=>{
			this.props.history.push("dblrol");
    }
    onChk= ()=>{
        this.formBlur=true  //已触发表单提交处理
        Validator.validate(this.model,this.model.descriptor,async(errors,values)=>{
								if(errors){
									return
								}
                const rtnmsg = await Api.post('dberol/chk',{data:this.model})
                if(rtnmsg.retcod == SUCCESS)
                {
                    Notification.success({message:'数据提交成功!'})
                    
                }
                else
                {
                	Notification.error({message:'服务端请求失败!'})
                }
                //余下逻辑处理
                    
        })
		}
		
		//多选框事件，为数组中对应对象的元素赋值
		boxCH = (row, secondArr)=>{
			if(row.choose != 'A'){
				row.choose = 'A'
			}else{
				row.choose = null
				if(secondArr){
					for(let i=0; i<secondArr.length; i++){
						secondArr[i].choose = null
					}
				}
			}
		}

		//根据后台传递的交易数组，动态生成界面
		getPage = ()=>{
			if(this.model.rolp_fillst.length == 0){
				return null
			}
			return this.model.rolp_fillst.map((row)=>{
				//查找一级菜单
				if(row.frmlev == "1"){
					//查找一级菜单对应的二级菜单
					let secondArr = this.model.rolp_fillst.filter(item => item.frmgrp == row.frmgrp && item.frmlev != "1")
					if(secondArr.length == 0){
						return (
							<Row style={{marginTop:20}}>
								<Col span={24}>
									<Checkbox onChange={()=>this.boxCH(row)} checked={row.choose == 'A'}><span style={{fontSize:16}}>{row.frmnam}</span></Checkbox>
								</Col>
							</Row>
						)
					}else{
						return (
							<Row style={{marginTop:20}}>
								<Col span={24}>
									<Checkbox onChange={()=>this.boxCH(row, secondArr)} checked={row.choose == 'A'}>
										<span style={{fontSize:16}}>{row.frmnam}</span>
										{
											row.choose == "A" ? null : <span style={{fontSize:13,color:"red",marginLeft:30}}>勾选此项后方可勾选对应二级菜单</span>
										}
									</Checkbox>
								</Col>
								<Col span={24}>
									<Row className="row" style={{paddingLeft:20}}>
										{
											this.getSecond(secondArr, row.choose)
										}
									</Row>
								</Col>
							</Row>
						)
					}
				}
			})
		}

		//根据传递的参数数组，动态生成二级菜单
		getSecond = (arr, choose)=>{
			return arr.map((obj)=>{
				return (
					<Col span={6}>
						<Checkbox onChange={()=>this.boxCH(obj)} checked={choose == 'A' && obj.choose == 'A'} disabled={choose != 'A'}>{obj.frmnam}</Checkbox>
					</Col>
				)
			})
		}
    

    //交易内实现
    renderPage(){
    	const bind = this.bind
      const {i18n} = this.props
             
			if(this.flag==true){
				return <Spin style={{width:"100%", justifyContent:"center"}} spinning={this.flag} />
			}

			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="角色编码" trn="dbarol" />
									</Col>
									<Col span={14}>
										<InputItem InputProps={bind("extkey")} />
									</Col>
								</Row>
							</Col>
							<Col span={12}>
								<Row className="row">
									<Col span={5} offset={2}>
										<Label itext="角色名称" trn="dbarol" />
									</Col>
									<Col span={14}>
										<InputItem InputProps={bind("rolnam")} />
									</Col>
								</Row>
							</Col>
						</Row>

						<Row>
							<Col span={12}>
								<Row className="row">
									<Col span={5} offset={2}>
										<Label itext="级别" trn="dbarol" />
									</Col>
									<Col span={14}>
										<SelectItem InputProps={bind("rollev")} code={CodeTable.usrlvl} />
									</Col>
								</Row>
							</Col>
							<Col span={12}>
								<Row className="row">
									<Col span={5} offset={2}>
										<Label itext="备注" trn="dbarol" />
									</Col>
									<Col span={14}>
										<InputItem InputProps={bind("remark")} />
									</Col>
								</Row>
							</Col>
						</Row>

						<h3 style={{marginTop:30}}>角色权限配置</h3>

						{
							this.getPage()
						}

						<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 className='button2'>
										{/* 检核按钮 */}
										<Button type="primary" onClick={this.onChk}>
											<Label itext="检核" />  
										</Button>
									</div>
									<div className='button2'>
										<ConfirmButton
											type="primary"
											onOK={this.onSav}
											icon="save"
											message="确定提交？"
										>
											<Label i18nId="MTABUT_BT000473" />
										</ConfirmButton>
									</div>
								</div>
							</Col>
						</Row>

					</div>
				</Card>
			)
	}
}
