<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.doctor_info.doctor_name}}</view>
					<view v-if="doctor_dept">
						<view class="over2">{{doctor_dept}}</view>
					</view>
				</view>
				<view class="bt over2" v-if="doctorInfo.doctor_info.doctor_desc">
					{{doctorInfo.doctor_info.doctor_desc}}
				</view>
			</view>
			<img class="right" :src="doctorInfo.doctor_info.avator" alt="" @click="enlargePicture(doctorInfo.doctor_info.avator)" v-if="doctorInfo.doctor_info.avator">
		</view>
		<view class="block desc-wrapper" v-if="doctorInfo.doctor_info.doctor_detail">
			<view class="title-wrapper flex">
				<view class="title">
					医生简介
				</view>
				<img :src="cssUrl+'right_bg.png'" alt="">
			</view>
			
			<view class="con">
			<!-- <view class="con over2 over4"> -->
				{{doctorInfo.doctor_info.doctor_detail}}
			</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 PfScMedium">{{item.hospital_name}} {{item.depart_name}}
								 <!-- {{item.depart_name}} -->
								  <!-- 科室 -->
								</text>
							<img :src="cssUrl+'index_comback.svg'" v-if="item.hospital_pos" @click="toLocation(item)">
						</view>
						<view class="date over2 over4">
							出诊：{{ item.workdate_desc }}
						</view>
					</view>
					<view class="right">
						<view class="flex right-wrapper" style="justify-content:flex-end;" v-if="item.hospital_pos">
							<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" leftButtonText="预约"></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:[],
				loginToken:false,
				state:'',
				workdate:[],
				workPlan:{
					1:'上午',
					2:'下午',
					3:'全天',
				},
				visitlist:[
					{
						"id": "16",
						"depart_id": "18",
						"name": "暴富喽",
						"date": "2024-09-28",
						"week_desc": "六",
						"time_interval": "08:00-08:30",
						"status_desc": "就诊完成",
						"hospital_name": "北京LY暴富",
						"depart_name": "针灸科"
					},
					{
						"id": "15",
						"depart_id": "18",
						"name": "刘老铁",
						"date": "2024-09-28",
						"week_desc": "六",
						"time_interval": "08:30-09:00",
						"status_desc": "候诊",
						"hospital_name": "北京LY暴富",
						"depart_name": "针灸科"
					},
					{
						"id": "14",
						"depart_id": "18",
						"name": "首富哈",
						"date": "2024-09-28",
						"week_desc": "六",
						"time_interval": "08:00-08:30",
						"status_desc": "过号",
						"hospital_name": "北京LY暴富",
						"depart_name": "针灸科"
					},
				]
			}
		},
		components:{
			tabbar,
			preBookList,
		},
		onLoad(option) {
			if(option.code && option.state) {
				this.code = option.code
				this.state = option.state
			}
		},
		async onShow() {
			this.doctor_id = getApp().globalData.doctorId
			if(!this.doctor_id) return

			var title = '预约就诊'
			if(this.code) title = '登录'
			uni.setNavigationBarTitle({
				title:title
			})
			var token = this.$token.getToken()
			if(this.code && this.state && !token) {
				var rebackPagePath = uni.getStorageSync('rebackPagePath')
				this.login()
				return
			}
			await this.getDoctorInfo()
		},
		// onReady() {
		// 	// console.log(this.doctorInfo,'this.doctorInfo');
		// 	uni.setNavigationBarTitle({
		// 		title: + '医生预约就诊'
		// 	})
		// },
		// "navigationBarTitleText": "预约就诊"

		methods: {
			toLocation(hospital){
				var that = this
				uni.showActionSheet({
					itemList: ['腾讯地图', '百度地图', '高德地图'],
					success: function (res) {
						var  lngLat = hospital.hospital_pos.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_pos+'&name='+hospital.hospital_name+'&src=uriapi&innersrc=uriapi',
						]
						// return;
						location.href = mapList[res.tapIndex]
					},
					fail: function (res) {
					}
				});
			},
			setLoginUserInfo(info) {
				var uinfo = new Object();
				this.$setuinfo.setUinfo(JSON.stringify(info))
			},
			login() {
				this.$http.req('common/get_user_info', {code:this.code,state:this.state}, 'POST').then(data=>{
					if(data == -1) return
					this.$settoken.setToken(data.jwttoken)
					
					this.setLoginUserInfo(data)
					this.getDoctorInfo()
					// var rebackPagePath = uni.getStorageSync('rebackPagePath')
					// if(rebackPagePath){
					// 	uni.navigateTo({
					// 		url:rebackPagePath
					// 	})
					// }
				});
				
			},
			async getDoctorInfo() {
				await this.$http.req('user/index_info', {}, 'GET').then(data=>{
					if(data == -1) return
					this.pageShow = true;
					let visitFlag = true;
					this.doctorInfo = data;
					if(this.doctorInfo.doctor_info &&  this.doctorInfo.doctor_info.depart_name && this.doctorInfo.doctor_info.depart_name.length>0){
						this.doctor_dept = this.doctorInfo.doctor_info.depart_name;
					}
					if(this.doctorInfo.hospital_departs && this.doctorInfo.hospital_departs.length>0){
						this.hospitals = this.doctorInfo.hospital_departs;
						this.doctor_dept = this.doctorInfo.hospital_departs[0]['depart_name'];
						this.doctorInfo.doctor_info.depart_name = this.doctor_dept;
					}else{
						visitFlag = false;
					}
					if(this.doctorInfo.visit_list && this.doctorInfo.visit_list.length>0){
						this.recentAppoint = this.doctorInfo.visit_list;
					}
					if(this.doctorInfo.workdate && Object.keys(this.doctorInfo.workdate).length > 0){
						this.workdate = this.doctorInfo.workdate;
					}else{
						visitFlag = false;
					}
					// if(visitFlag){//暂时注释
						// let workDatKeyArr = Object.keys(this.workdate);
						// let workDateValArr = Object.values(this.workdate);
						// let timeList = [];
						this.hospital_departs = this.doctorInfo.hospital_departs.map((item,index)=>{
							item.workdate_desc = this.doctorInfo.workdate_desc[item.depart_id]
							// let indexofNum = workDatKeyArr.indexOf(item.depart_id);
							// if(indexofNum > -1){
							// 	let departCurItem = workDateValArr[indexofNum];
							// 	let flag = Array.isArray(departCurItem)
							// 	if(flag){
							// 		item.visit_time = data.workdate_desc[item.depart_id]
							// 		item.plan =0
							// 	}else{
							// 		for(let key in departCurItem){
							// 			let dateItem = departCurItem[key];
							// 			if(Number(dateItem.plan) === 0)continue
							// 			timeList.push(dateItem.week_desc+this.workPlan[dateItem.plan])
							// 			item.visit_time = timeList.join('、')
							// 		}
							// 	}
							// }
							return item
						})
				});
			},
			enlargePicture(imgUrl) {
				  var list = new Array();
				  list[0] = imgUrl;
				  uni.previewImage({
					  loop: true,
					  urls: list
				  });
			},
			toVisitors(hospital){
				uni.setStorageSync('depart_id', hospital.depart_id)
				uni.setStorageSync('depart', JSON.stringify(hospital))
				uni.setStorageSync('doctor_info', JSON.stringify(this.doctorInfo))
				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;
				overflow-y: auto;
    			max-height: 200rpx;
			}
		}
		.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>
