<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>服务项目内容</title>
		<link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/cross.ui.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
		<link href="../../../plugins/toastr/toastr.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../css/project-detail.css" />
	</head>
	<body class="m0">
	<div id="app" style="height: 100%;" v-cloak>
		<h4 class="p0 pt10 pb5 m0 plr30">{{planDetail.title}}</h4>
		<p class="p0 m0 plr30 pb5 c-border-b c-333 clearfix">
			<span class="fl plr10 lh18 c-border border-c12b7f5 c-12b7f5 mr10 b-r-3">{{planDetail.shortExecuteTime}}</span>
			<span class="fl plr10 lh18 c-border border-c12b7f5 c-12b7f5 mr10 b-r-3" v-for="(name, index) in planDetail.executeDoctorList" :key="index">{{name}}</span>
			<span class="fr pl20 c-12b7f5 set-finish">{{planDetail.statusName}}</span>
		</p>
		<div style="overflow: hidden; height: calc(100% - 60px);">
			<div class="plr15 c-999" style="overflow: auto; height: 100%;">
				<p class="p0 m0 ptb10 c-border-b">项目内涵：{{planDetail.content}}</p>
				<div class="ptb10 c-border-b clearfix">
					<span class="fl w-50 mb5">服务地点：{{planDetail.hospitalName}}</span>
					<span class="fl w-50 mb5">执&ensp;行&ensp;人：{{handleArr(planDetail.executeDoctorList)}}</span>
					<span class="fl w-50">服务时间：{{handleTime(planDetail.executeTime)}}</span>
					<span class="fl w-50">服务费用：{{planDetail.expense}}元</span>
				</div>
				<p class="p0 m0 ptb10 c-333 clearfix">指导与汇报记录<span class="fr pl15 set-show c-12b7f5" :class="{'active':isShowMore}" @click="changeShow()">{{isShowMore ? "收起详情" : "查看详情"}}</span></p>
				<ul class="p0 m0" v-show="isShowMore">
					<li class="bgc-f2fcfe plr10 ptb10 mb10" v-for="(record, index) in planDetail.messageList" :key="index">
						<p class="m0 p0 mb10 clearfix">
							<span class="fl w-50">{{record.doctorName}}&emsp;{{record.adminTeamName}}</span>
							<span class="fl w-50">{{record.createTime}}</span>
						</p>
						<p class="m0 p0 c-333" v-html="getContent(record.content, record.contentType)"></p>
					</li>
					<li class="c-t-center" v-if="!planDetail.messageList.length">暂无记录</li>
				</ul>
				<p class="m0 p0 ptb10 c-333 c-border-b">完成信息</p>
				<div class="ptb10">
					<p class="m0 p0 mb5">完成时间：<span class="c-333">{{planDetail.completeTime}}</span></p>
					<p class="m0 p0">执行医生：<span class="c-333">{{planDetail.operatorDoctorName}}</span></p>
				</div>
				<p class="m0 p0 ptb10 c-333 c-border-b">服务完成笔记</p>
				<div class="ptb10">
					{{planDetail.node}}
				</div>
				<p class="m0 p0 ptb10 c-333">相关记录</p>
				<ul class="p0 m0 ptb10 plr10 mb10 c-border b-r-3 clearfix">
					<li class="fl set-photo c-border mr10 cur-pit clearfix" v-for="(record, index) in planDetail.relationRecordImg" :key="index">
						<img class="fl" :src="handleImg(record)" alt="记录图" @click="lookPhoto(record)" />
					</li>
					<li class="c-t-center" v-if="planDetail.relationRecordImg && !planDetail.relationRecordImg.length">暂无相关记录</li>
				</ul>
				<div class="mb20" v-if="(planDetail.type==2 || planDetail.type==3 || planDetail.type==4) && planDetail.relationRecordCode">
	      			<p class="m0 p0 ptb10 f14 c-333">关联记录</p>
	      			<p class="m0 p0 ptb10 c-border b-r-3 c-t-center cur-pit c-333 clearfix" @click="viewDetial(planDetail.type,planDetail.relationRecordCode)">
	      				<span class="fl"><i class="icon icon-arrow-right"></i></span>{{planDetail.type==2?'健康文章':(planDetail.type==3?'健康指导':'随访记录')}}&emsp;{{planDetail.completeTimeShort}}
	      			</p>
	      		</div>
			</div>
		</div>
	</div>
		<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/jquery-2.2.4.js"></script>
        <script src="../../../plugins/layer/layer.min.js"></script>
        <script src="../../../plugins/toastr/toastr.min.js"></script>
        <script src="../../../js/bootstrap.min.js"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../api/http-request.js" type="text/javascript"></script>
		<script src="../../../api/recover_api.js" type="text/javascript"></script>
		<script type="text/javascript">
			var doctorType = (JSON.parse(window.localStorage.getItem('wlyyAgent'))||{}).doctorType
			var httpData=GetRequest()
			function showSuccessMessage(msg) {
				layer.msg(msg, {
					icon: 1
				})
			}
			
			function showErrorMessage(msg) {
				layer.msg(msg, {
					icon: 5
				})
			}
			
			function showWarningMessage(msg) {
				layer.msg(msg, {
					icon: 2
				})
			}
			
			function showInfoMessage(msg) {
				layer.msg(msg, {
					icon: 6
				})
			}
			
			selectVue = new Vue({
                el: "#app",
                data: {
                	isShowMore: false,
                	planDetail: {}
                },
                mounted: function() {
                	this.serviceItem()
                },
                methods: {
                	changeShow: function() {
                		this.isShowMore = !this.isShowMore
                	},
                	serviceItem: function() {
			    		var vm = this,
			    			loadding = layer.load(0, {shade: false}),
			    			params = {
			    				planDetailId: httpData.planId
			    			}
						recoverAPI.serviceItem(params).then(function(res) {
							layer.close(loadding)
							if(res.status == 200) {
								vm.planDetail = res.data
							} else {
								showErrorMessage(res.msg);
							}
						})
			    	},
			    	handleArr: function(arr) {
			    		if(!arr) {
			    			return false;
			    		}
			    		return arr.join()
			    	},
			    	handleTime: function(time) {
			    		var getTime = new Date(time),
			    			morth = getTime.getMonth() + 1
			    		return getTime.getFullYear() + '-' + this.addZero(morth) + '-' + this.addZero(getTime.getDay()) + " " + this.addZero(getTime.getHours()) + ":" + this.addZero(getTime.getMinutes())
			    	},
			    	addZero: function(num) {
			    		return num >= 10 ? num : '0' + num
			    	},
			    	lookPhoto: function(src) {
			    		parent.photoLayerIndex = parent.layer.open({
			        		type: 2,
			        		area: ['400px', '400px'],
			        		title: false,
			        		shade: 0.5,
			        		shadeClose: true,
			        		content: '../html/photo_show.html?src=' + src
			        	})
			    	},
			    	handleImg: function(src) {
			    		var str = httpRequest.getImgUrl(src);
			    		return str
			    	},
			    	getContent: function(value, type) {
						var res=value;
						if(type==2 || type==9){
							res = "<img src='"+httpRequest.getImgUrl(res)+"'>";
						}else if(type==3){
							res = '【语音】';
						}else if(type==19){
							res = '【聊天记录】';
						}else if(type==12){
							res = '【视频】';
						}
						return res;
					},
			    	viewDetial:function(type,code){
						var vm=this;
						if(type == 3) {
							top.layer.msg('客户端暂不支持查询健康指导记录');
						} else if (type==4){					
							top.layer.msg('客户端暂不支持查询随访记录');
						} else {
							top.layer.open({
								type: 2,
								//				  offset: ['100px'], //右下角弹出
								area: ['80%', '600px'],
								shade: 0.5,
								title: '指导教育',
								fixed: true, //不固定
								maxmin: true,
								closeBtn: 1,
								shift: 5,
								shadeClose: false, //点击遮罩关闭层
								content: '../../article/html/article-info.html?articleId=' + code,
								end: function() { // 未点击确定按钮，点击关闭按钮  
//									vm.getServiceItem();　　　　
								}
							});
						}
					}
                }
            })
		</script>
	</body>
</html>
