<template>
	<view class="page-container">
		<view class="list-title-btns">
			<view @click="doChangeStatus" data-value=""
				:class="['border-right',currentStatus==''? 'btn-select':'btn-normal']">
				<view class="tab">
					<text>全部</text>
					<view :class="currentStatus==''?'border-select':'border-normal'"></view>
				</view>
			</view>
			<view @click="doChangeStatus" data-value="0"
				:class="['border-right',currentStatus=='0'? 'btn-select':'btn-normal']">
				<view class="tab">
					<text>未读</text>
					<view :class="currentStatus=='0'?'border-select':'border-normal'"></view>
				</view>
			</view>
			<view @click="doChangeStatus" data-value="1"
				:class="['border-right',currentStatus=='1'? 'btn-select':'btn-normal']">
				<view class="tab">
					<text>已读</text>
					<view :class="currentStatus=='1'?'border-select':'border-normal'"></view>
				</view>
			</view>
		</view>
		<view style="margin-top: 10rpx;">
			<ContainerLoading :loadingVisible="loadingState">
				<scroll-view scroll-y style="height: 80vh;" :lower-threshold="100" refresher-background="#FFFFFF00"
					@scrolltolower="doLoadMore">
					<view class="coupons-list-box">
						<block v-for="(item,index) in msgList" :key="index">
							<view class="msg-item-container">
								<view class="msg-item-box">
									<view class="msg-title-box" @click="readItem" :data-value="item">
										<view class="title-type" :class="item.isRead==0? 'text-noread':'text-read'">
											{{item.title}}
										</view>
										<view class="title-time">{{item.gmtCreate}}</view>
									</view>
									<view class="divider-v mt-10"></view>
									<view class="msg-content-box" @click="readItem" :data-value="item">
										<view :class="item.isRead==0? 'text-noread':'text-read'"
											class="msg-content-content">{{item.content}}</view>
									</view>
									<view @click="deleteItem" :data-value="item" class="icon-del-red size-48"
										style="align-self: flex-end;"></view>
								</view>
							</view>
						</block>
						<uni-load-more :status="hasMore"></uni-load-more>
					</view>
				</scroll-view>
			</ContainerLoading>
		</view>
		<uni-popup type="message" ref="msg">
			<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import ContainerLoading from '@/components/container-loading.vue'
	import UserApi from '@/common/js/net/UserApi.js'
	export default {
		components: {
			ContainerLoading
		},
		setup() {

		},
		data() {
			return {
				currentStatus: '',
				msgList: [], //订单列表
				pageData: {
					page: 1,
					rows: 10,
					isRead: '', //默认已读
				}, //检索参数
				loadingState: 'loading', //加载状态
				listRefreshTrig: false, //list刷新状态
				isLoadMore: false, //加载更多的状态
				hasMore: 'more', //是否有更多数据
				keywords: '', //搜索关键字
				msgType: 'info',
				msgHint: '',
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: '消息通知',
			})
			uni.setNavigationBarColor({
				frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
				backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
				animation: { // 可选项
					duration: 500,
					timingFunc: 'easeIn'
				}
			})
			this.doRefreshList()
		},
		methods: {
			doChangeStatus(e) {
				this.currentStatus = e.currentTarget.dataset.value
				//刷新列表
				this.doRefreshList()
			},
			doGetMineMsgList(isRefresh) {
				const _self = this
				_self.msgList = isRefresh ? [] : _self.msgList
				_self.loadingState = isRefresh ? 'loading' : ''
				UserApi.doGetMineMsgNotice(_self.pageData)
					.then(res => {
						var status = 'success'
						status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
						_self.loadingState = isRefresh ? status : ''
						_self.msgList = _self.msgList.concat(res.rows)
						_self.isLoadMore = false
						_self.hasMore = _self.msgList.length < res.total ? 'more' : 'noMore'
					})
					.catch(err => {
						_self.loadingState = 'error'
						_self.isLoadMore = false
						_self.hasMore = 'more'
					})
			},
			//下拉刷新
			doRefreshList() {
				const _self = this
				_self.loadingState = 'loading'
				_self.hasMore = 'more'
				_self.pageData.page = 1
				_self.pageData.isRead = _self.currentStatus
				_self.isLoadMore = false
				_self.doGetMineMsgList(true)
			},
			//加载更多
			doLoadMore() {
				//判断是否正在加载中 与是否存在更多数据
				const _self = this
				if (_self.isLoadMore || _self.hasMore == 'noMore') {
					return
				}
				_self.isLoadMore = true
				_self.hasMore = 'loading'
				_self.pageData.page = ++_self.pageData.page
				_self.pageData.isRead = _self.currentStatus
				_self.doGetMineMsgList(false)
			},
			readItem(e) {
				const item = e.currentTarget.dataset.value
				if (item.isRead == 1) {
					return
				}
				uni.showLoading({
					title: '加载中...',
				})
				const _self = this
				const ids = {
					ids: [item.userMsgId]
				}
				UserApi.doReadMineMsgNotice(ids)
					.then(res => {
						uni.hideLoading()
						_self.doRefreshList()
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgHint = err.msg ? err.msg : '操作失败,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			},
			deleteItem(e) {
				const item = e.currentTarget.dataset.value
				const _self = this
				uni.showModal({
					title: '警告',
					content: '您确定要删除该消息吗?',
					success: res => {
						if (res.confirm) {
							_self.doDeleteItem(item)
						}
					}
				})
			},
			//删除信息
			doDeleteItem(item) {
				const _self = this
				uni.showLoading({
					title: '删除中...',
				})
				UserApi.doDeleteMineMsgNotice(item.userMsgId)
					.then(res => {
						uni.hideLoading()
						_self.msgHint = '删除成功'
						_self.msgType = 'success'
						_self.$refs.msg.open()
						_self.doRefreshList()
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgHint = err.msg ? err.msg : '删除失败,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			}
		},
		onPullDownRefresh() {
			this.doRefreshList()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss" scoped>
	.list-title-btns {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 16px;
		text-align: center;
		background-color: #F0F0F0;
	}

	.btn-select {
		line-height: 20px;
		font-size: 16px;
		text-align: center;
		flex: 1;
		padding: 10px;
		color: $bg-green-status-deep-color;
		font-weight: bold;
	}

	.btn-normal {
		line-height: 20px;
		color: $text-color;
		flex: 1;
		font-size: 16px;
		text-align: center;
		padding: 10px;
		font-weight: bold;
	}

	.border-select {
		width: 20px;
		height: 4px;
		background-color: $bg-green-status-deep-color;
		margin-top: 10px;
		border-radius: 2px;
	}

	.tab {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.border-normal {
		width: 20px;
		height: 4px;
		margin-top: 10px;
		border-radius: 2px;
		background-color: $bg-top-color;
	}

	.coupons-list-box {
		display: flex;
		flex-direction: column;
	}

	.msg-item-container {
		background-color: transparent;
	}

	.msg-item-container:nth-of-type(n+2) {
		margin-top: 20rpx;
	}

	.msg-item-box {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background-color: $white-color;
		border-radius: 5rpx;

	}

	.msg-title-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: relative;
	}

	.text-read {
		color: $text-gray-hint-color;
	}

	.text-noread {
		color: $text-color;

	}

	.title-type {
		font-size: 28rpx;
		font-weight: bold;
	}

	.title-time {
		font-size: 24rpx;
		color: $text-gray-hint-color;
	}

	.msg-content-box {
		margin-top: 15rpx;
	}

	.msg-content-notice-point {
		width: 15rpx;
		height: 15rpx;
		border-radius: 15rpx;
		background-color: $primary-color-active;
		position: absolute;
		right: -10rpx;
		top: -10rpx;
	}

	.msg-content-content {
		font-size: 28rpx;
	}
</style>