import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Table, Row, Col, DatePicker } from 'antd';
import '@common/common.less';
import apiObj from '@api/index';
import moment from "moment";
import "moment/locale/zh-cn"
// import "./index.less"
const { post, api, } = apiObj;
const { RangePicker } = DatePicker;
function MedicalTeam() {
  useEffect(() => {
	getMedicalTeam();
  }, []);
  const [logList, setLogList] = useState([]);
  const [total, setTotal] = useState(0);
  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();

  let list = []
  let data = {
	pages: 1,
	current: 1,
	size: size
  }
  //表格数据
  function getMedicalTeam(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 onSizeChange(current, pageSize) {
	params.current = current
	params.size = pageSize
	setSize(pageSize)
	setCurrent(current)
	setParams(params)
	getMedicalTeam()
  }
  function changePage(page, pageSize) {
	params.current = page
	params.size = pageSize
	setParams(params);
	setCurrent(page);
	getMedicalTeam()
  }

  function onSelectChange(selectedRowKeys){
	console.log('selectedRowKeys changed: ', selectedRowKeys);
	setSelectedRowKeys(selectedRowKeys);
  };

  function onEdit(){

  }
  function onForbidden(){

  }
  function onDelete(){

  }

  const onFinish = (value) => {
	if (value.time){
	  value.startDate = moment(value.time[0]).format('YYYY-MM-DD 00:00:00');
	  value.endDate = moment(value.time[1]).format('YYYY-MM-DD 23:23:59');
	}
	const param = {
	  ...data,
	  ...value,
	}
	setCurrent(1)
	setParams(param)
	getMedicalTeam(param);
  };
  const onReset = () => {
	setCurrent(1)
	setParams(data)
	form.resetFields();
	getMedicalTeam(data);
  };
  const columns = [
	{ title: '医疗组ID', dataIndex: 'operationId', key: 'index'},
	{ title: '医疗组名称', dataIndex: 'operationName', key: 'index'},
	{ title: '上级科室', dataIndex: 'operationDate', key: 'index'},
	{ title: '上级病区', dataIndex: 'operationIp', key: 'index'},
	{ title: '关联医生', dataIndex: 'operationDate', key: 'index'},
	{ title: '状态', dataIndex: 'operationIp', key: 'index' },
	{title: '操作', dataIndex: 'operation', key: 'operation', render: (text, record) =>{
		return <div className="medical-team-operation">
		  			<a onClick={onEdit}>修改</a>
				  <a onClick={onForbidden}>禁用</a>
				  <a onClick={onDelete}>删除</a>
				</div>
	  }},
  ];
  const rowSelection = {
	selectedRowKeys,
	onChange: onSelectChange,
  };
  return (
	  <div className="wrapper">
		<div className="filter-box">
		  <Form
			  form={form}
			  name="normal_login"
			  onFinish={onFinish}
			  initialValues={{ status: '' }}
		  >
			<Row gutter={24}>
			  <Col span={5} key={0}>
				<Form.Item label="医疗组ID" name="operationName">
				  <Input placeholder="请输入" autoComplete='off'/>
				</Form.Item>
			  </Col>
			  <Col span={5} key={1}>
				<Form.Item label="医疗组名称" name="operationName">
				  <Input placeholder="请输入" autoComplete='off'/>
				</Form.Item>
			  </Col>
			  <Col span={5} key={2}>
				<Form.Item label="上级科室" name="operationName">
				  <Input placeholder="请输入" autoComplete='off'/>
				</Form.Item>
			  </Col>
			  <Col span={5} key={3}>
				<Form.Item label="上级病区" name="operationName">
				  <Input placeholder="请输入" autoComplete='off'/>
				</Form.Item>
			  </Col>
			  <Col span={5} key={4}>
				<Form.Item label="关联医生" name="operationName">
				  <Input placeholder="请输入" autoComplete='off'/>
				</Form.Item>
			  </Col>
			  <Col span={7} key={5}>
				<Form.Item label="状态" name="operationName">
				  <RangePicker
					  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>
		  </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>
	  </div >
  )
}

export default MedicalTeam;