/*
 * Create:      DYK
 * CreateDate:  2022/07/21
 * Describe：   视光验光单数据查询 - 门诊医生工作站
 * */
import React, { Component } from 'react';
import { Button, Input, message } from 'antd';
import { Util } from 'tools';
import { $http } from '../../containers/config/https';
import store from 'store';
import moment from 'moment';
import RangeDatePicker from 'components/rangePicker/index';
import PublicTablePagination from 'pages/common/PubilcTablePagination';
import './style/OptometryDataQuery.less';

class OptometryDataQuery extends Component {
	constructor(props) {
		super(props);
		this.state = {
			pageSize: 10,
			page: 1,
			total: 0,
			loading: false,
			totalWidth: 3100,
			patNo: '', // 患者登记号
			startDate: moment().format('YYYY-MM-DD'), // 开始时间
			endDate: moment().format('YYYY-MM-DD'), // 结束时间
			optometryDataList: [], // 视光数据列表
		}
	}

	componentDidMount() {
		this.getOptometryDataColumns();
		this.getOptometryData('N');
	}

	// 视光数据表头
	getOptometryDataColumns = () => {
		let data = {
			params: [{
				compontName: 'OptometryDataQuery',
				type: 'C',
			}]
		};
		$http.post('urlS', this, {
			code: '01040073',
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					let arr = res.result.C && res.result.C.length > 0 ? res.result.C : [];
					let filterArr = arr.filter(function (item) { return item.display === 'Y' });
					this.setState({ tableColumns: filterArr });
				}
			}
		})
	};

	// 查询
	handleQuery = () => {
		this.setState({ page: 1 }, () => {
			this.getOptometryData();
		})
	}

	// 获取视光数据 - 点查询不能直接调用这个方法，要考虑到如果页数变了就会有问题，得先将页数变为1
	getOptometryData = (isTips) => {
		let { pageSize, page, patNo, startDate, endDate } = this.state;
		let data = {
			params: [{
				patNo: patNo,
				startDate: startDate,
				endDate: endDate
			}],
			code: '17020001',
			pagination: [{
				pageSize: pageSize,
				currentPage: page,
				sortColumn: '',
				sortOrder: ''
			}]
		};
		$http.post('urlDeault', this, {
			code: '17020001',
			data: data,
			success: (res) => {
				if (+res.errorCode === 0) {
					let optometryDataList = res.result && 'rows' in res.result && Array.isArray(res.result.rows) ? Util.addKeyValueToDataSource(res.result.rows) : [];
					this.setState({ optometryDataList, total: res.result?.total || 0 })
					if (!(optometryDataList && optometryDataList.length > 0)) {
						isTips === 'N' ? '' : message.error('未查询到数据');
					}
				}
			}
		})
	};

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

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

	//绑定病人登记号
	changePatNo = (e) => {
		this.setState({
			patNo: (e.target.value).trim()
		})
	};

	// 提供修改page和pageSize的回调函数
	compilePage = (page, pageSize) => {
		this.setState({ page, pageSize }, () => {
			this.getOptometryData();
		})
	};

	// 显示分页总条数
	showTotal = (total) => {
		return `共 ${total} 条`;
	};

	render() {
		let { tableColumns, optometryDataList, page, total, loading, totalWidth, startDate, endDate, patNo } = this.state;

		return (
			<div>
				<div className="query-table-header">
					<div style={{ display: 'inline-block', marginRight: 15 }}>
						<RangeDatePicker
							width={300}
							label="日期："
							format="YYYY-MM-DD"
							endDate={endDate}
							startDate={startDate}
							endChange={this.endChange}
							startChange={this.startChange}
						/>
					</div>
					登记号:
					<Input
						allowClear
						placeholder="输入后回车查询"
						className="select-style-input"
						value={patNo}
						onChange={this.changePatNo}
						onPressEnter={this.handleQuery}
					/>
					<Button type="primary" onClick={this.handleQuery}>查 询</Button>
				</div>
				<div className="common-query-split-line"></div>
				<div style={{ padding: 24 }}>
					<PublicTablePagination
						param={{
							page,
							total,
							loading,
							x: totalWidth,
							data: optometryDataList,
							rowKey: 'optometryNo',
							componentName: 'OptometryDataQuery',
							y: store.getState().tableHeight.y + 32,
							height: store.getState().tableHeight.y + 82 + 'px',
							columns: tableColumns,
						}}
						compilePage={this.compilePage}
						getColumns={this.getOptometryDataColumns}
					/>
				</div>
			</div>
		)
	}
};

export default OptometryDataQuery;