import React, {
	useState, useContext, useEffect
} from 'react';
import { Form, Input, Select, message } from 'antd';
import apiObj from '@api/index';
import { getValueFromEvent } 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-手术和操作
	const hospitalId = localStorage.getItem('hospitalId')
	useEffect(() => {
		setIcdcode(formData.code)
		form.setFieldsValue(formData)
	}, [formData]);
	//标准术语搜索
	function handleSearch(val) {
		const txt = val.trim();
		if (txt === "") {
			const list = []
			setDataList(list);
		} else {
			post(api.index, { inputStr: txt, type: termSType}).then((res) => {
				if (res.data.code === "0") {
					const list = res.data.data.nameList || [];
					setDataList(list);
				}
			})
		}
	}
	//剂型搜索
	function handleSearch1(val) {
		const txt = val.trim();
		if (txt === "") {
			const list = []
			setFormList(list);
		} else {
			post(api.index, { inputStr: txt, type: 15}).then((res) => {
				if (res.data.code === "0") {
					const list = res.data.data.nameList || [];
					setFormList(list);
				}
			})
		}
	}
	//选中（修改）标准词时
	function handleChange(val, item) {
		console.log(33, item)
		setSource(item.source)
		setIcdcode(item.code);
	}
	//保存匹配，先验证输入
	function saveMatching() {
		form.validateFields().then(function (values) {
			console.log('values:', values, form.getFieldsValue())
			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"
							getValueFromEvent={getValueFromEvent}
							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}
									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;