import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Table, Row, Col, DatePicker,Modal } from 'antd';
import '@common/common.less';
import apiObj from '@api/index';
import moment from "moment";
import "moment/locale/zh-cn"
import medicalContext from './medical-context';
import AddMedical from './addMedical.js';
// import "./index.less"
	const { post, api, } = apiObj;
	const { RangePicker } = DatePicker;
function MedicalTeam() {
	useEffect(() => {
		getMedicalTeam();
	}, []);
	const [logList, setLogList] = useState([{operationId:'3233',operationName:'张三',operationDate:'心电',operationIp:'232323',operationDate:'232323',status:'1'},
	{operationId:'3233',operationName:'张三',operationDate:'心电',operationIp:'232323',operationDate:'232323',status:'2'}]);
	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(){
	
	}
	//弹窗类型：1.禁用 2.启用 3.删除 (1.有关联医生，2.没有关联医生)
	const [modalType, setModalType] = useState(1);
	//弹框提示文字
	const tipText={
		1:'确认禁用该医疗组？',
		2:'该医疗组信息关联医生，禁用后将自动解除关联，确认禁用该数据？',
		3:'医疗组信息删除后将无法恢复，确认删除该数据？',
		4:'该医疗组信息关联医生，删除后将自动解除关联，确认删除该数据？'  
	}
	const [visibleModel, setVisible] = useState(false);   //删除禁用确认弹窗显示
	const [confirmLoading, setConfirmLoading] = useState(false);
	//启用/禁用 flag=1启用 ：禁用
	const enable=(flag,id,type)=>{
			//请求接口
	}
	//启用/禁用弹框打开方法
	const showModal=(type,id,flag)=>{
		setModalType(type);
		setVisible(true)
	}
		//启用/禁用弹窗取消
		const handleCancel=()=>{
			setVisible(false);
			// setAddVisible(false);
		}
		//启用/禁用弹窗确认事件
	  function handleOk() {
	      if ("1,2".indexOf(modalType) > -1) {
	          // onDelete();
	      } else if ("3,4".indexOf(modalType) > -1) {
	          enable(0);
	      } else if (modalType === 5) {
	          // onResetPsd();
	      }
	
	  }
	
		//打开新增修改弹框
		const [addVisible,setaddVisible] = useState(false); //弹框是否显示
		const [formData, setFormData] = useState(null); //弹框是否有数据
		const [title, setTitle] = useState("");    //弹框的标题
		const [type, setType] = useState("");    //弹框类型是新增还是修改
		const [userId, setUserId] = useState(""); 
		//新增/修改弹框打开方法(flag 1:新增，2:修改 )
		const showAddModel=(name,flag,userId)=>{
			console.log('111',flag)
			setTitle(name);
			setType(flag)
			setUserId(userId)
			if (flag == 1||flag == 2) {
			  setFormData({
			    status: '1'
			  })
			}
			setaddVisible(true);
		}
		//新增修改弹框关闭方法
		function cancel() {
		  setVisible(false)
		  setFormData(null)
		}
		//点击按钮关闭
		function userChange() {
		  setVisible(false)
		  setFormData(null)
		  //重新渲染列表
		  // getUserPage();
		}
	
	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: 'operationId', key: 'operationId', render: (text, record) =>{
			return <div className="medical-team-operation">
			  			<a onClick={e => showAddModel('修改医疗组信息', 2)}>修改</a>
					  	{record.status === '1' ?(<a onClick={()=>showModal(record.hasUserFlag || record.hasHospitalFlag ? 2 : 1, record.operationId, record.type='')}>禁用</a>):(<a onClick={enable}>启用</a>)}
					 	<a onClick={()=>showModal(record.UserFlag || record.HospitalFlag ? 4 : 3, record.operationId, record.type='')}>删除</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>
				<Button type="primary" onClick={(e) => showAddModel('新增医疗组信息', 1)}>新增</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>
			
			{addVisible && formData ?
			  <Modal
			    title={title}
			    okText='确定'
			    cancelText='取消'
			    width={500}
			    visible={addVisible}
			    onCancel={cancel}
			    footer={null}
			    forceRender={true}
			  >
					<medicalContext.Provider value={{ formData }}>
					  <AddMedical userChange={userChange} />
					</medicalContext.Provider>
			  </Modal>
			  : ''}
			
			<Modal
	              title="提示"
	              okText='确定'
	              cancelText='取消'
	              width={400}
	              visible={visibleModel}
	              onOk={handleOk}
	              confirmLoading={confirmLoading}
	              onCancel={handleCancel}
	          >
	          <p>{tipText[modalType]}</p>
	      </Modal>
		  </div >
	)
}

export default MedicalTeam;