// 角色维护
import React from 'react';
import { Select, Input, Row, Col, Button, Spin, Divider, Popconfirm, message, Icon } from 'antd';
import { $http } from '../../containers/config/https';
import '../../assets/css/system.css';
import PubilcTablePagination from '../common/PubilcTablePagination.jsx';
import store from './../../store/index';

const { Option } = Select;

export default class RoleMaintenance extends React.Component {

	constructor({history}) { 
		super();
		this.history = history;
		this.state = {
			// 角色名称
			name: undefined,
			// 关联岗位
			quarters: undefined,
			// 记录状态
			status: undefined,
			// 表格数据
			tableData: [],
			// 表格数据总条数
			total: 0,
			showLoading: true,
			page: 1,
			pageSize: 20,
			selectData: {}, // 下拉框数据
			headerHeight: 0,
			loading: false
		};
		this.columns = [
			{
			  key: 1,
			  title: '角色名称',
			  dataIndex: 'Descripts',
				align: "center",
				width: '12%'
			},
			{
			  key: 2,
			  title: '默认菜单类型',
			  dataIndex: 'DefaultMenuType',
				align: "center",
				width: '12%',
				render(DefaultMenuType){
					let config = {
							'1': '头菜单',
							'2': '侧菜单'
					}
					return config[DefaultMenuType];
				}
			},
			{
			  key: 3,
			  title: '岗位',
			  dataIndex: 'PostDrDesc',
				align: "center",
				width: '12%',
			},
			{
			  key: 5,
			  title: '主界面',
			  dataIndex: 'MainInterface',
				align: "center",
				width: '11%',
			},
			{
			  key: 6,
			  title: '全部医嘱',
			  dataIndex: 'AllOrder',
				align: "center",
				width: '11%',
				render(AllOrder){
					let config = {
						'Y': '是',
						'N': '否'
					}
					return config[AllOrder];
				}
			},
			{
			  key: 7,
			  title: '操作代码表',
			  dataIndex: 'OperCodeTable',
				align: "center",
				width: '11%',
				render(OperCodeTable){
					let config = {
						'Y': '是',
						'N': '否'
					}
					return config[OperCodeTable];
				}
			},
			{
			  key: 8,
			  title: '撤销已执行医嘱',
			  dataIndex: 'CancelExecStatus',
				align: "center",
				width: '11%',
				render(CancelExecStatus){
					let config = {
						'Y': '是',
						'N': '否'
					}
					return config[CancelExecStatus];
				}
			},
			{
				key: 9,
				title: '状态',
				dataIndex: 'states',
				align: "center",
				render(states){
					let config = {
						'生效': <li style={{listStyle: 'disc', color: 'rgb(66,185,131)'}}><span style={{color: 'rgba(0, 0, 0, 0.65)', marginLeft: '-10px'}}>生效</span></li>,
						'失效': <li style={{listStyle: 'disc', color: 'rgb(240,65,52)'}}><span style={{color: 'rgba(0, 0, 0, 0.65)', marginLeft: '-10px'}}>失效</span></li>
					}
					return config[states];
				}
			},
			{
			  title: '操作',
			  key: 10,
			  align: "center",
			  width: 130,
			  render: (text, record) => (
				<span>
					<Icon type="edit" style={{color: '#108EE9'}}></Icon>
				  <span className='span' onClick={() => this.handleCompile(record)}>编辑</span>
				  {/* 分割线 */}
				  <Divider type="vertical" />
					<Icon type="delete" style={{color: 'rgba(240,65,52,1)'}}></Icon>
				  <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record)} >
						<span className='span' style={{color: 'rgba(240,65,52,1)'}}>删除</span>
				  </Popconfirm>
				</span>
			  ),
			}
		]
		
	}

	componentDidMount() {
		// 初始化列表数据
		this.handleQuery();
		this.getSelectData();
		// 组件加载完毕关闭loading
		this.setState({showLoading: false});
		var box = document.querySelector(".role-header");
		if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
			this.setState({headerHeight: box.offsetHeight})
		}
	}

	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
	}

	// 查询条件 --- 角色名称
	onChangeName = (e) => {
		// console.log(e.target.value)
		this.setState({ name: e.target.value });
	}

	// 查询条件 --- 关联岗位
	onChangeQuarters = (e) => {
		this.setState({ quarters: e });
	}
	// 查询条件 --- 记录状态
	onChangeStatus = (e) => {
		this.setState({ status: e });
	}

	// 提供修改page和pageSize的回调函数
	compilePage(page, pageSize) {
		// 修改page，或者pageSize
		this.setState({page: page, pageSize: pageSize}, () => {
			// 重新调用查询方法
			let {status, name, quarters} = this.state;
			this.getTableData(name, status, quarters);
		})
	}

	// 请求列表数据
	getTableData (name, status, quarters) {
		this.setState({loading: true});
		let { page, pageSize } = this.state;
		let data = {}
		data = {
			params: [{
				Descripts: name,
				PostDr: quarters, // 岗位
				Status: status, // 记录状态
			}],
			pagination:[{
				pageSize: pageSize,
				currentPage: page,
				sortColumn: "Describe",
				sortOrder: "asc"
			}]
		}
		$http.post('urlS', this, {
			code: "2101",
			data: data,
			success: function (res) { 
				if (+res.errorCode === 0 && res.result) {
					// console.log(res)
					for(var i = 0; i < res.result.Data.length; i++) {
						res.result.Data[i].key = i;
						if (res.result.Data[i].StopDate === "") {
							res.result.Data[i].states = "生效";
						} else {
							let start = new Date();
							let end = new Date(res.result.Data[i].StopDate);
							if (start > end) {
								res.result.Data[i].states = "失效";
							} else {
								res.result.Data[i].states = "生效";
							}
						}
						
					}
					this.setState({tableData: res.result.Data, total: res.result.TotalCount, loading: false}, () => {
						// 数据加载成功关闭loading
						this.child.handleLoading()
					})
				} else {
					this.setState({tableData: [], total: 0, loading: false}, () => {
						// 数据加载成功关闭loading
						this.child.handleLoading();
					})
				}
			},
			error: function () {
				this.setState({tableData: [], total: 0, loading: false}, () => {
					// 数据加载成功关闭loading
					this.child.handleLoading();
				})
			}
		})
	}

	// 查询
	handleQuery = () => {
		this.setState({page: 1}, () => {
			let {status, name, quarters} = this.state;
			this.getTableData(name, status, quarters);
		})
	}

	// 新增跳转到新增界面
	handleAdd = () => {
		this.props.openWindowBySubTab({
			title: '新增角色',
			path: '/008/001',
			Paras: {
				targetKey: '新增角色',
				flag: 'add',
				selectData: this.state.selectData
			},
			component: "pages/roleManagement/AddRoleMaintenance.jsx"
		});
	}

	// 编辑
	handleCompile = (record) => {
		this.props.openWindowBySubTab({
			title: '编辑角色',
			path: '/008/001',
			Paras: {
				targetKey: '编辑角色',
				flag: 'compile',
				userInfo: record,
				selectData: this.state.selectData
			},
			component: "pages/roleManagement/AddRoleMaintenance.jsx"
		});
	}

	// 删除
	handleDelete = (record) => {
		let data = {
			params: [{
				ID: record.ID
			}]
		}
		$http.post('urlADS', this, {
			code: '2104',
			data: data,
			success: function (res) { 
				if (+res.errorCode === 0) {
					message.success('删除成功');
					// 刷新列表数据
					let {status, name, quarters} = this.state;
					this.getTableData(name, status, quarters);
				}
			}
		})
	}
  
	render() {
		// 组件所需参数
		const param = {
			// 表头配置
			columns: this.columns,
			// 表格数据
			data: this.state.tableData,
			// 数据总条数
			total: this.state.total,
			// 当前页数
			page: this.state.page,
			pageSize: "20",
			// 表格的宽度
			x: 900,
			y: store.getState().tableHeight.y + 114 - this.state.headerHeight,
			height: store.getState().tableHeight.y + 158 - this.state.headerHeight + 'px',
			loading: this.state.loading
		}
		return (
			<Spin tip="加载中..." spinning={this.state.showLoading}>
				<div>
					<div className="role-header">
						<Row style={{minHeight: '64px', padding: '0 24px'}}>
							<Col span={20}>
									角色名称：<Input title="输入内容后可回车检索" placeholder="请输入( Enter )" value={this.state.name} style={{width: '150px', margin: '23px 15px 0 0'}} onChange={this.onChangeName} onPressEnter={this.handleQuery} />
									岗位：<Select showSearch optionFilterProp="seatchprop" allowClear value={this.state.quarters} onChange={this.onChangeQuarters} style={{width: '150px', margin: '23px 15px 0 0'}} placeholder="请选择岗位">
															{this.state.selectData.post && this.state.selectData.post.map(item => {
																return <Option value={item.id} key={item.id} title={item.descripts} seatchprop={item.descripts}>{item.descripts}</Option>
															})}
														</Select>
									记录状态：<Select allowClear value={this.state.status} onChange={this.onChangeStatus} style={{width: '150px',  margin: '23px 15px 0 0'}} placeholder="请选择记录状态">
															{this.state.selectData.status && this.state.selectData.status.map(item => {
																return <Option value={item.id} key={item.id} title={item.descripts}>{item.descripts}</Option>
															})}
														</Select>
									<Button onClick={this.handleQuery} style={{ margin: '23px 15px 20px 0', background: 'rgba(255,255,255,1)'}}>查询</Button>
							</Col>
							<Col span={4} style={{textAlign: 'right'}}>
								<Button icon="plus" onClick={this.handleAdd} style={{background: 'rgba(247,128,93,1)', color: '#fff', margin: '23px 15px 0 0'}}>新增角色</Button>
							</Col>
						</Row>
					</div>
					<div style={{widht: '100%', height: '10px', background: '#f0f2f5'}}></div>
					<div style={{ padding: "24px 24px 12px 24px" }} className="table-body-height">
						{/* handelThis将夫组件的属性与方法给子组件访问 */}
						<PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} />
					</div>
				</div>
			</Spin>
		)
	}
}

