<template>
	<view>
		<view class="details_list">
			<view class="nav">
				<view class="left">消息通知</view>
				<view class="right">
					<view class="n1" @click="allDet(1)">全部已读</view>
					<view class="n2" @click="allDet(2)">全部删除</view>
				</view>
			</view>
			<view class="container">
				<view class="ul">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
						<view class="li" @click="liClick(item)" v-for="(item,index) in detList" :key="index"
							v-show="item.states">
							<view class="content">
								<view class="titles" :class="{'active':item.reads}">{{ item.title }}</view>
								<view class="cont" v-html="item.content"></view>
								<view class="time">
									{{ item.time }}
									<span v-show="item.readFlag == 0"></span>
								</view>
							</view>
							<view @click.stop="detClick(item,index)" class="icon">
								<image src="../../../static/img/ammsHome/icon4.png" class="pic"></image>
							</view>
						</view>
						<view class="isOver" v-if="isOver">------暂无数据！------</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<q-loading mask="true" click="true" ref="loading"></q-loading>
	</view>
</template>

<script setup lang="ts">
	// import { uuid } from '../../../utils';
	import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
	import { request } from '@/utils/request';
	import {
		// onShow,
		// onLoad,
		// getCurrentPages,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';
	const { proxy } = getCurrentInstance();
	const isOver = ref(false);
	const page = ref(1);
	const scrollTop = ref(0);

	const detList = ref([]);

	onMounted(() => {
		isOver.value = false;
		page.value = 1;
		detList.value = [];
	})

	onReachBottom(() => {
		if (isOver.value == false) {
			page.value++;
			init(true);
		}

	})
	onPullDownRefresh(() => {
		isOver.value = false;
		page.value = 1;
		detList.value = []
		init();
	})

	function lower(e : any) {
		if (isOver.value == false) {
			page.value++;
			init(true);
		}
	}

	function init(co : any) {
		proxy.$emit('recall', 'open');
		
		request({
			method: 'post',
			url: 'appMsgNotify-selectUserMsgPage',
			data: {
				page: page.value,
				length: 10,
				content: ''
			},
		}, false, true).then((res : any) => {
			proxy.$emit('recall', 'close');
			if (res.code == 0) {
				if (res.code == 0) {
					if (typeof(co) == 'undefined') {
						detList.value = []
					}
					let arr = res.data.records;
					uni.stopPullDownRefresh();
					if (arr.length > 0) {
						let initData : any = [];
						arr?.map((item : any) => {
							initData.push({
								reads: true,
								states: true,
								title: item.title,
								content: item.content,
								time: item.createTime,
								id: item.id,
								readFlag: item.readFlag,
							})
						});
						detList.value = detList.value.concat(initData);
						
					} else {
						isOver.value = true
					}
				}
			}
		}).catch((err : any) => {
			proxy.$emit('recall', 'close');
			uni.showToast({
				title: err.errMsg,
				icon: 'none'
			});
		})

	}

	function allDet(_val : any) {
		if (_val == 1) {
			proxy.$emit('recall', 'open');
			request({
				method: 'post',
				url: 'appMsgNotify-readAllMsg'
			}).then((res : any) => {
				proxy.$emit('recall', 'close');
				if (res.code == 0) {
					if (detList.value.length > 1) {
						detList.value.map(item => {
							item.readFlag = 1
						})
					}
					init(true);

					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch((err : any) => {
				proxy.$refs.loading.close();
				uni.showToast({
					title: err.errMsg,
					icon: 'none'
				});
			})
		} else {
			proxy.$emit('recall', 'open');
			request({
				method: 'post',
				url: 'appMsgNotify-deleteAllMsgByUser'
			}).then((res : any) => {
				proxy.$emit('recall', 'close');
				if (res.code == 0) {
					detList.value.length = 0
					init(true);
					isOver.value = true;
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch((err : any) => {
				proxy.$emit('recall', 'close');
				uni.showToast({
					title: err.errMsg,
					icon: 'none'
				});
			})

		}
	}

	function liClick(_val : any) {
		proxy.$emit('recall', 'open');
		request({
			method: 'post',
			url: 'appMsgNotify-readMsg',
			data: {
				id: _val.id
			},
		}).then((res : any) => {
			proxy.$emit('recall', 'close');
			if (res.code == 0) {
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});

					uni.navigateTo({
						url: `/pages/components/messageDetails?id=${_val.id}`
					})
				}
			}
		}).catch((err : any) => {
			proxy.$emit('recall', 'close');
			uni.showToast({
				title: err.errMsg,
				icon: 'none'
			});
		})

	}

	function detClick(item : any, index : any) {
		proxy.$emit('recall', 'open');
		request({
			method: 'post',
			url: 'appMsgNotify-deleteMsgByUser',
			data: {
				id: item.id
			},
		}).then((res : any) => {
			proxy.$emit('recall', 'close');
			if (res.code == 0) {
				if (res.code == 0) {
					detList.value[index].states = !detList.value[index].states
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}
		}).catch((err : any) => {
			proxy.$emit('recall', 'close');
			uni.showToast({
				title: err.errMsg,
				icon: 'none'
			});
		})

	}

	defineExpose({ init })
</script>

<style lang="scss" scoped>
	.container {
		padding: 0rpx 32rpx;

		.ul {
			max-height: 90vh;
			overflow-y: scroll;
		}
	}

	.head {
		.container {
			display: flex;
			justify-content: space-between;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			padding: 10rpx 32rpx;
			background: linear-gradient(226deg, #168AFF 0%, #0E57FF 100%);

			.pic {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}

	.details_list {
		background: #ffffff;
		padding: 20rpx 0rpx 20rpx 0rpx;
		padding-bottom: 100rpx;

		.nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #166CE5;
			padding: 0rpx 32rpx;
			padding-bottom: 25rpx;
			margin-bottom: 32rpx;
			border-bottom: 1rpx solid #DDDDDD;

			.left {
				font-weight: 500;
				color: #444D54;
			}

			.right {
				display: flex;
				align-items: center;

				.n1 {
					margin-right: 32rpx;
				}
			}
		}

		.ul {
			.li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #DDDDDD;
				padding-bottom: 32rpx;
				margin-bottom: 31rpx;

				.picimg {
					margin-right: 24rpx;

					.pic {
						width: 227rpx;
						height: 128rpx;
					}
				}

				.content {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #808080;

					.title,
					.cont {
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}

					.title,
					.titles {
						font-size: 30rpx;
						font-weight: 500;
						color: #444D54;
						margin-bottom: 8rpx;
					}

					.titles {
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.time {
						display: flex;
						align-items: center;

						span {
							width: 10rpx;
							height: 10rpx;
							background-color: red;
							border-radius: 50%;
							margin-left: 6rpx;
							display: inline-block;
						}
					}

					.active {
						color: #808080;
					}

					.cont {
						margin-bottom: 8rpx;
					}
				}

				.icon {
					margin-left: 66rpx;

					.pic {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.isOver {
				margin-bottom: 33rpx;
				text-align: center;
			}
		}
	}

	.scroll-Y {
		max-height: 75vh;
	}
</style>