import React from 'react';
import { Select, Row, Col, Button, Divider, Popconfirm, message, Icon, Input, Spin } from 'antd';
import { $http } from 'containers/config/https';
import PubilcTablePagination from '../../common/PubilcTablePagination.jsx'; // 公共table组件
import Office from './Office';
import store from 'store';

const { Option } = Select;
export default class OfficeStaff extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			selectData: {},// 科室信息下拉框数据
			flag: '',
			title: '',
			code: '',  //工号
			descripts: '',  //人员姓名
			credTypeId: '', //证件类型
			credTypeData: [], //证件类型集合
			credNo: '', //证件号码
			active: '', //状态
			showLoading: true,
			// 表格数据
			tableData: [],
			// 表格数据总条数
			total: 0,
			page: 1,
			pageSize: 10,
			hiddenStatus: true,
		};
		this.columns = [
			{
				key: 1,
				title: '工号',
				dataIndex: 'userCode',
				align: "center",
				width: 100,
			},
			{
				key: 2,
				title: '姓名',
				dataIndex: 'userDesc',
				align: "center",
				width: 100
			},
			{
				key: 3,
				title: '性别',
				dataIndex: 'userSexDesc',
				align: "center",
				width: 100,
			},
			{
				key: 4,
				title: '手机号码',
				dataIndex: 'userMobile',
				align: "center",
				width: 120,
			},
			{
				key: 5,
				title: '证件类型',
				dataIndex: 'userCredTypeDesc',
				align: "center",
				width: 150,

			},
			{
				key: 6,
				title: '证件号码',
				dataIndex: 'userCredNo',
				align: "center",
				width: 150,
			},
			{
				key: 7,
				title: '状态',
				dataIndex: 'deptDocEffective',
				align: "center",
				width: 100,
				render(deptDocEffective) {
					let config = {
						'Y': '有效',
						'N': '失效'
					}
					return config[deptDocEffective];
				}
			},
			{
				key: 8,
				title: '处方权',
				dataIndex: 'deptPrescriberFlag',
				align: "center",
				width: 100,
				render(deptPrescriberFlag) {
					let config = {
						'Y': '是',
						'N': '否'
					}
					return config[deptPrescriberFlag];
				}
			},
			{
				key: 9,
				title: '无医嘱权',
				dataIndex: 'deptNoOrders',
				align: "center",
				width: 100,
				render(deptNoOrders) {
					let config = {
						'Y': '是',
						'N': '否'
					}
					return config[deptNoOrders];
				}
			},
			{
				key: 10,
				title: '无病历权',
				dataIndex: 'deptNoEMR',
				align: "center",
				width: 100,
				render(deptNoEMR) {
					let config = {
						'Y': '是',
						'N': '否'
					}
					return config[deptNoEMR];
				}
			},
			{
				key: 11,
				title: '无诊断权',
				dataIndex: 'deptNoDiagnosis',
				align: "center",
				width: 100,
				render(deptNoDiagnosis) {
					let config = {
						'Y': '是',
						'N': '否'
					}
					return config[deptNoDiagnosis];
				}
			},
			{
				key: 12,
				title: '抗生素处方权',
				dataIndex: 'deptAntibiotic',
				align: "center",
				width: 100,
				render(deptAntibiotic) {
					let config = {
						'Y': '是',
						'N': '否'
					}
					return config[deptAntibiotic];
				}
			},
			{
				key: 13,
				title: '毒麻药品处方权',
				dataIndex: 'deptAnaesthesia',
				align: "center",
				width: 100,
				render(deptAnaesthesia) {
					let config = {
						'Y': '是',
						'N': '否'
					}
					return config[deptAnaesthesia];
				}
			},
			{
				title: '操作',
				key: 14,
				width: 130,
				align: "center",
				fixed: 'right',
				render: (text, record) => (
					<span>
						<Icon type="edit" style={{ color: '#108EE9' }}></Icon>
						<span className='span' onClick={() => this.handleEdit(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() {
		// 组件加载完毕关闭loading
		this.setState({ showLoading: false })
		if (this.props.locID !== '') {
			// 初始化列表数据
			this.handleQuery()
			this.credTypeList();
		}
	}

	// 关闭列表加载中
	closeListLoading() {
		// 数据加载成功关闭loading
		this.child.handleLoading();
	}

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

	// 新增人员跳转到查找界面
	handSave() {
		this.setState({
			hiddenStatus: false,
			dataSource: {},
		})
	}

	// 人员列表跳转到编辑页面
	handleEdit = (record) => {
		this.setState({
			editStauts: true,
			hiddenStatus: false,
			dataSource: record

		})
	}

	handleFind = (record) => {
		this.setState({
			dataSource: record
		})
	}

	// 查询条件 --- 工号
	onChangeCode = (e) => {
		this.setState({ code: e.target.value });
	}

	// 查询条件 --- 用户姓名
	onChangeDescripts = (e) => {
		this.setState({ descripts: e.target.value });
	}

	// 查询条件 --- 证件类型
	onChangeCredType = (e) => {
		this.setState({ credTypeId: e });
	}

	// 查询条件 --- 证件号码
	onChangeCredNo = (e) => {
		this.setState({ credNo: e.target.value });
	}

	// 查询条件 --- 状态
	onChangeActive = (e) => {
		this.setState({ active: e });
	}

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

	// 查询
	handleQuery = () => {
		let { page, pageSize } = this.state;
		let user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
		let data = {
			params: [{
				power: 'list',
				hospID: user.hospID,//医院Id
				locID: this.props.locID,//科室ID
				userCode: this.state.code || '',//用户工号
				userDesc: this.state.descripts || '',//姓名
				userCredTypeID: this.state.credTypeId || '',//证件类型
				userCredNo: this.state.credNo || '',//证件号码
				deptEffective: this.state.active || '',//状态
			}],
			pagination: [{
				pageSize: pageSize,
				currentPage: page,
				sortColumn: 'code',
				sortOrder: 'asc'
			}]
		};
		$http.post('urlS', this, {
			code: "01040021",
			data: data,
			success: function (res) {
				this.closeListLoading()
				let errorCode = res.errorCode;
				if (errorCode === '0') {
					this.setState({
						tableData: res.result.Data,
						total: res.result.TotalCount,
						//credTypeData: res.result.CBCredType
					})
				} else {
					this.setState({
						tableData: [],
						total: 0
					})
				}
			}
		});
	}

	// 删除用户
	handleDelete = (record) => {
		let data = {
			params: [{
				deptDocLogID: record.deptDocLogID,
				updateUserID: JSON.parse(window.sessionStorage.userData).userID,
			}]
		};
		$http.post('urlADS', this, {
			code: "01040026",
			data: data,
			success: function (res) {
				let errorCode = res.errorCode;
				if (errorCode === '0') {
					message.success(res.errorMessage);
					this.handleQuery() // 查询
				}
			}
		});
	}

	// 证件类型加载
	credTypeList = () => {
		let data = {
			params: [{
				code: '',
			}]
		};
		//debugger
		$http.post('urlS', this, {
			code: "01040036",
			data: data,
			success: function (res) {
				let errorCode = res.errorCode;
				if (errorCode === '0') {
					this.setState({
						credTypeData: res.result
					})
				}
			}
		});
	}

	goback() {
		this.setState({
			hiddenStatus: true
		})
	}

	render() {
		// 组件所需参数
		const param = {
			// 表头配置
			columns: this.columns,
			// 表格数据
			data: this.state.tableData,
			// 数据总条数
			total: this.state.total,
			page: this.state.page,
			// 表格的宽度
			x: 900,
			y: store.getState().tableHeight.y - 36,
			height: store.getState().tableHeight.y + 14 + 'px',
		}
		return (
			<div>{this.state.hiddenStatus ? (
				//<Spin tip="加载中..." spinning={!this.state.showLoading}>
				<div style={{ width: '100%', height: '100%' }}>
					<div>
						{/* {this.state.hiddenStatus?null:<Office data={this.state.data} editStauts={this.state.editStauts}></Office>} */}
						<div className="table-operations">
							<Row style={{ minHeight: '80px', padding: '0 24px 24px 24px' }}>
								<Col span={20}>
									用户工号：<Input allowClear={true} value={this.state.code} onChange={this.onChangeCode} placeholder="请输入" style={{ width: '130px', margin: '23px 15px 0 0' }} />
									人员姓名：<Input allowClear={true} value={this.state.descripts} onChange={this.onChangeDescripts} placeholder="请输入" style={{ width: '130px', margin: '23px 15px 0 0' }} />
									证件类型：<Select allowClear value={this.state.credTypeId} onChange={this.onChangeCredType} style={{ width: '150px', margin: '23px 15px 0 0' }} placeholder="请输入证件类型">

										{this.state.credTypeData && this.state.credTypeData.map(item => <Option key={item.id}>{item.descripts}</Option>)}
									</Select>
									证件号码： <Input allowClear={true} value={this.state.credNo} onChange={this.onChangeCredNo} placeholder="请输入" style={{ width: '190px', margin: '23px 15px 0 0' }} />
									状态： <Select allowClear value={this.state.active} onChange={this.onChangeActive} style={{ width: '80px', margin: '23px 15px 0 0' }} placeholder="请输入状态">
										<Option value="">全部</Option>
										<Option value="Y">有效</Option>
										<Option value="N">失效</Option>
									</Select>
									<Button onClick={this.handleQuery} style={{ margin: '23px 15px 0 0', background: 'rgba(255,255,255,1)' }}>查询</Button>
								</Col>

								<Col span={4} style={{ textAlign: 'right' }}>
									<Button icon="plus" onClick={this.handSave.bind(this)} 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: 24 }} className="table-body-height">
							<PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} flag={this.state.flag} title={this.state.title} />
						</div>
					</div>
					<div>
					</div>
				</div>
				//</Spin>
			) : (
				<Office
					handleThis={this}
					editStauts={this.state.editStauts}
					goback={this.goback.bind(this)}
					locID={this.props.locID}
					handleFind={this.handleFind}
					changeEditStatus={() => this.setState({ editStauts: false })}
					dataSource={this.state.dataSource || {}}>
				</Office>
			)}
			</div>
		)
	}
}
