// 坐诊医生列表
import React from 'react';
import { Row, Col, Select, Table, Input, Button } from 'antd';
import store from 'store';
import { $http } from 'containers/config/https';

let { Option } = Select;
const InputGroup = Input.Group;

export default class DoctorList extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			selectData: {}, // 下拉框数据
			doctorRowData: {}, // 医生列表选中行数据
			doctorRowId: '', // 医生列表选中行id
			rowId: '', // 选中行id
			bookMethodDetail: [],
			tableDataRight: [],
			hospitalData: [], // 所属医院
			departmentData: [], // 所属科室
			doctorData: [], // 坐诊医生
			departId: undefined, // 坐诊医生value
			department: this.props.locID ? this.props.locID : undefined, // 所属科室
			hospID: undefined, // 所属医院
			TemplateMessageData: [], // 右侧模板数据
			roomData: [], //坐诊诊室
			sumData: [], // 排版类型
			user: {}, // user数据
		};
		this.columns = [
			{
				title: '医生姓名',
				dataIndex: 'descripts',
				key: '1',
				align: 'center',
				width: '50%'
			}, {
				title: '所属科室',
				dataIndex: 'title',
				key: '2',
				align: 'center'
			}
		];
		// 左表格---columns
		this.columnsLeft = [{
			title: '渠道名称',
			dataIndex: 'descripts',
			key: '1',
			align: 'center',
			width: '50%'
		}, {
			title: '占用号源',
			dataIndex: 'age',
			key: '2',
			align: 'center'
		}];
		// 右表格---columns
		this.columnsRight = [{
			title: '时段',
			dataIndex: 'timeRange',
			key: '1',
			align: 'center',
			width: '25%'
		}, {
			title: '开始时段',
			dataIndex: 'startTime',
			key: '2',
			align: 'center',
			width: '25%'
		},{
			title: '结束时段',
			dataIndex: 'stopTime',
			key: '3',
			align: 'center',
			width: '25%'
		}, {
			title: '分发号数目',
			dataIndex: 'appointNum',
			key: '4',
			align: 'center'
		}]
	}

	componentDidMount() {
		// 初始化列表数据
		this.initState()
	}

	initState() {
		let user = sessionStorage ? JSON.parse(sessionStorage.getItem('userData')) : {};
		this.setState({user, hospID: user&&user.hospID ? user.hospID: undefined}, () => {
			// console.log(this.props.locid)
			this.loadHospitalMsg();
			this.getDepartment(this.state.user&&this.state.user.hospID ? this.state.user.hospID : '');
			this.getDoctor();
			this.getDoctorListData();
			this.getClinicInformation(); // 获取坐诊诊室
		})
	}

	// 获取所属科室
    getDepartment(hospID) {
		var params = {
            params: [{
                hospID: hospID,
            }]
        }
        $http.post('urlS', this, {
            code: "03020046",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({ departmentData: res.result.Data })
                }
            }
        })
	}
	
	//获取坐诊医生
    getDoctor() {
		let {user} = this.state;
        var data = {
            params: [{
				hospID: this.state.hospID ? this.state.hospID : (user&&user.hospID ? user.hospID : ''), // 医院id
				locID: this.state.department ? this.state.department: this.props.locid, // 科室id
				groupID: user&&user.groupID ? user.groupID : "", // 角色id
				depDoctorID: "", // 科室医生id
			}]
        }
        $http.post('urlS', this, {
            code: "03020049",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({
                        doctorData: res.depDoctor
                    })
                }
            }
		});
	}

	// 查询条件 ---  坐诊医生
	onChangeDoctorList = (e) => {
		this.setState({ departId: e }, () => {
			this.getDoctorListData()
			this.getDoctor()
		});
	}

	// 查询条件 ---  所属科室
	onChangedepartment = (e) => {
		this.setState({ department: e, departId: undefined }, () => {
			this.getDoctorListData()
			this.getDoctor()
		});
	}

	// 查询条件 ---  所属医院
	onChangehospID = (e) => {
		this.setState({ hospID: e, department: undefined, departId: undefined }, () => {
			this.getDoctorListData()
			this.getDoctor()
		});
	}
	
	// 获取医生列表数据
	getDoctorListData = () => {
		let {user} = this.state;
		var data = {
            params: [{
				hospID: this.state.hospID ? this.state.hospID : (user&&user.hospID ? user.hospID : ''), // 医院id
				locID: this.state.department ? this.state.department: this.props.locid, // 科室id
				groupID: user&&user.groupID ? user.groupID : "", // 角色id
				depDoctorID: this.state.departId, // 科室医生id
            }]
        }
        $http.post('urlS', this, {
            code: "03020049",
            data: data,
            success: function (res) {
				// console.log(res)
                if (+res.errorCode === 0) {
					for(let i = 0; i < res.depDoctor.length; i++) {
						res.depDoctor[i].key = i;
					}
                    this.setState({
                        doctorListData: res.depDoctor
                    })
                }
            }
        });
	}

	// 设置医生列表行属性
	onClickDoctorRow = (record) => {
		return {
			// 单击行选中
			onClick: () => {
				if (this.state.doctorRowId === '') {
					// 保存行数据以及ID
					this.setState({doctorRowId: record.id, doctorRowData: record}, () => {
						this.getTemplateMessage(record.depDoctorID, record.hospId)
					});
				} else {
					if (this.state.doctorRowId !== record.id) {
						this.setState({doctorRowId: record.id, doctorRowData: record}, () => {
							this.getTemplateMessage(record.depDoctorID, record.hospId)
						})
					} else {
						this.setState({doctorRowId: "", doctorRowData: {}, TemplateMessageData: []})
					}
				}
			}
		}
	}

	// 医生列表行的类名
	setDoctorRowClassName = (record) => {
		return record.id === this.state.doctorRowId ? 'clickRowStyle' : '';
	}

	// 3.11.19.获取排班模版信息（默认设置）
    getTemplateMessage(depDoctorID, hospId) {
		let {user} = this.state;
        var data = {
            params: [{
				depDoctorID: depDoctorID ? depDoctorID: undefined, // 科室医生id
				hospID: hospId ? hospId: (user&&user.hospId ? user.hospId : ''), // 医院id
			}]
        }
        $http.post('urlS', this, {
            code: "03020032",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({TemplateMessageData: res.resModel})
                } else {
					this.setState({TemplateMessageData: []})
				}
            }
        });
	}

	// 获取诊室信息
	getClinicInformation() {
		let data = {
			params: [
				{
					hospID: this.state.hospID
				}
			]
		}
		$http.post('urlS', this, {
            code: "01040023",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
					this.setState({roomData: res.room})
                }
            }
        });
	}

	//获取坐诊类型
    loadscheduType() {
        var data = {
            params: [
                { hospID: this.state.hospID }
            ],
            pagination: [{
                pageSize: 1000,
                currentPage: 1
            }]
        }
        $http.post('urlS', this, {
            code: "03020004",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({
                        sumData: res.result.Data,
                    })
                }
            }
        });
	}
	
	//获取所属医院
	loadHospitalMsg() {
		let {user} = this.state;
		var data = {
			params: [{
				hospID: '', // 医院id
				logonGroupID: user&&user.groupID ? user.groupID : '', //登录角色id
				logonHospID: user&&user.hospID ? user.hospID : '', // 登录医院id
			}]
		}
		$http.post('urlS', this, {
			code: "01040001",
			data: data,
			success: function (res) {
				// console.log(res)
				if (+res.errorCode === 0) {
					this.setState({
						hospitalData: res.depDoctor
					})
				}
			}
		});
	}

	// 设置行属性
	onClickRow = (record) => {
		return {
			// 单击行选中
			onClick: () => {
				if (this.state.rowId === '') {
					// 保存行数据以及ID
					this.setState({rowId: record.methodId})
				} else {
					if (this.state.rowId !== record.methodId) {
						this.setState({rowId: record.methodId})
					}
				}
			}
		}
  	}
  
	// 表格行的类名
	setRowClassName = (record) => {
		return record.methodId === this.state.rowId ? 'clickRowStyle' : '';
	}

	render() {
		let arrDom = []
		this.state.TemplateMessageData&&this.state.TemplateMessageData.map((item, index) => {
			arrDom.push(
				<div style={{margin: ' 30px 0 0 8px', }} key={index}>
					<Row style={{marginBottom: '10px'}}>
						<span key={index}>开放号源({item.timeRange})&nbsp;&nbsp;&nbsp;&nbsp;</span>
						<span key={index + '-1'}>总计&nbsp;&nbsp;{item.registNum || '0'} </span>
						<span key={index + '-3'}>&nbsp;&nbsp;&nbsp;&nbsp;预约限号&nbsp;&nbsp;{item.appointNum || '0'} </span>
					</Row>
					<Row style={{display: 'flex'}}>
						<div style={{marginRight: '10px'}}>
							<div>排班类型：</div>
							<Select value={item.regTitleID ? item.regTitleID : undefined} placeholder="请选择排班类型" style={{ width: '120px' }} disabled>
								{this.state.sumData && this.state.sumData.map((data, index) => {
									return <Option value={data.id} title={item.descripts} key={data.id + ''}>{data.descripts}</Option>
								})}
							</Select>
						</div>
						<div style={{marginRight: '10px'}}>
							<div>时间间隔：</div>
							<Select value={item.timeIntervalID ? item.timeIntervalID : undefined} placeholder="请选择时间间隔" style={{ width: '120px' }} disabled>
								{item.intervalList && item.intervalList.map((data, index) => {
										return (<Option value={data.id} title={item.timeLength} key={data.id + ''}>{data.timeLength || '全时段'}</Option>)
								})}
							</Select>
						</div>
						<div style={{display: 'flex', marginRight: '10px'}}>
							{item.detail && item.detail.map((newData, code) => {
								return (
									<span key={code}>
										<div>{newData.timeRangDetail}</div>
										<div>
											<InputGroup compact style={{ width: '140px' }}>
												<Input placeholder='号源数' style={{ width: '65px' }} value={newData.registNum ? newData.registNum : ''} disabled />
												<Input placeholder='可预约数' style={{ width: '65px' }} value={newData.appointNum ? newData.appointNum : ''} disabled />
											</InputGroup>
										</div>
									</span>
								)
						})}</div>
					</Row>
				</div>
			)
		})
		return (
			<div className="doctor-list" style={{padding: '24px', height: store.getState().tableHeight.y + 178 + 'px', overflow: 'auto'}}>
				<Row>
					<Col span={8} style={{border: '1px solid #ccc', padding: '10px 24px'}}>
						<Row gutter={16} style={{marginBottom: '8px', marginLeft: '0px', marginRight: '0px'}}>
							所属医院：<Select allowClear showSearch optionFilterProp="seatchprop" value={this.state.hospID} onChange={this.onChangehospID} style={{width: '60%', marginRight: '15px'}} placeholder="请选择所属医院">
										{this.state.hospitalData && this.state.hospitalData.map(item => {
											return <Option key={item.id} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
										})}
									</Select>
						</Row>
						<Row gutter={16} style={{marginBottom: '8px', marginLeft: '0px', marginRight: '0px'}}>
							所属科室：<Select allowClear showSearch optionFilterProp="seatchprop" value={this.state.department} onChange={this.onChangedepartment} style={{width: '60%', marginRight: '15px'}} placeholder="请选择所属科室">
										{this.state.departmentData && this.state.departmentData.map(item => {
											return <Option key={item.id} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
										})}
									</Select>
						</Row>
						<Row gutter={16} style={{marginBottom: '24px', marginLeft: '0px', marginRight: '0px'}}>
							坐诊医生：<Select allowClear showSearch optionFilterProp="seatchprop" value={this.state.departId} onChange={this.onChangeDoctorList} style={{width: '60%',  marginRight: '15px'}} placeholder="请选择坐诊医生">
										{this.state.doctorData && this.state.doctorData.map(item => {
											return <Option key={item.id} value={item.depDoctorID} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
										})}
									</Select>
						</Row>
						医生列表：
						<Table
							style={{height: store.getState().tableHeight.y - 60 + 'px', overflow: 'scroll', marginTop: '8px'}}
							columns={this.columns}
							dataSource={this.state.doctorListData}
							pagination={false}
							bordered
							showHeader={false}
							onRow={this.onClickDoctorRow}
							rowClassName={this.setDoctorRowClassName}
						/>
					</Col>
					<Col span={16} style={{height: store.getState().tableHeight.y + 130 + 'px', overflowY: 'auto'}}>
						<Row gutter={16} style={{marginLeft: '8px', marginRight: '0px'}}>
							坐诊医生：<Input value={this.state.doctorRowData ? this.state.doctorRowData.descripts : ''} style={{marginRight: '30px', width: '150px'}} disabled />
							坐诊诊室：<Select disabled value={this.state.TemplateMessageData&&this.state.TemplateMessageData.length > 0 ? this.state.TemplateMessageData[0].roomId : ''} style={{width: '150px', marginRight: '15px'}} placeholder="请选择坐诊诊室">
										{this.state.roomData && this.state.roomData.map(item => {
											return <Option key={item.id} value={item.id} title={item.descripts}>{item.descripts}</Option>
										})}
									</Select>
						</Row>

						{arrDom}

						<div style={{marginTop: '30px'}}>
							<Row gutter={16} style={{marginLeft: '0px', marginRight: '0px'}}>
								<Col span={8}>
									<Table
									style={{height: '335px', overflow: 'scroll'}}
									columns={this.columnsLeft}
									dataSource={this.state.bookMethodDetail}
									pagination={false}
									bordered
									onRow={this.onClickRow}
									rowClassName={this.setRowClassName}
									/>
								</Col>
								<Col span={16}>
									<Table
									style={{height: '335px', overflow: 'scroll'}}
									columns={this.columnsRight}
									dataSource={this.state.tableDataRight}
									pagination={false}
									bordered
									/>
								</Col>
							</Row>
						</div>
					</Col>
				</Row>
			</div>
		)
	}
};