<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>填写家族史成员</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<!-- js引用 -->
		<script src="../../js/config.js"></script>
		<script src="../../js/h5toapp.js"></script>
		<script src="../../js/h5to.js"></script>
		
		<!-- 组件js引用 -->
		<script src="../../js/mui.min.js"></script>
		<!-- 组件标准css引用 -->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!-- css引用 -->
		<link href="../../css/currency.css" rel="stylesheet">
		<link href="../../css/spinkit.css" rel="stylesheet">
		<link href="../../css/icon/iconfont.css" rel="stylesheet">
		<!-- 界面本身css引用 -->
		<link href="./fillLastFamily.css" rel="stylesheet">
		
		<style type="text/css">
			.mui-input-row .mui-input-clear~.mui-icon-clear {
				line-height: 27px;
				width: 30px;
				height: 17px;
				top: 16px;
				background: url(../../img/Delete%20Keyword.png) no-repeat;
			}
			.mui-icon-clear:before {
				content: '';
				/* background: url(../../img/Delete%20Keyword.png) no-repeat; */
			}
			
			input::-webkit-input-placeholder {
				color: #9393AA;
				-webkit-text-fill-color: #9393AA;
			}
		</style>
	</head>

	<body class="app_page">
		<div style="background-color:  #F9FAFC; height: 100vh; width: 100%; margin: 0; overflow: auto;">
			<div id="loading" class="example">
			  <div class="sk-plane loading_location"></div>
			</div>
			
			<div class="mui-content">
					
				<div style="margin: 16px; box-sizing: border-box;">
					<div class="mui-card" style="border-radius: 24px;">
						<div class="z_menu_btn_row mui-input-row" style="height: 48px;line-height: 48px;padding: 0;padding-left: 16px;" >
								<img src="../../img/Icon_search.png" class="search_icon" />
								<input id="val" type="text" class="mui-input-clear search_frame" placeholder="请输入或填写疾病名称" />
						</div>
					</div>
				</div>
				
				<div style="margin: 16px; box-sizing: border-box;">
					<div class="mui-card">
						<div id="show_area" style="display: none;"></div>
					</div>
				</div>
				
				<div style="margin: 16px; box-sizing: border-box;">
					<div class="mui-card">
						<div class="z_menu_btn_row" style="min-height: 220px;">
						<div class="title_txt">常见家庭成员</div>
						<div id="disease_label"></div>
						<div id="dis1" class="disease_label_txt" onclick="click_row(menurows[0])">父亲</div>
						<div class="disease_label_txt">母亲</div>
						<div class="disease_label_txt">祖父</div>
						<div class="disease_label_txt">祖母</div>
						</div>
					</div>
				</div>
				</div>
			</div>
		
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			
			var label = [];
			var labelOBJ = {};
			var diseaseName = [];
			var diseaseNameOBJ = {};
			let input = document.getElementById('val');
			let show = document.getElementById('show_area');
			
			var diseaseLabelInfo = [
				{id: "1", diseaseName: "陈维医生团队", specialty: "冠心病、先心病、高血压、心脏介入"},
				{id: "2", diseaseName: "毛大伟医生团队", specialty: "冠心病、先心病、高血压、心脏介入"},
				{id: "3", diseaseName: "陈维医生团队", specialty: "冠心病、先心病、高血压、心脏介入"},
			];
			
			var menurows = [
				{id: "1", name: "选择疾病类型", path: "./myzs",_id: 1000},
				{id: "2", name: "详细信息", path: "./ysxx"},
				{id: "3", name: "门诊排班", path: "./mzpb"},
				{id: "4", name: "共享的随访量表", path: "./sflb"},
			];
			
			setRouteParams({userId: "1299297572180185090",params: {}});
		
			function initPage() {
				
			}
			
			function click_row(idStr) {
				var row = infoOBJ[idStr];
				var pam = { 
					_id: 1015,
					params:{
						userId: login_data.userId
					 }
				   };
				app_click("route", pam, callback);
			}
				
			function loadData() {
				ajaxGet('content/api/query/doctor/id/' + login_data.userId,function(result) {
					diseaseName = result.data;
					doLoadData();
					hideloading("loading");
				})
			}
			
			function doLoadData() {
				labelOBJ = {};
				label.map(e=> {
					labelOBJ[e.id] = e;
				})
				
				diseaseNameOBJ = {};
				diseaseName.map(e=> {
					diseaseNameOBJ[e.id] = e;
				})
				
				var disease_label_list = document.getElementById('disease_label');
				var disease_label_data = "";
					for (var i = 0; i < diseaseLabelInfo.length; i++) {
						var disease_label_data1 = 
						'<div class="disease_label_txt" onclick="click_row('+"'" + diseaseLabelInfo[i].id + "'"+')">'+diseaseLabelInfo[i].diseaseName+'</div>'
						disease_label_data += disease_label_data1;
					}
					disease_label_list.innerHTML = disease_label_data;
				
				input.onkeyup = function() {
					show.style.display = 'block';
					
					let str = '';
					for (var i = 0; i < diseaseName.length; i++) {
						console.info(diseaseName[i]);
						let res = diseaseName[i].contentTitle.indexOf(input.value);
						if(res != -1){
							str +=  
						'<div id="'+diseaseName[i].id+'" class="z_menu_btn_row " onclick="click_add_label(this)" style="height: 36px;line-height: 36px;padding: 0;padding-left: 16px;">'+
							'<span class="z_menu_btn_txt_1">'+diseaseName[i].contentTitle+'</span>'+
						'</div>'
						}
					}
					if(!input.value||!diseaseName){
					show.innerHTML = '';
					}else {
					show.innerHTML = str;
					}
				}
				// input.onblur = function() {
				// 	show.style.display = 'none';
				// }
			}
			//3. run
			mui.ready(function() {
				onInitReady(function() {
					initPage();
					loadData();
				});
			})
		</script>
	</body>
</html>