<template>
	<view class="container">
		<headersVue :titles="titles" style=" position: static !important;">
			<u-icon name="arrow-left" color="#fff" size="18" v-if="!showTabBar"></u-icon>
			<template #right>
				<image src="/static/icons/clearNotice.png" style="height: 40rpx;width: 40rpx;" @click="clearAll()">
				</image>
			</template>
		</headersVue>
		<view class="content">
			<view class="top_">
				<view class="top_box" v-for="(item,index) in taplist" :key="index" @click="tapqh(index)">
					<view class="">{{ item }}</view>
					<view class="gang" v-if="tapindex == index"></view>
				</view>
			</view>
			<view class="lsit_">
				<scroll-view class="school-scroll-view" scroll-y @scrolltolower="onReachBottomCus"
					:style="{ height: scrollHeight + 'px' }" refresher-enabled @refresherrefresh="onRefresherrefresh"
					:refresher-triggered="isTriggered">
					<view class="lsit_box" v-for="(item,index) in arrlist" :key="index">
						<view v-if="tapindex === 0" @click="readNotice(item)">
							<view class="d_s" style="position: relative;">
								<!-- 红色 * 角标 -->
								<view style="position: absolute; top: 0rpx; left: 0rpx; color: red; font-size: 44rpx;"
									v-if="!item.readStatus">*
								</view>
							</view>
							<view class="t-zi" style="margin-left: 20rpx;" v-html="item.templateContent"></view>
						</view>
						<view v-if="tapindex === 1">
							<view class="d_s" @click="getdetails(item.id)">
								<view class="touxiang_">
									<image :src="baseImageUrl+getUrl(item.newsCover)" mode=""></image>
								</view>
								<view class="">
									<view class="title_">{{ item.newsTitle }}</view>
									<view class="num_">{{ getDate(item.createTime || new Date()) }}</view>
								</view>
							</view>
							<view class="t-zi" v-html="item.newsContent"></view>
						</view>
						<view v-if="tapindex === 2">
							<view class="d_s" @click="getdetails(item.id)">
								<view class="item-container">
									<view class="title_">{{ item.title }}</view>
									<view class="num_">{{ getDate(item.createTime || new Date()) }}</view>
								</view>
							</view>
							<view class="t-zi" v-html="item.content"></view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- <view style="width: 100%; height: 88rpx;"></view> -->

		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<text class="text popup-content-text">{{ nowReadItem.templateContent }}</text>
				<button class="button popup-info" @click="dialogToggle"><text
						class="button-text info-text">知道了</text></button>
			</view>
		</uni-popup>

		<!-- 底部 -->
		<!-- <view style="width: 100%; height: 50px;"></view> -->
		<tabBar :msg="msg " v-if="showTabBar"></tabBar>

	</view>
</template>

<script>
	import headersVue from '../../components/header/headers.vue';
	import request from "@/utils/request";
	import {
		formatDate
	} from "@/utils/utils";

	export default {
		data() {
			return {
				titles: "通知",
				type: "center",
				nowReadItem: {},
				tapindex: 0,
				taplist: ["站内信", "监管通知", "内部通知"],
				show: false,
				status: 'loading',
				msg: '2',
				chuan: '',
				roles: [],
				jcshopRole: false,
				jcgfRole: false,
				isOpen: false,
				fab: false,
				imgs: '',
				type: 'zflm',
				animationData: {},
				isRote: false,
				animation: null,
				actindex: 0,
				partnerId: '',
				arrlist: [],
				pageNum: 1, //第几页
				pageSize: 10, //一页多少张
				totalPages: 0, //总数
				baseImageUrl: this.$baseImageUrl,
				showTabBar: true,
				isTriggered: false,
				scrollHeight: 0,
			}
		},
		components: {
			headersVue
		},
		onShow() {
			console.log('this.tapindex', this.tapindex);
			if (this.tapindex === 2) {
				this.getwarnMsglist()
			} else if (this.tapindex == 1) {
				this.getlistindex()
				this.getIfSend()
			} else if (this.tapindex == 0) {
				this.getNoticeList()
			}
		},
		onLoad(data) {
			this.partnerId = uni.getStorageSync('partnerId')
			// if (data && data.index) {
			// 	this.tapindex = parseInt(data.index)
			// 	this.getwarnMsglist()
			// } else {
			// 	this.getlistindex()
			// 	this.getIfSend()
			// }
			if (data.type && data.type === 'staff') {
				this.showTabBar = false
			}
		},
		onReady() {
			// 动态计算滚动区域高度
			this.calculateScrollHeight();
		},
		methods: {
			setIndex(num) {
				this.tapindex = num
			},
			calculateScrollHeight() {
				// 获取屏幕高度
				const screenHeight = uni.getSystemInfoSync().windowHeight;
				// 获取顶部区域高度
				let topHeight = 270;
				if (!this.showTabBar) {
					topHeight = 200
				}
				// 计算滚动区域高度
				this.scrollHeight = screenHeight - topHeight;
			},
			getUrl(value) {
				if (!value) {
					return ""
				}
				if (value[0] === '/') {
					return value
				} else {
					return "/" + value
				}
			},
			/**
			 * 上滑加载数据
			 */
			onReachBottomCus() {
				//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				if (this.pageNum >= this.totalPages) {
					uni.$u.toast('没有更多数据了')
					return
				}
				//页码+1,调用获取数据的方法获取第二页数据
				this.pageNum++
				//此处调用自己获取数据列表的方法
				if (this.tapindex === 2) {
					this.getwarnMsglist()
				} else if (this.tapindex == 1) {
					this.getlistindex()
					this.getIfSend()
				} else if (this.tapindex == 0) {
					this.getNoticeList()
				}
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				this.isTriggered = true
				this.pageNum = 1
				this.total = 0
				this.schoolList = []
				if (this.tapindex === 2) {
					this.getwarnMsglist()
				} else if (this.tapindex == 1) {
					this.getlistindex()
					this.getIfSend()
				} else if (this.tapindex == 0) {
					this.getNoticeList()
				}
			},
			/**
			 * 消息设置为已读
			 */
			dialogToggle() {
				this.$refs.popup.close()
			},
			toAdd() {
				uni.navigateTo({
					url: '/pages/authority/newadd?type=' + null
				})
			},
			/**
			 * 点击阅读消息
			 */
			async readNotice(item) {
				this.nowReadItem = item
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(this.type)
				//直接请求后台已读
				await request({
					url: "/system/notify-message/update-read",
					method: "PUT",
					params: {
						ids: this.nowReadItem.id
					},
				}).then((res) => {
					if (res.code == 200) {
						item.readStatus = true
					}
				})
			},
			async clearAllNew() {
				//直接请求后台已读
				const res = await request({
					url: "/system/notify-message/update-all-read",
					method: "PUT",
				})
				this.onRefresherrefresh()
			},
			getIfSend() {
				request({
					url: '/system/inspectionNews/ifSend',
					method: 'get'
				}).then(res => {
					this.ifSend = res.data
				})
			},
			clearAll() {
				let that = this
				uni.showModal({
					title: '确认',
					content: '确认全部已读吗？',
					success: function(res) {
						if (res.confirm) {
							that.clearAllNew()
						}
					}
				});
			},
			async getwarnMsglist() {
				let res = await request({
					url: '/warnMsg/warnMsg/list',
					method: 'get',
				})
				this.arrlist = res.data
				let total = res.total
				this.totalPages = Math.ceil(total / this.pageSize);
				this.isTriggered = false
			},
			getDate(value) {
				return formatDate(value)
			},
			tapqh(index) {
				this.tapindex = index
				this.arrlist = []
				this.pageNum = 1
				if (index === 0) {
					this.getNoticeList()
				} else if (index === 1) {
					this.getlistindex()
				} else if (index === 2) {
					this.getwarnMsglist()
				}
			},
			getdetails(id) {
				const url = this.tapindex === 0 ? '/pages/xiaoxi/details?id=' + id : '/pages/xiaoxi/details?id=' + id +
					"&index=1"
				uni.navigateTo({
					url: url
				})
			},
			getback() {
				uni.navigateBack({
					delta: 1,
				})
			},
			async getlistindex() {
				let res = await request({
					url: '/appInspection/news/msgList',
					method: 'get',
					data: {
						partnerId: this.partnerId,
						pageSize: this.pageSize,
						pageNum: this.pageNum
					}
				})
				// this.arrlist = res.rows
				if (this.pageNum != 1) {
					this.arrlist = this.arrlist.concat(res.data.records)
				} else {
					this.arrlist = res.data.records
				}
				let total = res.total
				this.totalPages = Math.ceil(total / this.pageSize);
				this.isTriggered = false
			},
			async getNoticeList() {
				let res = await request({
					url: '/system/notify-message/my-page',
					method: 'get',
					data: {
						pageSize: this.pageSize,
						pageNo: this.pageNum
					}
				})
				// this.arrlist = res.rows
				if (this.pageNum != 1) {
					this.arrlist = this.arrlist.concat(res.data.list)
				} else {
					this.arrlist = res.data.list
				}
				let total = res.data.total
				this.totalPages = Math.ceil(total / this.pageSize);
				this.isTriggered = false
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background: #F7F8FC;
		width: 100%;
	}

	.content {
		background: #F7F8FC;
		width: 100%;

		box-sizing: border-box;

	}

	.top_ {
		margin-top: 20rpx;
		height: 98rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
	}

	.top_box {
		width: 50%;
		height: 98rpx;
		text-align: center;
		font-size: 28rpx;
		color: #8D90A6;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.gang {
		width: 112rpx;
		height: 8rpx;
		background: linear-gradient(90deg, #366FFF 0%, #5DA0FC 100%);
		margin: 5px auto;
	}

	.lsit_ {
		background: #F7F8FC;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.lsit_box {
		width: 100%;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.d_s {
		display: flex;
		align-items: center;
	}

	.touxiang_ {
		width: 40%;
		height: 100px;
		margin-right: 10px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}

	}

	.title_ {
		font-size: 32rpx;
		color: #101A3E;
		overflow: hidden;
		//white-space: nowrap;
		text-overflow: ellipsis;
	}

	.num_ {
		font-size: 24rpx;
		color: #327DFB;
	}

	.text_ {
		font-size: 24rpx;
		color: #8D90A6;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-top: 20rpx;
	}


	.t-zi {
		font-size: 14px;
		font-weight: 400;
		color: #666666;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.item-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		/* 确保容器占满父级 */
	}

	.popup-content {
		padding: 15px;
		height: auto;
		margin: auto;
		width: 90%;
		background-color: #fff;
	}

	.popup-content-text {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text {
		color: #333;
	}

	.popup-info {
		margin-top: 30rpx;
		color: #fff;
		background-color: #f2f6fc;
	}

	.info-text {
		color: #909399;
	}
</style>