(function() {
	Vue.component('record', {
		template: '<div class="container ptb20">\
				<div class="row w3-row">\
					<left-menu :code="code"></left-menu>\
					<div class="pl251">\
						<div class="bgc-fff c-border" style="min-height: 706px;">\
							<ul class="nav nav-tabs c-inline-block width-100" role="tablist" id="recordlist">\
								<li role="presentation" class="active">\
									<a href="#home" aria-controls="home" role="tab" data-toggle="tab" id="_home">待就诊</a>\
								</li>\
								<li role="presentation">\
									<a href="#history" aria-controls="history" role="tab" data-toggle="tab" id="_history">历史记录</a>\
								</li>\
							</ul>\
							<div class="tab-content plr25 ptb8">\
								<div role="tabpanel" class="tab-pane active" id="home">\
									<template v-if="records.length>0">\
										<div class="list-body" v-for="record in records">\
											<div class="list-header"><span>预约时间</span><span class="pl20">{{record.orderCreateTime}}</span></div>\
												<div class="div-table">\
													<div class="table-row">\
														<div class="table-cell">\
															<div class="w3-row">\
																<div class="w3-col pl15" style="width:95px">\
																	<img :src="record.photoUri || defaultImg" class="img-circle" width="80" height="80" />\
																</div>\
																<div class="w3-rest c-t-left pl20 c-f14 ">\
																	<div class="mt15">\
																		<span class="c-f16">{{record.doctorName}}</span>\
																		<span class="plr10">{{record.doctorName}}</span>\
																		<span class="c-909090">{{record.deptName}}</span>\
																	</div>\
																	<div class="mt10 c-909090">{{record.hospitalName}}</div>\
																</div>\
															</div>\
														</div>\
														<div class="table-cell c-f16">\
															<div class="mt15">{{record.registerDate}}</div>\
															<div class="mt10">{{record.serialNo}},{{record.commendTime}}</div>\
														</div>\
														<div class="table-cell c-f16 mt25">{{record.patientName}}</div>\
														<div class="table-cell">\
															<div class="cancelbtn" @click="cancelbtn(record.orderId,record.orderId)">取消预约</div>\
															<div class="mt10" style="color:#0AD8C8"  @click="getinfo(record.id)">查看详情</span>\
														</div>\
													</div>\
												</div>\
											</div>\
										</div>\
									</template>\
									<div v-else class="c-t-center  wushuju">\
										<img src="../../../images/queshengye-.png" />\
									<div class="mt40">暂无预约就诊记录</div>\
									</div>\
									<div id="homepage" class="page_div" v-if="!ishomeNull"></div>\
								</div>\
								<div role="tabpanel" class="tab-pane" id="history">\
									<template v-if="historyrecords.length>0">\
										<div class="list-body" v-for="record in historyrecords">\
											<div class="list-header"><span>预约时间</span><span class="pl20">{{record.orderCreateTime}}</span></div>\
											<div class="div-table">\
												<div class="table-row">\
													<div class="table-cell">\
														<div class="w3-row">\
															<div class="w3-col pl15" style="width:95px">\
																<img :src="record.photoUri|| defaultImg" class="img-circle" width="80" height="80" />\
															</div>\
															<div class="w3-rest c-t-left pl20 c-f14 ">\
																<div class="mt15">\
																	<span class="c-f16">{{record.doctorName}}</span>\
																	<span class="plr10">{{record.deptName}}</span>\
																	<span class="c-909090">{{record.deptName}}</span>\
																</div>\
																<div class="mt10 c-909090">{{record.hospitalName}}</div>\
															</div>\
														</div>\
													</div>\
													<div class="table-cell c-f16">\
														<div class="mt15">{{record.registerDate}}</div>\
														<div class="mt10">{{record.serialNo}},{{record.commendTime}}</div>\
													</div>\
													<div class="table-cell c-f16 mt25">{{record.patientName}}</div>\
													<div class="table-cell">\
														<div class="mt10">{{record.stateDesc}}</span>\
														<div class="mt10" style="color:#0AD8C8"  @click="getinfo(record.id)">查看详情</span>\
														</div>\
													</div>\
												</div>\
											</div>\
										</div>\
									</template>\
									<div v-else class="c-t-center  wushuju">\
										<img src="../../../images/queshengye-.png" />\
									<div class="mt40">暂无预约就诊记录</div>\
									</div>\
									<div id="historypage" class="page_div" v-if="!ishistoryNull"></div>\
								</div>\
							</div>\
						</div>\
				</div>\
				<div class="modal fade" id="appointmentinfo" tabindex="-1" role="dialog" aria-labelledby="appointmentinfoLabel">\
					<div class="modal-dialog" role="document">\
						<div class="modal-content">\
							<div class="modal-header bgc-f9f9f9">\
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\
								<h4 class="modal-title" id="appointmentinfoLabel">挂号明细</h4>\
							</div>\
							<div class="modal-body">\
								<div class="bgc-fff">\
									<div class="w3-row modal-list">\
										<div class="w3-col" style="width:120px;">订单号</div>\
										<div class="w3-rest">{{recordinfo.orderId}}</div>\
									</div>\
									<div class="w3-row modal-list" style="border:none;">\
										<div class="w3-col" style="width:120px;">订单状态</div>\
										<div class="w3-rest">{{recordinfo.stateDesc}}</div>\
									</div>\
									<div class="w3-row modal-list bgc-f9f9f9" style="color:#323232;border:none;">预约信息</div>\
									<div class="w3-row c-border-b modal-list">\
										<div class="w3-col" style="width:120px;">预约医院</div>\
										<div class="w3-rest">{{recordinfo.hospitalName}}</div>\
									</div>\
									<div class="w3-row modal-list">\
										<div class="w3-col" style="width:120px;">预约科室</div>\
										<div class="w3-rest">{{recordinfo.deptName}}</div>\
									</div>\
									<div class="w3-row modal-list">\
										<div class="w3-col" style="width:120px;">就诊日期</div>\
										<div class="w3-rest">{{recordinfo.registerDate}} {{recordinfo.timeId}}</div>\
									</div>\
									<div class="w3-row modal-list">\
										<div class="w3-col" style="width:120px;">就诊时间</div>\
										<div class="w3-rest">{{recordinfo.commendTime}}</div>\
									</div>\
									<div class="w3-row modal-list">\
										<div class="w3-col" style="width:120px;">就诊序号</div>\
										<div class="w3-rest">{{recordinfo.serialNo}}</div>\
									</div>\
									<div class="w3-row modal-list" style="border:none;">\
										<div class="w3-col" style="width:120px;">退号截止时间</div>\
										<div class="w3-rest">{{recordinfo.invalidDate}}</div>\
									</div>\
									<div class="w3-row modal-list bgc-f9f9f9" style="color:#323232;border:none;">就诊人信息</div>\
									<div class="w3-row modal-list">\
										<div class="w3-col" style="width:120px;">姓名</div>\
										<div class="w3-rest">{{recordinfo.patientName}}</div>\
									</div>\
									<div class="w3-row  modal-list">\
										<div class="w3-col" style="width:120px;">证件号</div>\
										<div class="w3-rest">{{recordinfo.cardNo}}</div>\
									</div>\
									<div class="w3-row  modal-list">\
										<div class="w3-col" style="width:120px;">手机号</div>\
										<div class="w3-rest">{{recordinfo.phoneNo}}</div>\
									</div>\
									<div class="c-t-center">\
										<button type="button" class="btn btn-default c-f16 mt30 mb20" style="width:144px;" @click="hideModel()">关 闭</button>\
									</div>\
								</div>\
							</div>\
						</div>\
					</div>\
				</div>\
			</div>',
		props: [],
		data: function() {
			return {
				code: "record",
				records: [],
				historyrecords: [],
				recodestype: '2',
				historytype: '',
				recordinfo: {},
				defaultImg: "../../../images/moren_touxiang_img.png",
				ishomeNull: false,
				ishistoryNull: false,
			}
		},
		mounted: function() {
			var vm = this
			vm.getlist(1, vm.recodestype)
			vm.getlist(1, vm.historytype)
		},
		methods: {
			getlist: function(pageNo, types) {
				var vm = this
				var oauthInfo = JSON.parse(sessionStorage.getItem("oauthInfo"));
				var filters = "userId=" + oauthInfo.id
				if(types == '2') {
					filters += ";state=" + types
				}
				var param = {
					fields: '',
					filters: filters,
					sort: '+registerDate',
					page: pageNo,
					size: 5
				}
				jiuzhenAPI.queryRegOrderInfos(param).then(function(res) {
					if(types == '2') {
						vm.records = res.detailModelList
						if(res.totalCount == 0) {
							vm.ishomeNull = true
						} else {
							vm.inithomePage(pageNo, res.totalPage, res.totalCount)
						}
					} else if(types == '') {
						vm.historyrecords = res.detailModelList
						vm.inithistoryPage(pageNo, res.totalPage, res.totalCount)
						if(res.totalCount == 0) {
							vm.ishistoryNull = true
						} else {
							vm.inithistoryPage(pageNo, res.totalPage, res.totalCount)
						}
					}

				})
			},
			cancelbtn: function(orderid, thirdorderid) {
				mineJiuZhenDialogForm.cancelAppointment(orderid, thirdorderid)
			},
			inithomePage: function(pageNo, total, size) {
				var vm = this
				//分页初始化
				$("#homepage").paging({
					pageNo: pageNo,
					totalPage: total,
					totalSize: size,
					callback: function(num) {
						//回调的页数
						vm.getlist(num, vm.recodestype)
					}
				})
			},
			inithistoryPage: function(pageNo, total, size) {
				var vm = this
				//分页初始化
				$("#historypage").paging({
					pageNo: pageNo,
					totalPage: total,
					totalSize: size,
					callback: function(num) {
						//回调的页数
						vm.getlist(num, vm.historytype)
					}
				})
			},
			getinfo: function(orderid) {
				var vm = this
				jiuzhenAPI.getRegOrderInfo(orderid).then(function(res) {
					vm.recordinfo = res.obj
					vm.openmodel()
				})
			},
			openmodel: function() {
				$('#appointmentinfo').modal('show')
			},
			hideModel: function() {
				$('#appointmentinfo').modal('hide')
			}
		},
	})

})()