<template>
	<view class="index-page btPadding" v-if="pageShow">
		<view class="header-wrapper flex">
			<view class="left">
				<view class="flex top PfScMedium">
					<view class="ft50 over2">{{doctorInfo.name}}</view>
					<view v-if="doctor_dept">
						<view class="over2">{{doctor_dept}}</view>
					</view>
				</view>
				<view class="bt over2" v-if="doctorInfo.brief">
					{{doctorInfo.brief}}
				</view>
			</view>
			<img class="right" :src="doctorInfo.photo" alt="" @click="enlargePicture(doctorInfo.photo)" v-if="doctorInfo.photo">
		</view>

		<view class="block desc-wrapper" v-if="doctorInfo.intro">
			<view class="title-wrapper flex">
				<view class="title">
					医生简介
				</view>
				<img :src="cssUrl+'right_bg.png'" alt="">
			</view>
			
			<view class="con over2 over4">
				{{doctorInfo.intro}}
			</view>
		</view>
		
		<view class="block hospital-wrapper" v-if="hospitals">
			<view class="item" v-for="(item,key) in hospitals">
				<view class="top flex">
					<view class="left">
						<view class="title flex">
							<text class="over2">{{item.hospital_name}}</text>
							<img :src="cssUrl+'index_comback.svg'" v-if="item.hospital_location" @click="toLocation(item)">
						</view>
						<view class="date over2" v-if="item.visit_day_text">
							出诊：{{item.visit_day_text}}
						</view>
					</view>
					<view class="right">
						<view class="flex right-wrapper" style="justify-content:flex-end;" v-if="item.hospital_location">
							<view class="" @click="toLocation(item)">
								<img :src="cssUrl+'index_nav.svg'" alt="">
								<view>导航</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="bot primary btn btn2" hover-class="hover" @click="toVisitors(item)">
					预约看诊
				</view>
			</view>
		</view>
		
		<view class="block visit-wrapper" v-if="recentAppoint">
			<view class="header flex">
				<view class="title-wrapper flex booklist">
					<view class="title">
						最近预约
					</view>
					<img :src="cssUrl+'right_bg.png'" alt="">
				</view>
				
				<view class="opt flex" @click="toPrebookList">
					查看全部<img :src="cssUrl+'index_comback2.svg'" alt="">
				</view>
			</view>
		</view>
		<pre-book-list class="preg-books" :dataList="recentAppoint"></pre-book-list>
		
		<tabbar current="1"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar.vue'
	import preBookList from '@/components/preBookList.vue'

	export default {
		data() {
			return {
				cssUrl:this.cssUrl,
				code:'',
				pageShow:false,
				doctor_id:'',
				doctorInfo:false,
				doctor_dept:false,
				hospitals:false,
				recentAppoint:[]
			}
		},
		components:{
			tabbar,
			preBookList,
		},
		onLoad(option) {
			if(option.code) this.code = option.code
		},
		onShow() {
			this.doctor_id = getApp().globalData.doctorId
			if(!this.doctor_id) return

			var title = '李静医生预约就诊'
			if(this.code) title = '登录'
			uni.setNavigationBarTitle({
				title:title
			})
			
			var token = uni.getStorageSync('token')
			if(this.code && !token) {
				var rebackPagePath = uni.getStorageSync('rebackPagePath')
				this.login()
				return
			}

			this.getDoctorInfo()
		},
		methods: {
			toLocation(hospital){
				var that = this
				uni.showActionSheet({
					itemList: ['腾讯地图', '百度地图', '高德地图'],
					success: function (res) {
						var  lngLat = hospital.hospital_location.toString().split(',')
						var lng = lngLat[0].toString()
						, lat = lngLat[1].toString()

						var baiduLngLat = that.qqMapTransBMap(lng, lat)
						var mapList = [
							'http://apis.map.qq.com/uri/v1/marker?marker=coord:'+ lat+','+lng+';addr:'+hospital.hospital_name,
							'http://api.map.baidu.com/marker?location='+baiduLngLat.lat+','+baiduLngLat.lng+'&title='+hospital.hospital_name+'&content=即将前往目的地&output=html&src=webapp.baidu.openAPIdemo',
							'https://m.amap.com/share/index/lnglat='+hospital.hospital_location+'&name='+hospital.hospital_name+'&src=uriapi&innersrc=uriapi',
						]
						console.log(mapList[res.tapIndex])
						// return;
						location.href = mapList[res.tapIndex]
					},
					fail: function (res) {
					}
				});
			},
			login() {
				this.$http.req('client/user/login/', {code:this.code}, 'POST').then(data=>{
					if(data == -1) return
					uni.setStorageSync('token', data.token)
					var rebackPagePath = uni.getStorageSync('rebackPagePath')
					if(rebackPagePath){
						uni.navigateTo({
							url:rebackPagePath
						})
					}
				});
			},
			getDoctorInfo() {
				this.$http.req('client/user/doctorpage/'+this.doctor_id, {}, 'GET').then(data=>{
					if(data == -1) return
					this.pageShow = true
					this.keywords = data
					this.doctorInfo = data
					if(this.doctorInfo.visit_hospital && this.doctorInfo.visit_hospital.length>0){
						this.doctor_dept = this.doctorInfo.visit_hospital[0].hospital_dept_name
					}

					if(this.doctorInfo.visit_hospital && this.doctorInfo.visit_hospital.length>0){
						this.hospitals = this.doctorInfo.visit_hospital
					}

					if(this.doctorInfo.appoint_record && this.doctorInfo.appoint_record.length>0){
						this.recentAppoint = this.doctorInfo.appoint_record
					}
				});
			},
			enlargePicture(imgUrl) {
				  var list = new Array();
				  list[0] = imgUrl;
				  uni.previewImage({
					  loop: true,
					  urls: list
				  });
			},
			toVisitors(hospital){
				uni.setStorageSync('hospital_id', hospital.id)
				uni.setStorageSync('hospital', JSON.stringify(hospital))
				uni.navigateTo({
					url:"/pages/visitors/visitors?type=1"
				})
			},
			toPrebookList(){
				uni.navigateTo({
					url:"/pages/prebook_list/prebook_list"
				})
			},
			toPrebookDetail(){
				uni.navigateTo({
					url:"/pages/book_detail/book_detail"
				})
			},
			qqMapTransBMap(lng, lat) {
			      let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
			      let x = lng;
			      let y = lat;
			      let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
			      let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
			      let lngs = z * Math.cos(theta) + 0.0065;
			      let lats = z * Math.sin(theta) + 0.006;
			      return {
			          lng: lngs,
			          lat: lats 
			      } 
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-page{
		.header-wrapper{
			min-height: 208rpx;
			padding: 24rpx 40rpx 24rpx;
			box-sizing: border-box;
			.left{
				width: 510rpx;
				.top{
					overflow: hidden;
					margin-top: 31rpx;
					& view:first-of-type{
						color: #000000;
						letter-spacing: 1rpx;
						margin-right: 27rpx;
						max-width: 250rpx;
					}
					& view:last-of-type{
						view{
							width: auto;
							padding: 0 15rpx;
							min-width: 125rpx;
							margin-top: 14rpx;
							line-height: 42rpx;
							text-align: center;
							font-size: 28rpx;
							background: linear-gradient( 288deg, #FFEED2 0%, #FED9A6 100%);
							border-radius: 8rpx;
							color: #7D501F;
						}
					}
				}
				.bt{
					width: 480rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #38503F;
					margin-top: 21rpx;
				}
			}
			.right{
				flex-grow: 1;
				display: block;
				border-radius: 100%;
				height: 160rpx;
				width: 160rpx;
			}
		}
		.block{
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 36rpx 24rpx;
			box-sizing: border-box;
			margin: 0 auto;
			width: 714rpx;
			margin-bottom: 20rpx;
		}
		.desc-wrapper{
			box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.03);
			color: #949699;
			font-size: 30rpx;
			line-height: 50rpx;
			.con{
				height: auto;
			}
		}
		.title-wrapper{
			.title{
				width: 117rpx;
				height: 42rpx;
				padding-left: 13rpx;
				margin-bottom: 36rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 42rpx;
				text-align: center;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				background: linear-gradient( 98deg, #53C184 0%, #5CD378 100%);
			}
			&.booklist .title{
				margin-bottom: 0rpx;
			}
			img{
				width: 48rpx;
				height: 42rpx;
			}
		}
		.hospital-wrapper{
			.item{
				&:last-child{
					margin-bottom: 0rpx;
				}
				min-height: 207rpx;
				width: 100%;
				margin-bottom: 36rpx;
				.top{
					min-height: 102rpx;
					.left{
						flex-grow: 1;
						.title{
							align-items: center;
							img{
								width: 20rpx;
								height: 32rpx;
							}
						}
						.date{
							line-height: 40rpx;
							font-size: 28rpx;
							color: #666666;
							margin-top: 14rpx;
						}
					}
					.right{
						width: 200rpx;
						height: 100%;
						img{
							width: 52rpx;
							height: 52rpx;
							background: #F4F4F4;
							border-radius: 6rpx;
							margin-right: 7rpx;
						}
						text{
							width: 60rpx;
							height: 54rpx;
							display: block;
							font-size: 26rpx;
							color: #666666;
							line-height: 37rpx;
							text-align: center;
							margin-top: 5rpx;
						}
					}
				}
				.bot{
					margin-top: 16rpx;
				}
			}
		}
		.visit-wrapper{
			margin-bottom: 0;
			.header{
				justify-content: space-between;
				.opt{
					align-items: center;
					overflow: hidden;
					font-size: 26rpx;
					color: #949699;
					img{
						width: 20rpx;
						height: 32rpx;
						margin-top: 8rpx;
						margin-left: 8rpx;
					}
				}
			}
		}
		.preg-books{
			width: 714rpx;
			margin: 0 auto;
		}
	}
</style>
