<template>
	<view class="message-center mg-lr-24">
		<view class="tab-menu u-f u-f-jcsb">
			<view class="tab-list u-f u-f-jcsb">
				<view class="tab-item mg-right-88" v-for="(item, index) in tabList" :key="item.id">
					<common-tab :acitve-tab="activeTab" :item="item" @tab-item="handleTabItem"></common-tab>
					<view class="new-tip" v-if="activeTab === item.id&&hasUnRead"></view>
				</view>
			</view>
			<view class="clear-wrap u-f u-f-jcfe" @click="showConfirmModal">
				<image class="clear" src="../.././static/common/clear.png" />
			</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 class="message-notify mg-top-44" v-if="activeTab === 1">
			<view class="notify-card" v-for="(item,index) in list" :key='index' @click="handleCheckDetail(item.id)">
				<view class="title u-f u-f-jcfs u-f-aic mg-bot-20">
					<view class="title-content title-document mg-right-10">
						<image src="../.././static/common/notify.png" style="width: 74rpx;height: 74rpx;"></image>
						<view class="new-tip" v-show="item.status===1"></view>
					</view>
					<view class="title-content fs32 fw400">{{item.title}}</view>
				</view>
				<view class="content fw400 fs28">
					<!-- <text>{{item.content}}</text> -->
				</view>
				<view class="detail u-f u-f-jcsb mg-top-20">
					<view class="default-detail-check highlight-detail-check fs28 fw400">查看详情</view>
					<view class="detail-date fs24 fw400">{{item.createTime}}</view>
				</view>
			</view>
		</view>
		<view class="message-notify mg-top-44" v-else>
			<view class="notify-card" v-for="(item,index) in list" :key='index' @click="handleCheckDetail(item.id)">
				<view class="title u-f u-f-jcfs u-f-aic mg-bot-20">
					<view class="title-content title-document mg-right-10">
						<image src="../.././static/common/notify.png" style="width: 74rpx;height: 74rpx;"></image>
						<view class="new-tip"></view>
					</view>
					<view class="title-content fs32 fw400">{{item.title}}</view>
				</view>
				<view class="content fw400 fs28">
					<!-- <text>{{item.content}}</text> -->
				</view>
				<view class="detail u-f u-f-jcsb mg-top-20" @click="handleCheckDetail(item.id)">
					<view class="default-detail-check fs28 fw400">查看详情</view>
					<view class="detail-enter"></view>
				</view>
			</view>
			<!-- <view class="noting-message u-f u-f-jcc">
				<image src="../.././static/messsage-center/nothing-message.png"></image>
			</view> -->
		</view>

		<uni-popup :position="'middle'" :mode="'0'" class="middle-wrap" :show="show" @hidePopup="hideConfirmModal">
			<view class="sys-mes-nofity">
				<image src="../../static/common/backhd.png" mode=""></image>
				<!-- <view class="top u-f u-f-aic u-f-jcc">清除消息</view> -->
				<view class="mg-top-28 deep-gray">
					<view>清除消息</view>
					<text>确认清除列表中所有的消息吗？</text>
				</view>
				<view class="btnview">
					<view class="no" @click="hideConfirmModal">取消</view>
					<view class="ok" @click="oneClickRead">确定</view>
				</view>
				<!-- <view class="bot u-f u-f-jcc u-f-aic" @click="oneClickRead"><text
						class="confirm">确定</text></view> -->
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import commonTab from "../.././components/common-tab/common-tab.vue"
	export default {
		components: {
			commonTab
		},
		computed: {
			hasUnRead() {
				return this.list.some(item => item.status === 1)
			}
		},
		data() {
			return {
				activeTab: 1,
				tabList: [{
						name: "系统公告",
						id: 1
					},
					{
						name: "订单信息",
						id: 2
					}
				],
				list: [],
				pageNum: 1,
				total: 0,
				type: 1,
				show: false
			}
		},
		onShow(option) {
			this.getList()
		},

		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: {
			handleTabItem(item) {
				this.activeTab = item.id
				if (item.name == '系统公告') {
					this.type = 1
				} else {
					this.type = 2
				}
				this.pageNum = 1
				this.getList()

			},
			handleCheckDetail(id) {
				uni.navigateTo({
					url: '/pagesD/notice-center/notice-center?detailsId=' + id
				})
			},
			getList(flag) {
				this.$http.post("/api/client/notice/list", {
					pageNum: this.pageNum,
					pageSize: '20',
					type: this.type
				}).then(res => {
					console.log(res.data.data.rows)
					this.list = !flag ? res.data.data.rows : this.data.data.list.concat(res.data.data.rows)
					this.total = res.data.data.total

				})
			},
			oneClickRead() {
				this.$http.get("/api/client/notice/oneClickRead").then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})

					this.hideConfirmModal()
					this.getList()
				})
			},
			hideConfirmModal() {
				this.show = false
			},
			showConfirmModal() {
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message-center {
		.tab-menu {
			.tab-list {
				.tab-item {
					position: relative;

					.new-tip {
						position: absolute;
						top: 0rpx;
						right: -10rpx;
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background-color: #FF4502;
					}
				}
			}

			.clear-wrap {
				.clear {
					width: 38rpx;
					height: 38rpx;
				}
			}
		}

		.message-notify {
			.notify-card {
				padding: 20rpx;
				border-radius: 14rpx;
				background-color: #ffffff;

				.title {
					.title-bell {
						width: 74rpx;
						height: 74rpx;
					}

					.title-document {
						width: 74rpx;
						height: 74rpx;

						.new-tip {
							position: absolute;
							top: 4rpx;
							right: 4rpx;
							width: 18rpx;
							height: 18rpx;
							border-radius: 50%;
							background-color: #FF4502;
							border: 1rpx solid #FFFFFF;
						}
					}

					.title-content {
						color: #333333;
						position: relative;
					}
				}

				.content {
					color: #999999;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #E3E3E3;
				}

				.detail {
					.default-detail-check {
						color: #999999;
						line-height: 38rpx;
					}

					.highlight-detail-check {
						color: #FF4502;
					}

					.detail-date {
						color: #999999;
						line-height: 38rpx;
					}

					.detail-enter {
						width: 32rpx;
						height: 32rpx;
						// background: url(../.././static/right-arrow.png) no-repeat center center;
						background-size: 30%;
					}
				}
			}

			.noting-message {
				padding-top: 74rpx;

				image {
					width: 376rpx;
					height: 376rpx;
				}
			}
		}
	}

	.sys-mes-nofity {
		position: relative;
		border-radius: 14rpx;
		width: 624rpx;
		height: 428rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;

		image {
			width: 624rpx;
			height: 160rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			position: absolute;
			left: 0;
			top: -61rpx;
		}

		.top {
			width: 100%;
			background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
			border-radius: 14rpx;
			height: 148rpx;
		}

		.deep-gray {
			margin-top: 110rpx;
			text-align: center;

			view {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 50rpx;
			}

			text {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}
		}

		.btnview {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 67rpx;
			text-align: center;
			margin-top: 80rpx;

			.no {
				width: 233rpx;
				height: 67rpx;
				background: #999999;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				margin: 0 24rpx;
			}

			.ok {
				width: 232rpx;
				height: 67rpx;
				background: #FF4502;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				margin: 0 24rpx;
			}
		}


		.bot {
			margin-top: 72rpx;

			.confirm {
				padding: 10rpx 60rpx;
				border-radius: 30rpx;
				color: #ffffff;
				background-color: #FF4502;
			}
		}
	}

	.middle-wrap :deep(.uni-popup-insert) {
		width: 624rpx !important;
	}

	.message-center :deep(.uni-popup) {
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}
</style>