<template>
	<view class="main">
		<view class="pr">
			<view class="header-content">
				<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/mybanner.png" style="width:100%;height:260rpx;"></image>
			</view>
			<view class="pr pt20" style="z-index:2">
				<view class="plr15">
					<!-- 登录切换 -->
					<view v-if="true" class="m-bg-white bdr4 pb20 header-box" style="border-radius: 32rpx;">
						<view class="plr20 pt20 m-dpflex m-justify-start " style="margin-bottom: 60rpx;">
							<view>
								<image binderror="_binderror" mode="scaleToFill" :src="src" style="width: 60px;height: 60px;border-radius: 50%;"></image>
								<view v-if="!renzheng" class="flex justify-center align-center" style="border-radius:30rpx ;font-size: 20rpx;padding: 10rpx;background-color: #EEAA3F;color: #FFFFFF;position: relative;top: -20rpx;"
								 @click="gorz">未认证</view>
								<view v-else class="flex justify-center align-center" style="border-radius:30rpx ;font-size: 20rpx;padding: 10rpx;background-color: #84BB43;color: #FFFFFF;position: relative;top: -20rpx;">已认证</view>
							</view>
							<view style="margin-left: 30rpx;">
								<view style="font-size: 32rpx;font-weight: 600;margin-bottom: 20rpx;">
									{{docterInfo.name}}
									<u-tag style="margin-left: 10rpx;" :text="lable1" bg-color="#E5F5FF" color="#0B73B9" border-color="#ffffff" />
									<u-tag style="margin-left: 10rpx;" :text="lable2" bg-color="#E5F5FF" color="#0B73B9" border-color="#ffffff" />
								</view>
								<view style="color:#666666 ;">
									{{docterInfo.label}}

								</view>
							</view>
							<view class="pr tr m-flex" style="height: 100%;">
								<navigator hoverClass="none">
									<image class="header-img" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/home/bianji.png"
									 @click="grxx"></image>
								</navigator>
							</view>
						</view>
						<view class="pr m-xcenter mt30 plr20">
							<view class="m-flex tl f14 m-ycenter dpb">
								<view class="m-gray-big f20 fb pr10">{{docterInfo.service_days}}</view>
								<view class="m-gray-letter mt5 f12">服务天数</view>
							</view>
							<view bindtap="" class="m-flex tl f14 m-ycenter">
								<view class="m-gray-big f20 fb">{{docterInfo.service_persons}}</view>
								<view class="m-gray-letter mt5 f12">服务人次</view>
							</view>
							<view bindtap="" class="m-flex tl f14 m-ycenter">
								<view class="m-gray-big f20 fb">{{docterInfo.eva_num}}</view>
								<view class="m-gray-letter mt5 f12">评价（张）</view>
							</view>
							<view bindtap="" class="m-flex tl f14 m-ycenter">
								<view class="m-gray-big f20 fb">{{docterInfo.score}}</view>
								<view class="m-gray-letter mt5 f12">评分</view>
							</view>
						</view>
					</view>
					<view v-else class="m-bg-white bdr4 pb20 header-box" style="border-radius: 32rpx;">
						<view class="plr20 pt20 m-dpflex m-justify-start m-align-center">
							<image binderror="_binderror" mode="scaleToFill" :src="nosrc" style="width: 60px;height: 60px;border-radius: 50%;"></image>
							<view class="">
								<view style="padding-left: 20rpx;">
									<view style="font-size: 24rpx;color: #666666;margin-bottom: 10rpx;">你还未登录</view>
									<view style="font-size: 32rpx;color: #EEAA3F;">点击登录</view>
								</view>
							</view>
						</view>
						<view class="pr m-bottom-line mt15 mb10"></view>
						<view class="pr m-xcenter mt30 plr20">
							<view class="m-flex tl f14 m-ycenter dpb">
								<view class="m-gray-big f20 fb pr10">0</view>
								<view class="m-gray-letter mt5 f12">服务天数</view>
							</view>
							<view bindtap="" class="m-flex tl f14 m-ycenter">
								<view class="m-gray-big f20 fb">0</view>
								<view class="m-gray-letter mt5 f12">服务人次</view>
							</view>
							<view bindtap="" class="m-flex tl f14 m-ycenter">
								<view class="m-gray-big f20 fb">0</view>
								<view class="m-gray-letter mt5 f12">评价（张）</view>
							</view>
							<view bindtap="" class="m-flex tl f14 m-ycenter">
								<view class="m-gray-big f20 fb">5.0</view>
								<view class="m-gray-letter mt5 f12">评分</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="padding-lr">
				<view class="gridstyle">
					<u-grid :col="4" :border="false">
						<u-grid-item @click="zixun">
							<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/home/hzzx.png"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-xs">患者咨询</view>
						</u-grid-item>
						<u-grid-item @click="mz">
							<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/home/mzyy.png"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-xs">门诊预约</view>
						</u-grid-item>
						<u-grid-item @click="pb">
							<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/home/mzpb.png"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-xs">门诊排班</view>
						</u-grid-item>
						<u-grid-item @click="patient">
							<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/home/hzgl.png"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-xs">患者管理</view>
						</u-grid-item>
						<u-grid-item @click="yijian">
							<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/home/yjgl.png"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-xs">意见管理</view>
						</u-grid-item>
						<u-grid-item @click="setservice">
							<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/home/fwsz.png"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-xs">服务设置</view>
						</u-grid-item>
						<u-grid-item>
							<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/home/daiding.png"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-xs">待定模块</view>
						</u-grid-item>
						<u-grid-item>
							<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/home/daiding.png"
							 shape="circle"></u-image>
							<view class="grid-text margin-top-xs">待定模块</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view class="tltleStyle">
				<view class="flex justify-between">
					<u-section title="通知" font-size="40" :show-line="false" :bold="true" :right="false"></u-section>
					<u-button size="mini" @click="allread" shape="circle">全部已读</u-button>
				</view>
			</view>
			<view class="padding-lr">
				<view v-for="(item,index) in docterMessageList" :key="index" @touchstart.prevent="touchstart(index)"
				 @touchend.prevent="touchend" class="padding-lr-sm padding-tb-sm bg-white margin-top-sm" style="border-radius: 32rpx;">
					<view class="flex justify-start align-center">
						<!-- 1为订单通知 2为系统通知 3为通知类型 -->

						<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/home/ddtz.png" v-if="item.type==1" style="width: 30rpx;height: 30rpx;"></image>
						<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/home/xttz.png" v-else-if="item.type==2"
						 style="width: 30rpx;height: 30rpx;"></image>
						<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/home/tzlx.png" v-else style="width: 30rpx;height: 30rpx;"></image>
						<text class="text-lg margin-left-xs">{{item.type}}</text>
						<text class="flex-sub text-right">{{item.created_at}}</text>
					</view>
					<view class="margin-top-sm">
						{{item.content}}
					</view>
					<view class="text-right" style="position: relative">
						<u-badge size="mini" :absolute="false" type="error" :is-dot="true"></u-badge><text class="margin-left-xs">{{item.status}}</text>
					</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</view>
		<view class="lianxiwomen">
			<view class="">
				联系
			</view>
			<view class="">
				我们
			</view>
		</view>
		<u-modal v-model="rzModal" :content="content" confirm-text="去认证" confirm-color="#0B73B9" width="80%"
		 :show-cancel-button="true" content="您还没有成为认证医生！" :title-style="{fontWeight:'550'}" @confirm="qdrz"></u-modal>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';

	import store from '@/store'
	export default {
		computed: {
			...mapGetters({
				hasLogin: 'verifyJwt'
			}),
			...mapState(['user'])
		},
		data() {
			return {
				docterInfo: {
					name: "",
					avatar: "",
					eva_num: "",
					is_then: "",
					label: "",
					score: "",
					service_days: "",
					service_persons: ""
				},
				docterMessageList: [],
				//认证弹窗
				rzModal: false,

				//没登录头像
				nosrc: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg',
				//登陆的头像
				src: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg',
				//认证
				renzheng: false, //true已认证
				//标签
				lable1: '30年经验',
				lable2: '快狠准',
				list: [{

					orderlx: 1 // 显示的订单
				}, {
					orderlx: 2 // 显示的订单
				}, {
					orderlx: 3 // 显示的订单
				}, {
					orderlx: 1 // 显示的订单
				}, {
					orderlx: 2 // 显示的订单
				}, {
					orderlx: 3 // 显示的订单
				}, {
					orderlx: 1 // 显示的订单
				}]

			}
		},
		onShow() {
			if (!this.hasLogin) {
				uni.showModal({
					title: "提示",
					content: "尚未登录，请前往登录",
					confirmText: "去登录",
					showCancel: false,
					success() {
						uni.navigateTo({
							url: "../login/login"
						})
					}
				})
			};
			// 获取当前登陆人信息
			this.getDocterInfo();
			// 获取当前登录人接收消息
			this.getDocterMessage();
		},

		mounted() {

		},
		methods: {
			getDocterInfo: async function() {
				let res = await this.$request.post("doctor/doctorInfor", {});
				this.docterInfo.name = res.data.name;
				this.docterInfo.avatar = res.data.avatar;
				this.docterInfo.eva_num = res.data.eva_num;
				this.docterInfo.is_then = res.data.is_then;
				this.docterInfo.label = res.data.label;
				this.docterInfo.score = res.data.score;
				this.docterInfo.service_days = res.data.service_days;
				this.docterInfo.service_persons = res.data.service_persons;
			},
			getDocterMessage: async function() {
				let res = await this.$request.post("docterMessage/docterMessageList", {
					curPage: 1,
					pageSize: 10
				});
				this.docterMessageList = res.data
			},
			//全部已读
			allread: async function() {
				let res = await this.$request.post("docterMessage/okDocterMessage", {});
				console.log(res);
				if (res.message == "success") {
					this.getDocterMessage();
				}
			},

			//长按删除
			async touchstart(index) {
				let that = this;
				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
				this.Loop = setTimeout(async function() {
					uni.showModal({
						title: '删除',
						content: '请问要删除本条消息吗？',
						success: async function(res) {
							if (res.confirm) {
								let res = await this.$request.post("docterMessage/delDocterMessage", {
									id: that.docterMessageList[index].id
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}.bind(this), 1000);
			},


			// 跳转服务设置
			setservice(e) {
				uni.navigateTo({
					url: '/pages/service/setservice'
				})
			},
			//跳转患者管理
			patient(e) {
				uni.navigateTo({
					url: '/pages/patient/patient'
				})
			},
			editdocter() {
				uni.navigateTo({
					url: '../index/index'
				})
			},
			touchend() {
				console.log('结束')
				clearInterval(this.Loop);
			},

			//跳转患者咨询
			zixun() {
				uni.navigateTo({
					url: '/pages/zixun/zixun'
				})
			},
			//排班
			pb() {
				uni.navigateTo({
					url: '/pages/Scheduling'
				})
			},
			//意见
			yijian() {
				uni.navigateTo({
					url: '/pages/opinion/opinion'
				})
			},
			//门诊
			mz() {
				uni.navigateTo({
					url: '/pages/menzhen/menzhen'
				})
			},
			//个人信息 右上角的编辑按钮
			grxx() {
				uni.navigateTo({
					url: '/pages/information/information'
				})
			},
			//点击未认证
			gorz() {
				this.rzModal = true
			},
			qdrz() {
				uni.navigateTo({
					url: '/pages/login/doctorRenzheng'
				})
			}
		},
		//页面到底监听
		onReachBottom() {
			console.log('到底');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>
<style scoped>
	@import url("./index.css");

	.header-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: -1;
		overflow: hidden;
		box-sizing: border-box;
	}

	.tltleStyle {
		padding: 0 30rpx;
		margin-top: 50rpx;
	}

	.header-box {
		box-shadow: 0px 8rpx 34rpx -6rpx rgba(248, 151, 164, 0.13);
	}

	.header-img {
		width: 36rpx;
		height: 36rpx;
	}

	.gridstyle {
		height: 450rpx;
		background-color: #fff;
		/* border-radius: 32rpx; */
		display: flex;
		align-items: center;
		box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);
		margin-top: 20rpx;
	}

	.lianxiwomen {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #fff;
		position: fixed;
		right: 10rpx;
		bottom: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);
		z-index: 99;
	}

	.tip {
		position: absolute;
		top: 0;
		right: 20%;
		bottom: 0;
		background-color: red;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
	}

	.msg {
		top: -3rpx;
		right: -9rpx;
	}

	swiper {
		height: 320rpx;
	}

	.swiper-wrapper {
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.swiper-item {
		width: 100%;
		height: 300rpx;
		box-shadow: 0 26rpx 40rpx 0 rgba(255, 255, 255, 0.31);
		background: url("http://file.supermm.me/miniProgram/images/personal/bg_doc.png") no-repeat bottom center;
	}

	.dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: -40rpx;
		display: flex;
		justify-content: center;
	}

	.dots .dot {
		margin: 0 8rpx;
		width: 14rpx;
		height: 14rpx;
		background: #E4E4E4;
		border-radius: 8rpx;
		transition: all .6s;
	}

	.dots .dot.active {
		width: 24rpx;
		background: #FF7B72;
	}

	.game-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.game-item {
		height: 100%;
		background: url("https://file.supermm.me/h5/wechat-h5/integral/personeBg001.jpg") no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		border-radius: 100rpx;
	}
</style>
