<template>
	<view>
		<u-navbar autoBack placeholder bgColor="#FFFFFF">
			<view class="navSlot" slot="center">
				<!-- <u-icon name="arrow-left" size="19"></u-icon> -->
				<view class="title">消息通知</view>
			</view>
		</u-navbar>
		<view class="messagetab">
			<view class="unreadMessage" @click="notiyShow1">
				<view>未读</view>
				<view v-if="total>0" class="messageNum">({{total}})</view>
			</view>
			<view class="readMessages" @click="notiyReadShow1">已读</view>
		</view>
		<view class="bgMains">
			<view class="messageList" v-for="(item,index) in list" :key='index' @click="goPage(item)">
				<view class="messageItem">
					<view class="hread" v-if="notiyShow">
						<image class="img" src="../../static/tabar/ic_notiy.png"></image>
						<view>消息提醒</view>
					</view>
					<view class="hread_read" v-if="notiyReadShow">
						<image class="img" src="../../static/tabar/ic_notiy_read.png"></image>
						<view>消息提醒</view>
					</view>
				</view>
				<view class="message_content">
					{{item.title}}
				</view>
				<u-line class="line" length="100%"></u-line>
				<view class="selDetai">查看详情</view>
			</view>
			<view v-if="list.length == 0">
				<image style="width: 376rpx;display: block;margin: 0 auto;" src="../../static/icon_xx_k.png">
				</image>
				<text style="display: block;text-align: center;color: #ccc;">暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notiyShow: true,
				notiyReadShow: false,
				list: [],
				pageNum: 1,
				total: 0
			}
		},
		onShow(option) {
			this.getList()
			this.getListTotal()
		},

		onPullDownRefresh() {
			this.pageNum = 1
			this.getList()
		},
		onReachBottom() {
			console.log(this.total, this.list.length);
			if (this.total > this.list.length) {
				this.pageNum = this.pageNum + 1
				this.getList(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},
		methods: {
			goPage(item) {
				// this.$http
				uni.navigateTo({
					url: '/pages/messageDetails/messageDetails?id=' + item.id
				})
			},

			getList(flag) {
				this.$http.post("/api/store/message/list", {
					pageNum: this.pageNum,
					pageSize: '20',
					status: this.notiyShow ? '1' : '2'
				}).then(res => {
					if (res.code == 200)
						console.log(res)
					this.list = !flag ? res.data.rows : this.list.concat(res.data.rows)

				})
			},
			
			getListTotal() {
				this.$http.post("/api/store/message/list", {
					pageNum: this.pageNum,
					pageSize: '20',
					status: 1
				}).then(res => {
					if (res.code == 200){
						this.total = res.data.total
					}
				})
			},
			notiyShow1() {
				this.notiyReadShow = false;
				this.notiyShow = true;
				this.pageNum = 1
				this.getList()
			},
			notiyReadShow1() {
				this.notiyReadShow = true;
				this.notiyShow = false;
				this.pageNum = 1
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	.bgMains{
		padding: 20rpx;
		background: #f9f6f4;
		min-height: 100vh;
	}
	.img {
		width: 74rpx;
		height: 74rpx;
		padding-right: 20rpx;
	}

	.messageList {
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		margin-bottom: 20rpx;

		.hread {
			display: flex;

		}

		.hread_read {
			display: flex;
		}

		.selDetai {
			padding-top: 24rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.line {
			padding-left: 20rpx;
			padding-top: 10rpx;
		}

		.message_content {
			padding-bottom: 20rpx;
			padding-top: 20rpx;
			font-size: 28rpx;
			color: #999999;
		}



	}

	.messagetab {
		padding: 24rpx;
		display: flex;
		justify-content: center;

		.unreadMessage {
			display: flex;
			color: #333333;

			.messageNum {

				color: #FF4502;
			}
		}

		.readMessages {
			padding-left: 184rpx;
			color: #999999;
		}
	}
</style>