import React, {
  useState,useContext,useEffect
} from 'react';
import { Form, Input, Select, message } from 'antd';
import apiObj from '@api/index';
import { getCookie,setCookie } from '@utils/index';
import './index.less'
import {Modal} from "antd/lib/index";
import {
  LinkOutlined
} from '@ant-design/icons';
const { post, api } = apiObj;


function AddDiag({formData,matchChange,visible,cancel,onOk,title,termSType,termType,flag}) {
  const [form] = Form.useForm();
  const { Option } = Select;
  const [unsaved, setUnsaved] = useState(false);//修改未保存弹窗
  const [icdcode,setIcdcode] = useState((formData||"").code);
  const [dataList, setDataList] = useState([]);//当前页列表数据
  const [formList, setFormList] = useState([]);//当前页列表数据
  const [source, setSource] = useState(0);//来源
  //const TREMTYPE=100;			//常亮，术语类型1-化验大项、2-化验小项、3-辅检、4-诊断、5-药品、6-手术和操作

  useEffect(() => {
	setIcdcode(formData.code)
	form.setFieldsValue(formData)
  }, [formData]);
  //标准术语搜索
  function handleSearch(val){
    const txt = val.trim();
	if(txt===""){
		const list = []
		setDataList(list);
	}else{
		post(api.termMatching, {inputStr:txt,type:termSType}).then((res) => {
		if (res.data.code === "0") {
			const list = res.data.data||[];
			setDataList(list);
		}
		})
	}
  }
  //剂型搜索
  function handleSearch1(val){
    const txt = val.trim();
  	if(txt===""){
  		const list = []
  		setFormList(list);
  	}else{
  		post(api.termMatching, {inputStr:txt,type:102}).then((res) => {
  		if (res.data.code === "0") {
  			const list = res.data.data||[];
  			setFormList(list);
  		}
  		})
  	}
  }
  //选中（修改）标准词时
  function handleChange(val,item){
	console.log(33,item)
	setSource(item.source)
	setIcdcode(item.code);
  }
  //选中（修改）剂型时
  function handleChange1(val,item){
  	
  }
  //保存匹配，先验证输入
  function saveMatching(){
	form.validateFields().then(function(values){
	  console.log('values:',values,form.getFieldsValue())
	  const hospitalId = getCookie('hospitalId')
	  const param={
		  conceptId:parseFloat(values.uniqueName)||formData.conceptId,
		  formConceptId:parseFloat(values.form)||formData.formConceptId,
		  type:termType,
		  hospitalId:parseInt(hospitalId),
		  source:source==0?formData.source:source,
		  hisName:values.hisName
	  }
	  if(flag===3){
		  param.id=formData.id
	  }
	  console.log(param)
	  onOk(param)
	})
  }
  //关闭新增/编辑弹窗
  function saveCancel(){
    //有未保存修改时弹窗提醒
	// const newFormData = form.getFieldsValue();
 //    const isChange = newFormData.hisName!==formData.hisName||newFormData.conceptId!==formData.conceptId;//form.isFieldsTouched(['hisName','conceptId']);
 //    if(isChange){
	//   setUnsaved(true);
	// }else{
	  cancel();
	  form.resetFields();	//清空表单值
	// }
  }
  //不保存当前修改，退出弹窗
 //  function unsavedOk() {
	// setUnsaved(false);
	// cancel();	//关闭新增/修改弹窗
	// form.resetFields();	//清空表单值
 //  }
  //未保存提醒弹窗关闭
 //  function unsavedCancel() {
	// setUnsaved(false)
 //  }
  return (
	  <Modal
		  title={title}
		  okText='确定'
		  cancelText='关闭'
		  width={'65%'}
		  visible={visible}
		  onOk={saveMatching}
		  onCancel={saveCancel}
		  forceRender={true}
		  initialValues={formData}
		  maskClosable={false}
	  >
	  <Form
		  labelCol={{ span: 7 }}
		  wrapperCol={{ span: 15 }}
		  className='clearfix'
		  form={form}
		  name="register"
	  >

		<div className="his-info info-box">
			<p className='title'>医院术语</p>
		  	<div className="item-box">
			  <Form.Item
				  name="hisName"
				  label={termType==4?'医院诊断名称': termType==5?'医院药品名称':'手术/操作名称'}
				  rules={[
					{
					  required: true,
					  message: '不能为空',
					},{ max: 30,message:'不能超过30个字符'}
				  ]}
			  >
				<Input placeholder="请输入" autoComplete='off'/>
			  </Form.Item>
			</div>
		</div>
		<div className="info-p">
		<LinkOutlined />
		<p>相互关联</p>
		</div>
		<div className="lt-info info-box">
		  <p className='title'>标准术语</p>
		  <div className="item-box">
			<Form.Item
				name="uniqueName"
				label={termType==4?'标准诊断名称': termType==5?'标准药品名称':'手术/操作名称'}
				rules={[
				  {
					required: true,
					message: '不能为空',
				  },{ max: 30,message:'不能超过30个字符'}
				]}
			>
			  <Select placeholder="请输入"
					  autoComplete='off'
					  onSearch={handleSearch}
					  onChange={handleChange}
					  filterOption={false}
					  showSearch>
				{dataList.map(d => <Option key={d.id} source={d.source} code={d.code}>{d.name}</Option>)}
			  </Select>
			</Form.Item>
			{termType==5?
			<Form.Item
				name="form"
				label="药品剂型"
			>
			  <Select placeholder="请输入"
					  autoComplete='off'
					  onSearch={handleSearch1}
					  onChange={handleChange1}
					  filterOption={false}
					  showSearch>
				{formList.map(d => <Option key={d.id} source={d.source} code={d.code}>{d.name}</Option>)}
			  </Select>
			</Form.Item>
			:
			<Form.Item label={termType==4?'ICD-10编码':'手术/操作代码'}>
			  {icdcode}
			</Form.Item>}
		  </div>
		</div>
		<p className='linked-term'>已关联标准术语：{(formData||{}).uniqueName}</p>
	  </Form>
	  </Modal>
  );
}

export default AddDiag;