import React, {
  useState, useEffect
} from 'react';
import {  Input, Table,Row,Col } from 'antd';
import apiObj from '@api/index';
const { post, api } = apiObj;
const { Search } = Input;

function MatchSurg(props) {
  const isMapping = props.row.isMapping==="已匹配";
  const [DiagList, setDiagList] = useState([]);//当前页列表数据
  const [size, setSize] = useState(15);//每页显示条数
  const [total, setTotal] = useState(0);
  const [current, setCurrent] = useState(1);//当前页
  const [text,setText] = useState(isMapping?"":props.row.name);//输入框中内容
  const [diagId,setDiagId] = useState(props.row.id);//诊断id
  const [selectedRowKeys,setselectedRowKeys] = useState([]);//选中的行id
  const [params, setParams] = useState({
	pages: 1,
	current: 1,
	size: 15,
	name:""
  });

  const columns = [
	{ title: '手术和操作代码', dataIndex: 'code',},
	{ title: '标准手术/操作名称', dataIndex: 'standard',},
	{ title: '同义词', dataIndex: 'synonym',},
  ];
  useEffect(() => {
	let param={};
	if(isMapping){
	  param = {id:props.row.id};
	}else{
	  //默认搜索手术名称
	  param = {...params,name:text.trim(),current:1};
	}
	getPage(param);
  }, []);
  const rowSelection = {
	preserveSelectedRowKeys:true,
	selectedRowKeys:selectedRowKeys||[],
	onChange: (selectedRowKeys, selectedRows) => {
	  const param = {code:selectedRows[0].code,
		standard:selectedRows[0].standard,
		synonym:selectedRows[0].synonym,
		id:diagId
	  };
	  setselectedRowKeys(selectedRowKeys);
	  //setParams(param);
	  props.onChange(param);
	},
  };
  //每页显示条数切换
  function onSizeChange(current, pageSize) {
	params.current = current
	params.size = pageSize
	setSize(pageSize)
	setCurrent(current)
	setParams(params)
	getPage()
  }
  //翻页
  function changePage(page, pageSize) {
	params.current = page
	params.size = pageSize
	setCurrent(page)
	setParams(params)
	getPage()
  }
  function onSearch(){
	const param = {...params,name:text.trim(),current:1};
	setParams({...params,name:text.trim(),current:1});
	getPage(param);
  }
  function onChange(e){
	const val = e.target.value;
	setText(val);
  }
  function getPage(param) {
	//已匹配的获取已被匹配的那条数据即可
	const url = isMapping?api.getOperationById:api.getConceptLibraryPage;
	const pm = param||params;
	const paramData = isMapping?pm:{...pm,type:2};  //type：1:诊断，2:手术，3:药品
	post(url, paramData).then((res) => {
	  if (res.data.code === 200) {
		const data = res.data.data;
		const list = isMapping?[data]:data.records;
		setselectedRowKeys(isMapping?[data.id]:[]);
		setDiagList(list);
		setTotal(data.total||0)
	  }
	})
  }

  return (
      <>
		<Row gutter={24}>
		  <Col span={12} key={0}>
			<Search placeholder="请输入手术/操作名称" onSearch={onSearch} value={text} onChange={onChange} enterButton style={{marginBottom:'14px'}}/>
		  </Col>
		</Row>
		<Table
			rowSelection={{type: 'radio',...rowSelection,}}
			columns={columns}
			scroll={{ y: 'calc(100vh - 320px)' }}
			dataSource={DiagList}
			rowKey={record => record.standard}
			pagination={{
			  current: current,
			  pageSize: size,
			  size: 'small',
			  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
			}} />



      </>
  );
}

export default MatchSurg;