<template>
	<nav-bar :navbar-data='navbarData' @scrolltoupper="scrolltoupper"></nav-bar>
	<view class="message" :style="{paddingTop: height + 'px', height: 'calc(100vh - '+ height +'px)'}">
		<view class="message-title">
			<!-- <view class="mes-show" @tap="turnType" data-index="2001">
				<view class="mes-icon">
					<view>
						<image :src="imgHost +'/images/icon/graphicIcon@2x.png'" style="width:50rpx;height:50rpx;" />
					</view>
					<view class="mes-text">图文咨询预约</view>
				</view>
				<view class="mes-tip">
					<view class="image-dot-tip" v-if="graphicUnread && graphicUnread >0">
						{{graphicUnread && graphicUnread >0 ? graphicUnread : ''}}
					</view>
					<uni-icons type="right" size="17" />
				</view>
			</view>
			<view class="mes-show" @tap="turnType" data-index="2002">
				<view class="mes-icon">
					<view>
						<image :src="imgHost +'/images/icon/videoIcon@2x.png'" style="width:50rpx;height:45rpx;" />
					</view>
					<view class="mes-text">视频问诊预约</view>
				</view>
				<view class="mes-tip">
					<view class="image-dot-tip" v-if="videoUnread && videoUnread >0">
						{{videoUnread && videoUnread >0 ? videoUnread : ''}}
					</view>
					<uni-icons type="right" size="17" />
				</view>
			</view>
			<view class="mes-show" @tap="turnType" data-index="2006">
				<view class="mes-icon">
					<view>
						<image :src="imgHost +'/images/icon/icon_order.png'" style="width:50rpx;height:45rpx;" />
					</view>
					<view class="mes-text">待评价订单</view>
				</view>
				<view class="mes-tip">
					<view class="image-dot-tip" v-if="evaluateUnread && evaluateUnread >0">
						{{evaluateUnread && evaluateUnread >0 ? evaluateUnread : ''}}
					</view>
					<uni-icons type="right" size="17" />
				</view>
			</view> -->
			<!-- <view class="message-title-img" bindtap="turnType" data-index="2001">
				<van-icon custom-class="titel-img" info="{{graphicUnread && graphicUnread >0 ? graphicUnread : ''}}"
					name="{{imgHost}}/images/icon/icon_consultation.png" />
				<view style="margin-left: -29rpx;margin-top: 25rpx;">图文咨询预约</view>
			</view>
			<view class="message-title-img" bindtap="turnType" data-index="2002">
				<van-icon custom-class="titel-img" info="{{videoUnread && videoUnread >0 ? videoUnread : ''}}"
					name="{{imgHost}}/images/icon/icon_video.png" />
				<view style="margin: 25rpx 0 0 -30rpx;">视频问诊预约</view>
			</view>
			<view class="message-title-img" bindtap="turnType" data-index="2006">
				<van-icon custom-class="titel-img" info="{{evaluateUnread && evaluateUnread >0 ? evaluateUnread : ''}}"
					name="{{imgHost}}/images/icon/icon_order.png" />
				<view style="margin: 25rpx 0 0 -11rpx;">待评价订单</view>
			</view> -->
		</view>

		<view class="message-list">
			<scroll-view v-if="messageList.length!=0" class="message-scroll" scroll-y="true"
				@scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" :scroll-into-view="scrollSta"
				scroll-with-animation @scroll="handleScroll" style="height: 100%">
				<!-- <view>
						<van-icon custom-class="pay-img" dot="{{item.statusCode==='U'}}" wx:if="{{item.eventCode=='2005'}}"
							name="{{imgHost}}/images/icon/icon_billing_message.png" />
						<van-icon custom-class="per-img"
							info="{{item.statusCode==='U' && item.unReadMsg > 0 ? (item.unReadMsg > 99 ? '···' : item.unReadMsg) : ''}}"
							wx:if="{{item.eventCode=='2009'}}" name="{{item.docImg }}" fit="contain" />
					</view> -->
				<uni-swipe-action>
					<uni-swipe-action-item v-for="(item,index) in messageList" :key="index" :threshold="0"
						:data-id="item.ID" @click="detelMessage" @change="messageItemChange($event, item.ID)"
						:right-options="options2">
						<view @click="changeStatus" :data-page="item" :data-statusid="item.statusID"
							:data-url="item.jumpPages" style="width: 100%;">
							<view v-if="item.eventCode=='2005'|| item.eventCode=='2009'" class="message-list-per">
								<view v-if="item.eventCode=='2005'"
									style="padding: 30rpx 0;position: relative; width: 110rpx;">
									<view class="image-css"
										:style="{background: 'url('+ imgHost +'/images/icon/icon_billing_message.png) no-repeat', backgroundSize: 'cover'}">
										<view class="image-dot" v-if="item.statusCode==='U'"></view>
									</view>
								</view>

								<view v-if="item.eventCode=='2009'"
									style="padding: 30rpx 0;position: relative; width: 120rpx;">
									<view class="image-css"
										:style="{background: 'url('+ (item.sendUser === 'KF001' ? kefuLogo : item.docImg) +') no-repeat', backgroundSize: 'cover', borderRadius: '50%'}">
										<view class="image-dot-doc" v-if="item.statusCode==='U' && item.unReadMsg > 0">
											{{ item.unReadMsg > 99 ? '···' : item.unReadMsg }}
										</view>
									</view>
								</view>
								<view class="message-list-intro"
									:style="{borderBottom: (index + 1) === messageList.length ? '0' : '1rpx solid #E5E5E5'}">
									<view class="message-list-intro-up">
										<text class="message-list-intro-name"
											v-if="item.eventCode==='2009'">{{item.sendUserName}}</text>
										<text class="message-list-intro-name" v-else>{{item.content}}</text>
										<text class="message-list-intro-date">{{item.dateTime}}</text>
									</view>
									<view class="message-list-intro-down" v-if="item.eventCode=='2005'">
										医生【{{item.sendUserName}}】以为您开具治疗方案，请及时支付。</view>
									<view class="message-list-intro-down" v-if="item.eventCode=='2009'">{{item.content}}
									</view>
								</view>
							</view>

							<block v-if="item.eventCode==='2015'">
								<view class="message-list-intro2">
									<view class="message-list-intro-up" style="margin-bottom:10rpx">
										<view class="message-list-intro-tip">
											<view class="message-list-intro-name" style="font-size:34rpx;">
												{{item.content}}
											</view>
											<view class="message-tip" v-if="item.statusCode!=='R'"></view>
										</view>
										<view>
											<text class="message-list-intro-date">{{item.dateTime}}</text>
										</view>
									</view>
									<view class="message-list-intro-down2">{{item.text}}</view>
								</view>
							</block>
						</view>
						<!-- <view slot="right" class="detel" @tap="detelMessage" :data-id="item.ID">删除</view> -->
					</uni-swipe-action-item>
				</uni-swipe-action>
				<loadmore :status="loadMoreStatus" fontSize="24" iconColor="#1890FF" loadingColor="#1890FF"
					:line="true" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/navBar/index.vue'
	import vanDivider from '@/components/divider/index.vue'
	import Loadmore from '@/components/loadmore/loadmore.vue'
	import $http from "@/utils/https";
	import Util from "@/utils/utils";
	import httpConfig from '@/utils/httpConfig';
	const app = getApp();

	export default {
		components: {
			'nav-bar': NavBar,
			'van-divider': vanDivider,
			'loadmore': Loadmore
		},
		data() {
			return {
				userData: {},
				imgHost: httpConfig && httpConfig.imgHost,
				windowHost: httpConfig && httpConfig.ipDeault,
				messageList: [],
				height: app.globalData.height,
				navbarData: {
					isGoHome: false,
					isGoBack: false,
					title: "消息",
					isMonitorNewMessage: 'message'
				},
				currentPage: 1,
				unShowMesNum: 0,
				scrollSta: "", ///滚动条位置

				scrollShow: true, ///默认提示信息为数据加载成功
				visible: false,
				treeSelectData: [],
				options2: [{
					text: '删除',
					style: {
						backgroundColor: '#FF3300'
					}
				}],
				currentSwipActionID: null, // 当前操作的ID
				isLoading: false, // 消息列表加载状态
				total: 0,
				unreadNmber: 0, // 未读记录总数
				scrollHeight: 0,
				kefuLogo: httpConfig.imgHost + "/images/icon/kefu-logo.png",
				graphicUnread: '',
				videoUnread: '',
				evaluateUnread: '',
				loadMoreStatus: 'loadmore',
			}
		},
		onShow: function() {
			this.upDateUserData();
			if (typeof this.getTabBar === 'function' &&
				this.getTabBar()) {
				this.getTabBar().setData({
					selected: 2
				})
			}
		},
		onHide() {
			this.setData({
				scrollHeight: 0,
				loadMoreStatus: 'loadmore'
			});
		},
		methods: {
			// 获取消息列表
			getMessageList: Util.debounce(function(page, type, lastMsg) {
				const {
					unShowMesNum,
					loadMoreStatus
				} = this;
				if (unShowMesNum == 0 && loadMoreStatus != 'loadmore') {
					this.setData({
						loadMoreStatus: 'nomore'
					});
					return;
				} else {
					if (page !== 'init') {
						this.setData({
							loadMoreStatus: 'loading'
						});
					}
				}
				let data = {
					params: [{
						receiveUser: this.userData.hisPatID,
						//receiveUser: "40513",
						receiveTypeCode: "P",
						hospCode: this.$cache.get('userData').hisHospID,
						messageTypeCode: 'all'
					}],
					pagination: [{
						pageSize: 10,
						currentPage: page === 'init' ? 1 : this.currentPage
					}]
				}
				$http.post("urlS", this, {
					namespace: "Y",
					code: "03100201",
					data: data,
					namespace: "Y",
					success: function(res) {
						this.setData({
							scrollShow: true
						}, () => {
							if (+res.errorCode === 0) {
								if (res.result && res.unreadNmber > 0) {
									uni.setTabBarBadge({
										index: 2,
										text: res.unreadNmber > 99 ? '···' : (res
											.unreadNmber + '')
									})
								} else {
									uni.removeTabBarBadge({
										index: 2
									})
								}
								if (type === "toupper") {
									this.processingMessageData(res.result, res.unreadNmber,
										lastMsg);
								} else {
									let messageList = type === "onShow" ? res.result : this
										.messageList.concat(res.result);
									for (var i = 0; i < messageList.length; i++) {
										let url = messageList[i] && messageList[i].docImg ?
											messageList[i].docImg : "";
										messageList[i].docImg = url.indexOf("http") !== -1 ?
											url : this.windowHost + url;
									}
									this.setData({
										isLoading: false,
										messageList,
										unShowMesNum: res.remainingQty,
										total: res.totalNum,
										graphicUnread: res.unreadObj ? res.unreadObj
											.graphicUnread : '',
										videoUnread: res.unreadObj ? res.unreadObj
											.videoUnread : '',
										evaluateUnread: res.unreadObj ? res.unreadObj
											.evaluateUnread : '',
										loadMoreStatus: !res.remainingQty ? 'nomore' :
											'loadmore',
									})
								}
							} else {
								this.setData({
									messageList: []
								})
							}
						})
					}
				})
			}),

			// 跳转问诊、评论的消息页面
			turnType: Util.debounce(function(e) {
				let messageTypeCode = e.currentTarget.dataset.index;
				uni.navigateTo({
					url: '/pages/message/pages/messageDetail/messageDetail?messageTypeCode=' +
						messageTypeCode,
				})
			}),

			// 滚动条到顶部事件
			scrolltoupper() {
				let scrollSta = this.messageList && this.messageList.length > 0 ? 'm' + (this.messageList[0].ID) : '';
				this.getMessageList('init', "toupper", scrollSta)
			},

			// 滚动条到底部事件
			scrolltolower() {
				console.log('滚动到底部了')
				let currentPage = ++this.currentPage;
				let scrollSta = this.messageList && this.messageList.length > 0 ? 'm' + this.messageList[this.messageList
					.length - 1].ID : '';
				this.setData({
						scrollSta,
						scrollShow: false,
						currentPage,
						loadMoreStatus: 'loading'
					},
					() => {
						this.getMessageList();
					}
				);
			},

			// 更新userData数据
			upDateUserData() {
				let newUserData = this.$cache.get('userData');
				this.setData({
					userData: newUserData,
					currentPage: 1,
				}, () => {
					this.getMessageList("init", "onShow");
				});
			},

			onChange(event) {
				const {
					picker,
					value,
					index
				} = event.detail;
				console.log(picker, value, index)
			},

			onClickShow() {
				this.setData({
					visible: true
				});
			},

			onClose() {
				this.setData({
					visible: false
				});
			},

			// 获取当前滚动高度
			handleScroll: function(event) {
				console.log('handleScroll event', event)
				let {
					scrollTop
				} = event.detail
				this.setData({
					scrollHeight: scrollTop
				})
			},

			// 上拉消息查看是否有新消息
			processingMessageData(data, num, lastMsg) {
				if (num >= this.total) {
					let concatArr = data.concat(this.messageList);
					let res = [];
					for (var i = 0, arrayLen = concatArr.length; i < arrayLen; i++) {
						for (var j = 0, resLen = res.length; j < resLen; j++) {
							if (concatArr[i].ID === res[j].ID) {
								break;
							}
						}
						if (j === resLen) {
							res.push(concatArr[i])
						}
					}
					this.setData({
						messageList: res,
						total: num
					}, () => {
						if (this.scrollHeight > 80) {
							this.setData({
								scrollSta: lastMsg
							})
						}
					})
				}
			},

			///修改消息状态并跳转
			changeStatus(e) {
				let item = e.currentTarget.dataset.page;
				let url = e.currentTarget.dataset.url;
				let data = {
					params: [{
						data: [item.ID],
						userID: "P",
						statusID: '2'
					}]
				}
				$http.post("urlS", this, {
					namespace: "Y",
					code: "03100098",
					data: data,
					namespace: "Y",
					success: function(res) {
						if (+res.errorCode === 0) {
							console.log(item)
							if (item.eventCode === '2015') {
								let {
									messageList
								} = this;
								let index = ""
								for (var i = 0; i < messageList.length; i++) {
									if (messageList[i].ID == item.ID) {
										index = i
									}
								}
								messageList[index].statusCode = "R"
								this.setData({
									messageList: messageList
								}, () => {
									console.log("messageList", messageList)
								})
							}
							if (item.eventCode === '2004') {
								uni.switchTab({
									url: '/pages/tabBar/order/order',
								})
								return;
							} else if (url !== "") {
								uni.navigateTo({
									url: url,
								})
							}
						} else {
							console.log(res.errorMessage)
						}
					}
				})
			},

			// swipeAction change
			messageItemChange: function(type, id) {
				if (type == 'right') {
					this.setData({
						currentSwipActionID: id
					})
				}
			},

			//删除消息
			detelMessage(e) {
				let id = this.currentSwipActionID;
				let {
					messageList
				} = this;
				let index = ""
				for (var i = 0; i < messageList.length; i++) {
					if (messageList[i].ID == id) {
						index = i
					}
				}
				messageList.splice(index, 1);
				this.setData({
					messageList: messageList
				})
				this.changeDeleteStatus(id)
			},

			///修改删除状态
			changeDeleteStatus(id) {
				let data = {
					params: [{
						ID: id
					}]
				}
				$http.post("urlS", this, {
					namespace: "Y",
					code: "03100212",
					data: data,
					namespace: "Y",
					success: function(res) {
						if (+res.errorCode === 0) {}
					}
				})
			},

			getStatus() {
				console.log("11111111111111111")
			},

			/**
			 * 用户点击右上角分享
			 */
			onShareAppMessage: function(res) {
				if (res.from === 'button') {
					// 来自页面内转发按钮
					console.log(res.target)
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	/* .message-title {
	  background: #FFFFFF;
	  padding: 30rpx 30rpx 30rpx 25rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding-left: 73rpx;
	  margin-bottom: 20rpx;
	  font-size: 28rpx;
	  font-family: PingFangSC-Regular, PingFang SC;
	  font-weight: 400;
	  color: #333333;
	  line-height: 40rpx; 
	} */

	.titel-img {
		.van-icon__image {
			width: 108rpx !important;
			height: 84rpx !important;
		}

		.van-info {
			left: 90rpx;
			transform: none !important;
			font-size: 20rpx !important;
			min-width: 28rpx !important;
			height: 28rpx !important;
			padding: 16rpx !important;
			align-items: center;
			display: flex;
			justify-content: center;
		}
	}

	.per-img {
		.van-icon__image {
			width: 80rpx !important;
			height: 80rpx !important;
			border-radius: 50%;
		}

		.van-info {
			left: 60rpx;
			top: -7rpx;
			transform: none !important;
			font-size: 20rpx !important;
			min-width: 28rpx !important;
			height: 28rpx !important;
			padding: 8rpx !important;
			align-items: center;
			display: flex;
			justify-content: center;
		}

		.van-icon__image {
			width: 80rpx !important;
			height: 80rpx !important;
			border-radius: 50%;
		}
	}

	.image {
		&-css {
			width: 80rpx;
			height: 80rpx;
		}

		&-dot {
			width: 16rpx;
			min-width: 0;
			height: 16rpx;
			background-color: #F5222D;
			border-radius: 100%;
			margin-left: 66rpx;

			&-doc {
				position: absolute;
				top: 36rpx;
				right: 40rpx;
				box-sizing: border-box;
				white-space: nowrap;
				text-align: center;
				-webkit-transform: translate(50%, -50%);
				transform: translate(50%, -50%);
				-webkit-transform-origin: 100%;
				transform-origin: 100%;
				min-width: 16px;
				min-width: var(--info-size, 16px);
				padding: 0 3px;
				padding: var(--info-padding, 0 3px);
				color: #fff;
				color: var(--info-color, #fff);
				font-weight: 500;
				font-weight: var(--info-font-weight, 500);
				font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
				font-family: var(--info-font-family, PingFang SC, Helvetica Neue, Arial, sans-serif);
				line-height: 14px;
				line-height: calc(var(--info-size, 16px) - var(--info-border-width, 1px)*2);
				background-color: #ee0a24;
				background-color: var(--info-background-color, #ee0a24);
				border: 1px solid #fff;
				border: var(--info-border-width, 1px) solid var(--white, #fff);
				border-radius: 16px;
				border-radius: var(--info-size, 16px);
				font-size: 20rpx !important;
			}
		}
	}

	.message {
		box-sizing: border-box;

		&-title-img {
			margin-left: 35rpx;
			margin: 0 25rpx;
			width: 200rpx;
		}

		&-list {
			height: calc(100% - 20rpx);
			background: #FFFFFF;
			margin-top: 20rpx;

			&-per {
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #E5E5E5;
			}

			&-intro {
				padding: 30rpx 0;
				width: calc(100% - 110rpx);
				box-sizing: border-box;

				&-name {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
				}

				&-up {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 8rpx;
				}

				&-date {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
				}

				&-down {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 36rpx;
					letter-spacing: 2rpx;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}

				&-down2 {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 45rpx;

				}

				&-tip {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			&-intro2 {
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E5E5E5;
			}
		}

		&-tip {
			width: 16rpx;
			height: 16rpx;
			background: #FB3349;
			border: 2rpx solid #FFFFFF;
			border-radius: 50%;
			margin-left: 10rpx;
		}
	}

	.mes {
		&-show {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFFFFF;
			padding: 20rpx;
			border-bottom: 1px solid #eeeeee;
		}

		&-icon {
			display: flex;
			justify-content: left;
			align-items: center;
		}

		&-tip {
			display: flex;
			justify-content: right;
			align-items: center;
		}

		&-text {
			margin-left: 30rpx;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
	}

	.image-dot-tip {
		box-sizing: border-box;
		white-space: nowrap;
		text-align: center;
		min-width: 32rpx;
		padding: 4rpx 10rpx;
		color: #fff;
		line-height: 28rpx;
		background-color: #f33f0e;
		border: 1px solid #fff;
		border-radius: 32rpx;
		font-size: 26rpx;
	}

	.detel {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f33f0e;
		padding: 0 19rpx;
		color: #ffffff;
	}
</style>