<template>
	<view class="container">
		<view class="all">
			<view class="mesTop">
				<view class="meMss" @click="onClickwd">
					<view>
						<image src="../../static/image/wodexiaoxi_icon_1@2x.png" style="width: 88rpx;height: 88rpx;" mode="" />
					</view>
					<text :class="['mesText',index == 0 ?'active':'']">我的消息</text>
				</view>
				<view class="XiTongMss" @click="onClickxx">
					<view>
						<image src="../../static/image/xitongxiaoxi@2x.png" style="width: 88rpx;height: 88rpx;" mode="" />
					</view>
					<text :class="['mesText',index == 1 ?'active':'']">系统通知</text>
				</view>
				<view class="LiuYanMss" @click="onClickly">
					<view>
						<image src="../../static/image/liuyanxiaoxi@2x.png" style="width: 88rpx;height: 88rpx;" mode="" />
					</view>
					<text :class="['mesText',index == 2 ?'active':'']">留言消息</text>
				</view>
			</view>
			<view class="mesBav" v-if="index == 0" style="padding-top: 274rpx;box-sizing: border-box;">
				<view class="mesBavRow" v-for="(item,index) in AnList" :key="index" @click="messageDetail(item.type,item.user_id)">
					<view class="mesBavRowImg" style="position: relative;">
						<image :src="item.user.avatar" style="width: 80rpx;height: 80rpx;border-radius: 50%;" mode=""></image>
						<view class="redCircle" v-if="item.news.is_read==0">
							
						</view>
					</view>
					<view class="mesBavRowText">
						<view class="mesBavRowTop">
							<text class="mesBavRowName">{{item.user.nickname}}</text>
							<text class="mesBavRowTime">{{item.news.createtime}}</text>
						</view>
						<view style="width: 530rpx;overflow: hidden;white-space: nowrap;max-height: 40rpx;">
							<text class="mesBavRowTitleTe">{{item.news.content}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="mesAcc" v-if="index == 1">
				<view class="mesAccRow" v-for="(item,index) in soueList" :key="index" @click="LookSystem(item.id)">
					<view class="mesOneRow">
						<text class="mesOneTitle">{{item.title}}</text>
						<text class="mesOneTime">{{item.time}}</text>
					</view>
					<view class="mesTwoRow">
						<rich-text :nodes="item.content"></rich-text>
					</view>
					<view class="mesTreRow">
						<text class="mesTreTitle">查看详情</text>
						<image src="../../static/image/gengduo_icon_5@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
					</view>
				</view>
			</view>
			<view class="mesNav" v-if="index==2">
				<view class="mesNavRow" v-for="(item,index) in dataList" :key="index" @click="messageList(item.goods_id)">
					<view class="mesNavImg">
						<image :src="item.user.avatar" style="width: 80rpx;height: 80rpx;border-radius: 50%;" mode=""></image>
					</view>
					<view class="mesNavleft">
						<view class="mesNavTitle">
							<text class="textTop">{{item.user.nickname}}</text>
							<text class="textNav">{{item.content}}</text>
							<text class="textTime">{{item.createtime}}</text>
						</view>
						<view class="mesNavRight">
							<image :src="item.goods.images[0]" style="width: 130rpx;height: 130rpx;border-radius: 16rpx;" mode=""></image>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="meFa">
			<van-popup :show="show" position="bottom" custom-style="height: 322rpx;border-top-left-radius: 50rpx;border-top-right-radius: 50rpx;"
			 @close="onClose">
				<view class="meFaShow">
					<view class="OnBuyProject" @click="OnBuyProject">
						<image src="../../static/image/maixianzhi_icon@2x.png" style="width: 180rpx;height: 180rpx;" mode=""></image>
					</view>
					<view class="OnMaiProject" @click="OnMaiProject">
						<image src="../../static/image/faxuqiu_icon_1@2x.png" style="width: 180rpx;height: 180rpx;" mode=""></image>
					</view>
				</view>
				<view class="onFaClose" @click="onClose">
					<text class="onClose">取消</text>
				</view>
			</van-popup>
		</view>
		<ul class="bottom">
			<li @click="goIndex">
				<image src="../../static/image/xianzhi_icon_5@2x.png" style="width: 48rpx;height: 44rpx;" mode=""></image>
				<text class="botText">闲置</text>
			</li>
			<li @click="goActuvity">
				<image src="../../static/image/huodong_icon_5@2x.png" style="width: 48rpx;height: 44rpx;" mode=""></image>
				<text class="botText">活动</text>
			</li>
			<li @click="goFa">
				<view class="fabu">
					<image src="../../static/image/fabu_icon_1@2x.png" style="width: 88rpx;height: 88rpx;" mode=""></image>
					<text class="botTextFa">发布</text>
				</view>
			</li>
			<li @click="goMessage" style="position: relative;">
				<image src="../../static/image/xioaxi_icon_1@2x.png" style="width: 48rpx;height: 44rpx;" mode=""></image>
				<text class="botTextXX">消息</text>
				<view class="num" v-if="messageNum!==0">
						{{messageNum>99?'99+':messageNum}}
				</view>
			</li>
			<li @click="goMe">
				<image src="../../static/image/wode_icon_5@2x.png" style="width: 48rpx;height: 44rpx;" mode=""></image>
				<text class="botText">我的</text>
			</li>
		</ul>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		onShow() {
			this.myData()
			this.messageNums()//留言个数
		},
		data() {
			return {
				dataList: [],
				soueList: [],
				AnList: [],
				index: 0,
				show: false,
				pageNum:1,
				messageNum:0 //消息个数
			}
		},
		 onReachBottom: function () {
			this.pageNum=this.pageNum+1;
			if(this.index==0){
				this.myData()
			}else if(this.index==1){
				this.systemInfo()
			}else{
				this.message()
			}
		  },
		created() {
			
		},
		methods: {
			//点击我的消息
			//买家
			myData(){
				request.get('/api/mation/myMsg',{
					page:this.pageNum,
					rows:20
				}).then(res=>{
					let lists = this.pageNum == 1 ? res.data.data : this.AnList.concat(res.data.data);
					let list=lists.forEach((item,index)=>{
						item.type=1
					})
					this.AnList=lists
					// this.myDatas()
				}).catch(err=>{
					
				})
			},
			// //卖家
			myDatas(){
				request.get('/api/mation/sellChat',{
					page:this.pageNum,
					rows:20
				}).then(res=>{
					let list=res.data.data
					list.forEach((item,index)=>{
						item.type=2
					})
					this.AnList.concat(list)
				}).catch(err=>{
					
				})
			},
			messageDetail(type,id){
				if(type==1){
					uni.navigateTo({
						url:'/pages/index/chat?id='+id+'&index=1',
					})
				}else{
					uni.navigateTo({
						url:'/pages/index/chat?id='+id+'&index=1'
					})
				}
				
			},
			messageList(id){
				uni.navigateTo({
					url:'/pages/index/all-message?id='+id
				})
			},
			//点击留言通知
			onClickly() {
				this.pageNum=1
				this.index = 2
				this.message()
			},
			message(){
				request.get('/api/mation/msgList',{
					page:this.pageNum,
					rows:10
				}).then(res=>{
					let list = this.pageNum == 1 ? res.data.data : this.list.concat(res.data.data);
					this.dataList=list
				}).catch(arr=>{
					
				})
			},
			// messageDetail(id){
			// 	uni.navigateTo({
			// 		url: "/pages/index/all-message?id=" + id
			// 	})
			// },
			//点击消息通知
			onClickxx() {
				this.index = 1
				this.pageNum=1
				this.systemInfo()
			},
			systemInfo(){
				request.get('/api/mation/mation',{
					page:this.pageNum,
					rows:10
				}).then(res=>{
					let list = this.pageNum == 1 ? res.data.info : this.list.concat(res.data.info);
					this.soueList=list.reverse()
				}).catch(arr=>{
					
				})
			},
			//点击我的消息
			onClickwd() {
				this.index = 0,
				this.pageNum=1
				this.myData()
			},
			//跳转闲置
			goIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			//活动
			goActuvity() {
				uni.reLaunch({
					url: '/pages/activity/activity'
				});
			},
			//发布
			goFa() {
				this.show = true
			},
			//消息
			goMessage() {
				uni.reLaunch({
					url: '/pages/message/message'
				});
			},
			//我的
			goMe() {
				uni.reLaunch({
					url: '/myPackage/pages/me/me'
				});
			},
			//跳转发布需求
			OnMaiProject() {
				uni.navigateTo({
					url: '/pages/issue/publish'
				});
			},
			//跳转卖闲置
			OnBuyProject() {
				uni.navigateTo({
					url: '/pages/issue/betray'
				});
			},
			onClose() {
				this.show = false
			},
			//点击系统通知详情
			LookSystem(id) {
				uni.navigateTo({
					url: '/pages/message/systematic?id='+id
				});
			},
			//留言个数
			messageNums(){
				request.get('/api/mation/unreadNumber',{}).then(res=>{
					this.messageNum=res.data.number
				}).catch(err=>{
					
				})
			}
		}
	}
</script>

<style>
	@import url("/common/message.css");
	@import url("/common/uni.css");

	.container {
		position: relative;
	}

	.botTextXX {
		font-size: 18rpx;
		color: #FF834D;
	}


	.fabu {
		position: absolute;
		display: flex;
		flex-direction: inherit;
		bottom: 19rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
	}

	ul li {
		background-color: #FFFFFF;
		width: 20%;
		text-align: center;
		height: 98rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.botText {
		color: #879099;
		font-size: 18rpx;
	}

	.all {
		background-color: #F7F8FA;
		height: 100%;
	}

	.botTextFa {
		color: #879099;
		font-size: 18rpx;
	}
	.redCircle{
		width:24rpx;
		height: 24rpx;
		border-radius: 50%;
		background: #EE0A24;
		position: absolute;
		right: 26rpx;
		top: 22rpx;
		z-index: 99;
	}
	.num {
		position: absolute;
		background: red;
		height: 30rpx;
		font-size: 22rpx;
		line-height: 30rpx;
		text-align: center;
		border-radius: 16rpx;
		color: #fff;
		top: 6rpx;
		right: 30rpx;
		min-width: 18rpx;
		max-width: 60rpx;
		padding: 0 6rpx;
	}
</style>