(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">
									<div class="list-body" v-for="record in records">
										<div class="list-header"><span>预约时间</span><span class="pl20">{{record.time}}</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.photo" 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.doctor}}</span>
																<span class="plr10">{{record.zhiwu}}</span>
																<span class="c-909090">{{record.keshi}}</span>
															</div>
															<div class="mt10 c-909090">{{record.yiyuan}}</div>
														</div>
													</div>
												</div>
												<div class="table-cell c-f16">
													<div class="mt15">
														{{record.othertime}}
													</div>
													<div class="mt10">
														{{record.othertime1}}
													</div>
												</div>
												<div class="table-cell c-f16 mt25">{{record.bingren}}
												</div>
												<div class="table-cell">
													<div class="cancelbtn" @click="cancelbtn(record.id)">取消预约</div>
													<div class="mt10" style="color:#0AD8C8" data-toggle="modal" data-target="#appointmentinfo">查看详情</span>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div role="tabpanel" class="tab-pane" id="history">
									<div class="list-body" v-for="record in records">
										<div class="list-header"><span>预约时间</span><span class="pl20">{{record.time}}</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.photo" 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.doctor}}</span>
																<span class="plr10">{{record.zhiwu}}</span>
																<span class="c-909090">{{record.keshi}}</span>
															</div>
															<div class="mt10 c-909090">{{record.yiyuan}}</div>
														</div>
													</div>
												</div>
												<div class="table-cell c-f16">
													<div class="mt15">
														{{record.othertime}}
													</div>
													<div class="mt10">
														{{record.othertime1}}
													</div>
												</div>
												<div class="table-cell c-f16 mt25">{{record.bingren}}
												</div>
												<div class="table-cell">
													<div class="mt10" style="color:#0AD8C8" data-toggle="modal" data-target="#appointmentinfo">查看详情</span>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div id="page" class="page_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">18721839005577</div>
									</div>
									<div class="w3-row modal-list" style="border:none;">
										<div class="w3-col" style="width:120px;">订单状态</div>
										<div class="w3-rest">待就诊</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">福建省立医院</div>
									</div>
									<div class="w3-row modal-list">
										<div class="w3-col" style="width:120px;">预约科室</div>
										<div class="w3-rest">睡眠眼科</div>
									</div>
									<div class="w3-row modal-list">
										<div class="w3-col" style="width:120px;">就诊日期</div>
										<div class="w3-rest">2018-04-04 上午</div>
									</div>
									<div class="w3-row modal-list">
										<div class="w3-col" style="width:120px;">就诊时间</div>
										<div class="w3-rest">07:50</div>
									</div>
									<div class="w3-row modal-list">
										<div class="w3-col" style="width:120px;">就诊序号</div>
										<div class="w3-rest">2</div>
									</div>
									<div class="w3-row modal-list" style="border:none;">
										<div class="w3-col" style="width:120px;">退号截止时间</div>
										<div class="w3-rest">2018-04-04 23:59:00</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">郑绩</div>
									</div>
									<div class="w3-row  modal-list">
										<div class="w3-col" style="width:120px;">证件号</div>
										<div class="w3-rest">35040319850707201X</div>
									</div>
									<div class="w3-row  modal-list">
										<div class="w3-col" style="width:120px;">手机号</div>
										<div class="w3-rest">137******96</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: [{
					time: "2017年11月11日 13:13:13",
					photo: "../image/touxiang.jpg",
					doctor: "张三",
					zhiwu: "主任医生",
					keshi: "骨科",
					yiyuan: "上饶医院",
					othertime: "2018-04-04上午",
					othertime1: "第2号,07:50",
					bingren: "李花花",
					id: "1",
				}, {
					time: "2017年11月11日 13:13:13",
					photo: "../image/touxiang.jpg",
					doctor: "张三",
					zhiwu: "主任医生",
					keshi: "骨科",
					yiyuan: "上饶医院",
					othertime: "2018-04-04上午",
					othertime1: "第2号,07:50",
					bingren: "李花花",
					id: "1",
				}, ]
			}
		},
		mounted: function() {

		},
		methods: {
			cancelbtn: function(id) {
				personalDialogForm.cancelAppointment(id).then(function(layerid) {
					top.layer.close(layerid)
				})
			},
			hideModel:function(){
				$('#appointmentinfo').modal('hide')
			}
		},
	})

})()