<template>
	<view class="container">
		<view class="message" v-for="(item,index) in messageList" :key="item.id" @click="setRead(item,0)">
			<view class="message-cons">
				<view class="flex align_center justify_between">
					<view class="messageTitle">{{item.notice.title}}</view>
					<view class="message-right">
						<view>
							<span v-if="item.readFlag==0" class="message-unread">未读</span>
							<span v-if="item.readFlag==1" class="message-readed">已读</span>
						</view>
						<uni-icon color="rgba(157, 168, 181, 1)" name="arrow-right"></uni-icon>
					</view>
				</view>
				<view class="ellipsis-one message-info">
					{{item.notice.plainContent}}
				</view>
				<view class="flex align_center justify_between">
					<view class="messageTime flex_1">{{item.notice.releaseDate}}</view>
					<view v-if="item.notice.type == 'tx'">
						<u-button @click.stop="setRead(item,1)" shape="circle" plain size="mini" type="primary">
						  {{ item.notice.extInfo.bizType == 'SHELF_REPLENISH' ? '立即处理':'点击查看' }}
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata">
			<u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" :margin-top="100" icon-size="150" text="暂无数据" img-width="120" v-if="messageList.length==0 && status!='loading'" mode="list"></u-empty>
			<u-loadmore :load-text="$config('loadText')" class="loadmore" v-if="total>pageSize || status=='loading'" :status="status" />
		</view>
	</view>
</template>

<script> 
	import {getMessage,hasRead,setReadAllNotice} from "@/api/user.js"
	export default{
		data(){
			return{
				messageList:[],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				status: 'loadmore'
			}
		},
		computed: {
			wsMessage() {
				return this.$store.state.vuex_messagUnReadCount
			},
		},
		watch: {
			// 有新消息时刷新列表
			wsMessage(newValue, oldValue) {
				this.pageInit()
			}
		},
		filters: {
			filterHtml: function(str) {
				return str?str.replace(/<.*?>/g,""):""
			}
		},
		onNavigationBarButtonTap(e) {
			uni.showLoading({
				mask:true,
				title: '正在设置...'
			})
			setReadAllNotice().then(res => {
				if(res.status == 200){
					uni.hideLoading()
					this.pageInit()
				}
			})
		},
		methods:{
			pageInit(){
				this.messageList = []
				this.total = 0
				this.pageNo = 1
				this.getMessageList()
			},
			// 获取数据列表
			getMessageList(){
				this.status = "loading"
				getMessage({
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}).then(res => {
					if (res.status == 200) {
						res.data.list.map(item => {
							if(item.notice.type == 'tx'){
								item.notice.extInfo = JSON.parse(item.notice.extInfo)
							}
						})
						
						if(this.pageNo>1){
							this.messageList = this.messageList.concat(res.data.list || [])
						}else{
							this.messageList = res.data.list || []
						}
						this.total = res.data.count || 0
					} else {
						this.messageList = []
						this.total = 0
						uni.showToast({
							title: res.message ? res.message : '网络似乎出错了，请稍后再试',
							icon: "none"
						})
					}
					this.status = "loadmore"
				})
			},
			setRead(data,type){
				//设置为已读
				if (data.readFlag==0){
				  hasRead({msg_id: data.id}).then(res => {
					// 刷新列表
					if (res.status == 200){
						data.readFlag = 1
						this.messageList.splice()
					}
				  })
				} 
				// 跳转
				if(data.notice&&data.notice.type == 'tx' && type == 1){
					this.toAction(data)
				}else{
					this.goToMessageDetail(data)
				}
			},
			// 查看详细
			goToMessageDetail(data){
				// 跳转到详细页
				uni.navigateTo({
				 	url:'./xtNoticeDetail/xtNoticeDetail?id='+ data.noticeId
				})
			},
			toAction (data) {
				// 急送订单
				if (data.notice.extInfo.bizType == 'TEMP_ORDER') {
					uni.navigateTo({ url: '/pages/sales/edit?pageType=detail&data='+JSON.stringify({ salesBillSn: data.notice.extInfo.bizSn }) })
				}
				// 补货订单
				if (data.notice.extInfo.bizType == 'SHELF_REPLENISH') {
					uni.navigateTo({ url: '/pages/replenishmentManage/replenishmentList?billState=WAIT_CONFIRM' })
				}
				// 货架订单
				if (data.notice.extInfo.bizType == 'SHELF_ORDER') {
					uni.navigateTo({ url: '/pages/shelfOrder/orderDetail?pageType=detail&orderBillSn='+data.notice.extInfo.bizSn })
				}
				// 货架异常
				if (data.notice.extInfo.bizType == 'SHELF_WARN') {
					const shelfName = data.notice.plainContent.split('已经超过')[0]
					uni.navigateTo({ url: '/pages/shelfOrder/shelfOrder?bizType=SHELF_WARN&shelfSn='+data.notice.extInfo.bizSn+'&shelfName='+shelfName })
				}
			},
		},
		onLoad() {
			this.pageInit()
		},
		// scroll-view到底部加载更多
		onReachBottom(){
			console.log('到底部加载更多')
			if(this.messageList.length < this.total){
				this.pageNo += 1
				this.getMessageList()
			}else{
				this.status = "nomore"
			}
		},
	}
</script>

<style lang="less">
	.container{
		width:100%;
		font-size: 28rpx;
		.message{
			background-color: #FFFFFF;
			padding: 25upx 30upx;
			margin: 25upx;
			border-radius: 30upx;
			box-shadow: 1px 1px 3px #EEEEEE;
			display: flex;
			align-items: center;
			.message-cons{
				flex-grow: 1;
				width: 50%;
				.messageTitle{
					font-size: 30rpx;
					padding-right: 30upx;
				}
				.message-info{
					font-size: 26rpx;
					color: #666;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
				}
				.messageTime{
					font-size: 26rpx;
					color:#989898;
				}
			}
			.message-right{
				display: flex;
				align-items: center;
				font-size: 24upx;
				text-align: right;
				padding-left: 50upx;
				.message-unread{
					color: #FA3534;
				}
				.message-readed{
					color: #999;
				}
			}
		}
	}
	
</style>
