<template>
	<view>
		<view v-if="list[0]">
				<view class="msg-head">
					<text>全部消息</text>
					<button type="default" class="all-read" @click="allRead">全部已读</button>
				</view>
				<view class="collection-box" v-for="(item,index) in list" :key="index" @click="jumpMessage(item.messageId,index)">
					<text class="collection-title">{{item.content}}</text>
					<text class="collection-time">{{item.createdAt}}</text>
					<text class="collection-isread" v-if="item.readStatus === 1">已读</text>
					<text class="collection-read" v-else>未读</text>
				</view>
		</view>
		<view v-else class="noData">
			暂时没有系统消息
		</view>

	</view> 
</template>

<script>
	import { queryMsg } from 'api/queryMsg'
	import { updateAllSta } from 'api/updateAllSta'
	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '',
				path: '/pages/MyPages/MessagePage'
			}
		},
		data() {
			return {
				pageNum:1,
				pageSize:15,
				hasNextPage:true,
				list:[]
			}
		},
		async onLoad(){
			const that = this
			const params={
				param:{
					pageNum:that.pageNum,
					pageSize:that.pageSize
				}
			}
			const data = await queryMsg(params)
			console.log(data)
			that.hasNextPage = data.hasNextPage
			that.list = data.list
		},
		onReachBottom: function () {
			this.pageNum ++
		},
		watch:{
			async pageNum(val){
				const that = this
				if(that.hasNextPage === true){
					const params={
						param:{
							pageNum:val,
							pageSize:that.pageSize
						}
					}
					const data = await queryMsg(params)
					console.log(data)
					that.hasNextPage = data.hasNextPage
					that.list = that.list.concat(data.list)
				}else{
					uni.showToast({
						title:'到底了',
						icon:'none'
					})
				}
			}
		},
		methods: {
			jumpMessage(id,index){
				uni.navigateTo({
					url:`/pages/MessagePage/MessagePage?id=${id}`
				})
				this.list[index].readStatus = 1
			},
			allRead(){
				const that = this
				let arr = []
				for(let i=0;i<that.list.length;i++){
					arr.push(that.list[i].messageId)
				}
				console.log(arr)
				async function main(){
					try{
						const params = {
							param:{
								
							}
						}
						await updateAllSta(params)
					}catch(err){
						//TODO handle the exception
						console.log(err)
					}
				}
				main()
				for(let i=0;i<that.list.length;i++){
					that.list[i].readStatus = 1
					// console.log(that)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.collection-box{
	height: 40px;
	display: flex;
	align-items: center;
	padding-left: 10px;
	background-color: $white;
	margin-bottom: 6px;
}
.collection-title{
	flex: 4;
	white-space:nowrap;
	overflow: hidden;
  text-overflow:ellipsis;
	-webkit-line-clamp: 1;
}
.collection-time{
	flex: 2;
	text-align: center;
}
.collection-read{
	flex: 1;
	text-align: center;
}
.collection-isread{
	flex: 1;
	text-align: center;
	color: $grey;
}
.msg-head{
	display: flex;
	height: 40px;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
}
.all-read{
	margin: 0;
	font-size: 12px;
}
.noData{
	margin-top: 300upx;
	color: $gray;
	text-align: center;
}
</style>
