// 角色管理form页面
import React from 'react';
import store from 'store';
// 页面相关子组件
import BasicInformation from './component/BasicInformation.jsx'; // 基本信息
import MenuAuthorization from './component/MenuAuthorization.jsx'; //菜单授权
import { $http } from 'containers/config/https';
import 'assets/css/system.css';
import './style/index.less';

import { Collapse, Spin, Icon, Divider } from 'antd';

const Panel = Collapse.Panel;

export default class AddRoleMaintenance extends React.Component {

	constructor() {
		super();
		this.state = {
			activeKey: '',
			flag: 'add',
			disabledAuthorization: true,
			disabledBilling: true,
			// 点击编辑时将行数据保存早userInfo中
			userInfo: {},
			showLoading: true,
			authorizationId: '',
			// 是否展开显示的样式
			isExhibition: 'uncheck',
			selectData: {}, // 下拉框数据
		}
	}

	componentDidMount() {
		if (this.props.paras) {
			let { flag, selectData, userInfo } = this.props.paras
			if (flag === 'add') {
				this.setState({ flag: flag, activeKey: '1', selectData: selectData })
			} else {
				// 点击编辑时可以任意操作基本信息或者菜单授权……并且默认全不展示
				this.setState({
					flag: flag,
					userInfo: userInfo,
					disabledAuthorization: false,
					disabledBilling: false,
					activeKey: '',
					authorizationId: userInfo.ID,
					selectData: selectData
				})
			}
		} else {
			// 如果在此页面刷新页面，则重新获取下拉框数据
			this.getSelectData();
			this.setState({ flag: 'add', activeKey: '1' })
		}
		this.setState({ showLoading: false })
	}

	componentWillReceiveProps(nextProps) {
		if (
			nextProps.paras && nextProps.paras.userInfo &&
			JSON.stringify(this.state.userInfo) !== JSON.stringify(nextProps.paras.userInfo)
		) {
			this.setState({
				userInfo: nextProps.paras.userInfo
			}, () => {
				this.child && this.child.setUserInfoId && this.child.setUserInfoId(this.state.userInfo?.ID || '');
			});
		}
	}

	componentWillUnmount() {
		// 组件销毁前将静止让setState修改state的状态
		this.setState = (state, callback) => { return; }
	}

	// 角色管理下拉框数据
	getSelectData() {
		let data = {
			params: []
		}
		$http.post('urlS', this, {
			code: "01040013",
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					this.setState({ selectData: res })
				} else {
					this.setState({ selectData: {} })
				}
			}
		})
	}

	// 调用子组件的连接事件
	onRef = (ref) => {
		this.child = ref
	}

	// 菜单授权允许操作
	unlockAuthorization(gropuId) {
		// console.log(gropuId)
		this.setState({ disabledAuthorization: false, activeKey: '2', authorizationId: gropuId })
	}

	// 点击展示相对应的视图
	cutActiveKeyHandle = (key) => {
		this.setState({ activeKey: key })
	}

	// 重置userInfo
	resetUserInfo() {
		this.setState({ userInfo: {} })
	}

	// 修改flag为compile
	// compileFlag() {
	// 	this.setState({flag: 'compile'})
	// }

	// 修改flag为compile
	addFlag() {
		this.setState({ flag: 'add', disabledAuthorization: true, disabledBilling: true })
	}

	// 返回
	goBack = () => {
		/**删除当前tab页
		 * 第一个参数：传targetKey
		 * 第二个参数：指定需要跳转到的标签页，传标签页title
		 *  */
		this.props.deleteSubMenuTabData(this.props.paras.targetKey, "角色管理");
	}

	render() {
		let { activeKey, userInfo, flag, disabledAuthorization, disabledBilling } = this.state;
		let tabsHeight = store.getState().tableHeight.y + 238 - 50 + 'px'
		return (
			<Spin tip="加载中..." spinning={this.state.showLoading}>
				<div className="add-role-maintenance">
					<div style={{ widht: '100%', height: '40px', background: '#fff', padding: '0 16px' }}>
						<span onClick={this.goBack} style={{ cursor: 'pointer', color: '#42b983', marginRight: '48px' }}>
							<Icon type='left' />
							<span>角色管理</span>
						</span>
						<div style={{ display: 'inline-block', lineHeight: '40px' }} className={this.state.activeKey === '1' ? 'menu-active' : ''}>
							<Icon type="file-word"></Icon>
							<button onClick={() => this.cutActiveKeyHandle('1')} className="button-operational">基本信息</button>
							{/* <span className='border-dashed'></span> */}
						</div>
						<Divider type="vertical" />
						<div style={{ display: 'inline-block', lineHeight: '40px', margin: '0 1px' }} className={!disabledAuthorization && this.state.activeKey === '2' ? 'menu-active' : ''}>
							{/* <span className='border-dashed'></span> */}
							<Icon type="bars" style={{ marginLeft: '16px' }}></Icon>
							<button onClick={() => this.cutActiveKeyHandle('2')} disabled={disabledAuthorization} className={!disabledAuthorization ? 'button-operational' : 'button-none-operational'}>菜单授权</button>
							{/* <span className='border-dashed'></span> */}
						</div>
						<Divider type="vertical" />
						<div style={{ display: 'inline-block', lineHeight: '40px' }} className={!disabledBilling && this.state.activeKey === '3' ? 'menu-active' : ''}>
							{/* <span className='border-dashed'></span> */}
							<Icon type="bar-chart" style={{ marginLeft: '16px' }}></Icon>
							<button onClick={() => this.cutActiveKeyHandle('3')} disabled={disabledBilling} className={!disabledBilling ? 'button-operational' : 'button-none-operational'}>计费信息</button>
						</div>
					</div>
					<div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>
					<Collapse
						className="role-collapse"
						style={{ width: '100%', height: tabsHeight, padding: '16px', boxSizing: 'border-box', overflow: 'auto', position: 'relative' }}
						bordered={false}
						activeKey={activeKey}
						onChange={this.cutActiveKeyHandle}
						accordion
						expandIcon={({ isActive }) => <Icon type="right-circle" rotate={isActive ? 90 : 0} style={{ fontSize: '16px' }} />}
					>
						<Panel
							header="基本信息&nbsp;&nbsp;&nbsp;&nbsp; 说明：1、此处输入角色基本信息；2、*为必填项，点击“从角色列表导入”直接从其他角色复制信息。"
							key="1"
							className={this.state.activeKey === '1' ? 'exhibition' : 'un-exhibition'}
							style={{ marginBottom: '10px', borderBottom: '0px', }}
						>
							<BasicInformation userInfo={userInfo} flag={flag} onRef={this.onRef} handelThis={this} selectData={this.state.selectData} />
						</Panel>
						<Panel
							header="菜单授权&nbsp;&nbsp;&nbsp;&nbsp;说明：1.此处配置角色中包含的菜单明细；2.点击“从角色列表复制授权”直接从其他角色中复制授权菜单；3.如菜单需要授权某些科室，点击权限科室，添加科室列表"
							key="2"
							disabled={disabledAuthorization}
							className={this.state.activeKey === '2' ? 'exhibition' : 'un-exhibition'}
							style={{ marginBottom: '10px', borderBottom: '0px' }}
						>
							<MenuAuthorization roleId={this.state.authorizationId} />
						</Panel>
						{/* <Panel
						header="计费相关设置&nbsp;&nbsp;&nbsp;&nbsp;说明：请您先维护角色基本信息并保存，才可以维护计费相关设置信息"
						key="3"
						disabled={disabledBilling}
						className={this.state.activeKey === '3' ? 'exhibition' : 'un-exhibition'}
						style={{borderBottom: '0px'}}
					>
						计费相关设置
					</Panel> */}
					</Collapse>
				</div>
			</Spin>
		)
	}
}