/*
 * Creater:     gjg
 * CreateDate:  2022/07/18
 * Describe：   验光查询
 * */
import React, { Component } from 'react';
import { Row, Col, Button, Card, message } from 'antd';
import { Util } from 'tools';
import { dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import moment from 'moment';
import PubilcTablePagination from 'pages/common/PubilcTablePagination.jsx';
import RangeDatePicker from 'components/rangePicker/index';
import iconListvisits from 'assets/images/icon_listvisits.png';
import './style/index.less';

class RefractionResultQuery extends Component {
	constructor(props) {
		super(props);
		var date = new Date();
		var userData = React.$getSessionData();
		var titleData = React.$getSessionData('titleData');
		this.state = {
			userData: userData,
			titleData: titleData,
			mainTableData: [],
			mainFormData: [], // 主表表单数据
			mainTotal: 0,
			mainPage: 1,
			mainPageSize: 20,
			mainLoading: false,
			rowID: '',
			rowData: {},
			startDate: moment(date).format(dayFormat),  // //开始日期
			endDate: moment(date).format(dayFormat),  // //结束日期
		};

		// 主表表头数据
		this.mainColumns = [{
			key: 1,
			title: '验光单号',
			dataIndex: 'optometryNo',
			align: "center",
			width: "100px"
		}, {
			key: 2,
			title: '开单医生',
			dataIndex: 'billingDoctorDesc',
			align: "center",
			width: "100px"
		}, {
			key: 3,
			title: '验光师',
			dataIndex: 'optometristDesc',
			align: "center",
			width: "100px"
		}, {
			key: 4,
			title: '验光时间',
			dataIndex: 'optometryDateTime',
			align: "center",
			width: "100px"
		}, {
			key: 5,
			title: '验光备注',
			dataIndex: 'optometryRemark',
			align: "center",
			width: "100px"
		}, {
			key: 6,
			title: '验光修改人',
			dataIndex: 'optometristUpdateDesc',
			align: "center",
			width: "100px"
		}, {
			key: 7,
			title: '验光修改时间',
			dataIndex: 'optometristUpdateDateTime',
			align: "center",
			width: "100px"
		}, {
			key: 8,
			title: '处方医生',
			dataIndex: 'prescriptionDesc',
			align: "center",
			width: "100px"
		}, {
			key: 9,
			title: '开处方时间',
			dataIndex: 'prescriptionDateTime',
			align: "center",
			width: "100px"
		}, {
			key: 10,
			title: '处方备注',
			dataIndex: 'prescriptionRemark',
			align: "center",
			width: "100px"
		}, {
			key: 11,
			title: '处方修改人',
			dataIndex: 'prescriptionUpdateDesc',
			align: "center",
			width: "100px"
		}, {
			key: 12,
			title: '处方修改时间',
			dataIndex: 'prescriptionUpdateDateTime',
			align: "center",
			width: "100px"
		}];
	}

	componentDidMount() {
		this.getTableColumns();
		this.handleQuery();
		if (Util.isEmpty(this.state.titleData?.patNo)) {
			message.warn('未选择患者信息');
		}
	}

	// 获取主列表columns
	getTableColumns = () => {
		let data = {
			params: [{
				compontName: 'RefractionResultQuery',
				type: 'C',
			}]
		}
		$http.post('urlS', this, {
			code: '01040073',
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					let columns = res.result && res.result.C.length > 0 ? res.result.C : '';
					if (columns && columns.length > 0) {
						this.setState({ columns, totalWidth: res.totalWidth });
					}
				}
			}
		})
	}

	handleQuery = () => {
		this.setState({ mainPage: 1, mainLoading: true }, () => {
			this.getTableData();
		})
	}


	// 提供修改page和pageSize的回调函数
	handleCompilePage = (page, pageSize) => {
		// 修改page，或者pageSize
		this.setState({ mainPage: page, mainPageSize: pageSize, mainLoading: true }, () => {
			// 重新调用查询方法
			this.getTableData();
		})
	}

	// 请求列表数据
	getTableData = async () => {
		try {
			let { startDate, endDate, mainPage, mainPageSize, titleData } = this.state;
			let data = {
				params: [{
					startDate,
					endDate,
					patNo: titleData.patNo
				}],
				pagination: [{
					pageSize: mainPageSize,
					currentPage: mainPage
				}]
			}
			let res = await React.$asyncPost(this, '17020001', data);
			let mainTableData = res.result && 'rows' in res.result ? Util.addKeyValueToDataSource(res.result.rows) : [];
			this.setState({ mainTableData, mainTotal: res.result.total, mainLoading: false });
		} catch (error) {
			this.setState({ mainTableData: [], mainTotal: 0, mainLoading: false });
		}
	}

	// 操作行
	onClickRowPublic = (record) => {
		return {
			// 单击行选中
			onClick: () => {
				if (this.state.rowID === '') {
					// 保存行数据以及ID
					this.setState({ rowID: record.key, rowData: record });
				} else {
					if (this.state.rowID !== record.key) {
						this.setState({ rowID: record.key, rowData: record });
					} else {
						this.setState({ rowID: "", rowData: {} });
					}
				}
			}
		}
	}

	// 选中行操作
	setRowClassNamePublic = (record) => {
		return record.key === this.state.rowID ? 'clickRowStyle' : '';
	}

	//开始日期
	startChange(date) {
		this.setState({
			startDate: date,
		})
	}

	//结束日期
	endChange(date) {
		this.setState({
			endDate: date,
		})
	}

	render() {
		let { mainTableData, mainTotal, mainPage, mainLoading, columns, rowData } = this.state;
		// 组件所需参数
		const mainParam = {
			// 表头配置
			columns: columns ? columns : this.mainColumns,
			// 表格数据
			data: mainTableData,
			// 数据总条数
			total: mainTotal,
			// 当前页数
			page: mainPage,
			pageSize: "20",
			// 表格的宽度
			x: 750,
			y: 450,
			height: 500 + "px",
			isOnRow: true,
			rowClassName: true,
			loading: mainLoading,
		};

		return (
			<div>
				<Row className="refraction-result-query">
					<Col span={12}>
						<div style={{ paddingRight: '6px', position: 'relative' }}>
							<Card
								size="small"
								title={
									<div className="card-title-left-img">
										<img src={iconListvisits} alt="" />
										验光数据列表
									</div>
								}
							>
								<div className="table-body-height">
									<div style={{ marginBottom: '12px', display: 'flex' }}>
										<RangeDatePicker
											isChange={true}
											label={this.state.userData.language == 'EN' ? '	Refraction date：' : '验光日期：'}
											format='YYYY-MM-DD' width={300}
											startDate={this.state.startDate}
											endDate={this.state.endDate}
											startChange={this.startChange.bind(this)}
											endChange={this.endChange.bind(this)} />
										<Button style={{ marginLeft: '20px' }} onClick={this.handleQuery}>查询</Button>
									</div>
									<PubilcTablePagination
										param={mainParam}
										compilePage={this.handleCompilePage}
										onClickRowPublic={this.onClickRowPublic}
										setRowClassNamePublic={this.setRowClassNamePublic}
									/>
								</div>
							</Card>
							<div
								style={{
									width: '6px',
									background: 'rgba(240, 242, 245, 1)',
									position: 'absolute',
									top: 0,
									right: 0,
									height: '100%',
								}}
							></div>
						</div>
					</Col>
					<Col span={12}>
						<Card
							size="small"
							title={
								<div className="card-title-left-img">
									<img src={iconListvisits} alt="" />
									验光数据明细
								</div>
							}
						>
							<div className="table-body-height">
								<div style={{ marginBottom: '12px' }}>
									<div style={{ padding: '10px', fontSize: '16px' }}>
										屈光检验结果:
									</div>
									<div className="table-show">
										<table>
											<tbody>
												<tr>
													<th></th>
													<th>裸眼视力</th>
													<th>球面镜</th>
													<th>柱镜</th>
													<th>轴位</th>
													<th>矫正视力</th>
												</tr>
												<tr>
													<td>右</td>
													<td>{rowData.nakedVisionRight || ''}</td>
													<td>{rowData.sphericalMirrorRight || ''}</td>
													<td>{rowData.columnMirrorRight || ''}</td>
													<td>{rowData.axialPositionRight || ''}</td>
													<td>{rowData.correctedVisionRight || ''}</td>
												</tr>
												<tr>
													<td>左</td>
													<td>{rowData.nakedVisionLeft || ''}</td>
													<td>{rowData.sphericalMirrorLeft || ''}</td>
													<td>{rowData.columnMirrorLeft || ''}</td>
													<td>{rowData.axialPositionLeft || ''}</td>
													<td>{rowData.correctedVisionLeft || ''}</td>
												</tr>
											</tbody>
										</table>
									</div>
									<div style={{ padding: '10px', fontSize: '16px' }}>
										配镜处方:
									</div>
									<div className="table-show">
										<table>
											<tbody>
												<tr>
													<th colSpan="2"></th>
													<th>球面镜</th>
													<th>柱镜</th>
													<th>轴位</th>
													<th>棱镜</th>
													<th>棱镜底</th>
													<th>矫正视力</th>
												</tr>
												<tr>
													<td rowSpan="2">远用</td>
													<td>右</td>
													<td>{rowData.farSphericalMirrorRight || ''}</td>
													<td>{rowData.farColumnMirrorRight || ''}</td>
													<td>{rowData.farAxialPositionRight || ''}</td>
													<td>{rowData.farPrismRight || ''}</td>
													<td>{rowData.farPrismBaseRight || ''}</td>
													<td>{rowData.farCorrectedVisionRight || ''}</td>
												</tr>
												<tr>
													<td>左</td>
													<td>{rowData.farSphericalMirrorLeft || ''}</td>
													<td>{rowData.farColumnMirrorLeft || ''}</td>
													<td>{rowData.farAxialPositionLeft || ''}</td>
													<td>{rowData.farPrismLeft || ''}</td>
													<td>{rowData.farPrismBaseLeft || ''}</td>
													<td>{rowData.farCorrectedVisionRLeft || ''}</td>
												</tr>
												<tr>
													<td rowSpan="2">近用</td>
													<td>右</td>
													<td>{rowData.nearSphericalMirrorRight || ''}</td>
													<td>{rowData.nearColumnMirrorRight || ''}</td>
													<td>{rowData.nearAxialPositionRight || ''}</td>
													<td>{rowData.nearPrismRight || ''}</td>
													<td>{rowData.nearPrismBaseRight || ''}</td>
													<td>{rowData.nearCorrectedVisionRight || ''}</td>
												</tr>
												<tr>
													<td>左</td>
													<td>{rowData.nearSphericalMirrorLeft || ''}</td>
													<td>{rowData.nearColumnMirrorLeft || ''}</td>
													<td>{rowData.nearAxialPositionLeft || ''}</td>
													<td>{rowData.nearPrismLeft || ''}</td>
													<td>{rowData.nearPrismBaseLeft || ''}</td>
													<td>{rowData.nearCorrectedVisionRLeft || ''}</td>
												</tr>
											</tbody>
										</table>
									</div>
									<div style={{ padding: '10px', fontSize: '16px' }}>
										其他信息：
									</div>
									<div>
										<div style={{ marginBottom: '10px' }}>验光状态：{rowData.optometricState || ''}</div>
										<div>远用瞳孔距离：{rowData.farPupilDistance || ''}</div>
									</div>
								</div>
							</div>
						</Card>
					</Col>
				</Row>
			</div>
		)
	}
};

export default RefractionResultQuery;