import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Button, Table, Pagination, Row, Col, Select, Modal, DatePicker } from 'antd';
import '@common/common.less';
import apiObj from '@api/index';
import moment from "moment";
import "moment/locale/zh-cn"
import { message } from "antd/lib/index";
import { disabledDate } from '@utils/index'
const { post, api, xPost } = apiObj;
const { RangePicker } = DatePicker;
const { Option } = Select;
function DutyRecord() {
	useEffect(() => {
		getDutyRecord();
	}, []);
	const [logList, setLogList] = useState([]);
	const [total, setTotal] = useState(0);
	const [visible, setVisible] = useState(false);
	const [size, setSize] = useState(15);
	const [current, setCurrent] = useState(1);
	const [selectedRowKeys, setSelectedRowKeys] = useState([]);
	const [params, setParams] = useState({
		pages: 1,
		current: 1,
		size: 15
	});
	const [form] = Form.useForm();
	const typeMap = {
		'1': '职务变更',
		'2': '职称变更'
	};
	let data = {
		pages: 1,
		current: 1,
		size: size
	}
	//表格数据
	function getDutyRecord(param) {
		post(api.getOfficialCapacityPage, param || params).then((res) => {
			if (res.data.code === 200) {
				const data = res.data.data;
				setLogList(data.records);
				setTotal(data.total)
			}
		})
	}
	//删除记录
	function delRecord() {
		post(api.delOfficialCapacityPage, { id: selectedRowKeys }).then((res) => {
			if (res.data.code === 200) {
				//刷新列表
				getDutyRecord()
			} else {
				message.warning(res.data.msg || '操作失败，请重试~');
			}
		});
		showDelModal(false);
	}
	//删除弹窗确认
	function showDelModal(flag) {
		console.log(selectedRowKeys)
		if (flag && !selectedRowKeys.length) {
			message.warning("请先选择要删除的记录~", 1);
			return;
		}
		setVisible(flag)
	}

	function onSizeChange(current, pageSize) {
		params.current = current
		params.size = pageSize
		setSize(pageSize)
		setCurrent(current)
		setParams(params)
		getDutyRecord()
	}
	function changePage(page, pageSize) {
		params.current = page
		params.size = pageSize
		setParams(params)
		setCurrent(page)
		getDutyRecord()
	}
	function onSelectChange(selectedRowKeys) {
		setSelectedRowKeys(selectedRowKeys);
	};
	const onFinish = (value) => {
		if (value.changeTime) {
			value.changeTimeStart = moment(value.changeTime[0]).format('YYYY-MM-DD 00:00:00')
			value.changeTimeEnd = moment(value.changeTime[1]).format('YYYY-MM-DD 23:23:59')
		}
		const param = {
			...data,
			...value,
		}
		setCurrent(1)
		setParams(param)
		getDutyRecord(param);
	};
	const onReset = () => {
		setCurrent(1)
		setParams(data)
		form.resetFields();
		getDutyRecord(data);
	};
	const columns = [
		{ title: '医生姓名', dataIndex: 'doctorName', key: 'doctorName' },
		{ title: '科室', dataIndex: 'deptName', key: 'deptName' },
		{ title: '工号', dataIndex: 'doctorCode', key: 'doctorCode' },
		{ title: '变更时间', dataIndex: 'changeTime', key: 'changeTime' },
		{ title: '职务/职称名称', dataIndex: 'name', key: 'name' },
		{
			title: '变更类型', dataIndex: 'type', key: 'type', render: (text, record) => {
				return typeMap[record.type];
			}
		},
	];
	const rowSelection = {
		selectedRowKeys,
		onChange: onSelectChange,
	};
	return (
		<div className="wrapper">
			<div className="filter-box">
				<Form
					form={form}
					name="normal_login"
					onFinish={onFinish}
					initialValues={{ type: '' }}
				>
					<Row gutter={24}>
						<Col span={5} key={0}>
							<Form.Item label="医生姓名" name="doctorName">
								<Input placeholder="请输入" autoComplete='off' allowClear/>
							</Form.Item>
						</Col>
						<Col span={5} key={1}>
							<Form.Item label="科室" name="deptName">
								<Input placeholder="请输入" autoComplete='off' allowClear/>
							</Form.Item>
						</Col>
						<Col span={5} key={2}>
							<Form.Item label="工号" name="doctorCode">
								<Input placeholder="请输入" autoComplete='off' allowClear/>
							</Form.Item>
						</Col>
						<Col span={5} key={3}>
							<Form.Item label="职务/职称名称" name="name">
								<Input placeholder="请输入" autoComplete='off' allowClear/>
							</Form.Item>
						</Col>
						<Col span={5} key={4}>
							<Form.Item label="变更类型" name="type">
								<Select
									placeholder="请选择"
									allowClear
								>
									<Option value="" key={0}>全部</Option>
									<Option value="1" key={1}>{typeMap['1']}</Option>
									<Option value="2" key={2}>{typeMap['2']}</Option>
								</Select>
							</Form.Item>
						</Col>
						<Col span={7} key={5}>
							<Form.Item label="变更时间" name="changeTime">
								<RangePicker
									disabledDate={disabledDate}
									placeholder={['开始时间', '结束时间']}
								/>
							</Form.Item>
						</Col>
						<Col span={6} key={6}>
							<Form.Item>
								<Button type="primary" htmlType="submit">
									查询
								</Button>
								<Button onClick={onReset}>
									重置
								</Button>
							</Form.Item>
						</Col>
					</Row>
				</Form>
			</div>

			<div className="table">
				<div className="table-header">
					<h2 className="table-title">职务职称变更记录</h2>
					<Button type="primary" onClick={() => showDelModal(true)} danger>删除</Button>
				</div>

				<Table
					columns={columns}
					rowSelection={rowSelection}
					scroll={{ y: 'calc(100vh - 360px)' }}
					dataSource={logList}
					rowKey={record => record.id}
					pagination={{
						pageSize: size,
						size: 'small',
						current: current,
						showSizeChanger: true,
						pageSizeOptions: ['15', '30', '60', '120'],
						showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
						onShowSizeChange: (current, pageSize) => onSizeChange(current, pageSize), // 改变每页数量时更新显示
						onChange: (page, pageSize) => changePage(page, pageSize),//点击页码事件
						total: total
					}} />
			</div>
			<Modal
				title="删除职务职称变更记录"
				okText='确定'
				cancelText='取消'
				width={400}
				visible={visible}
				onOk={delRecord}
				/*confirmLoading={confirmLoading}*/
				onCancel={() => showDelModal(false)}
			>
				<p>职务职称变更记录删除后将无法恢复，确认删除这{selectedRowKeys.length}条变更记录？</p>
			</Modal>
		</div >
	)
}

export default DutyRecord;