<template>
	<view class="news white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('index.news.title') }}</block>
		</Nav>
		<view :style="{paddingTop: `${CustomBar}px;`}">
			<scroll-view
				class="body_scroll clearfix"
				:scroll-y="true"
				:style="scrollHeight"
				:refresher-enabled="true"
				:refresher-triggered="triggered"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore"
				@scrolltolower="scrolltolower">
				<view class="list">
					<view class="item" v-for="(item, key) in list" :key="key" @click="change(item)">
						<view class="title omit">{{ item.title | across }}</view>
						<view class="content">{{ item.content | across }}</view>
						<view class="read">
							<view class="read_time">{{ item.displayTime }}</view>
						</view>
					</view>
				</view>
				<!-- noData -->
				<noData title="暂无消息" v-if="!loading && empty" />
			</scroll-view>
		</view>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

<script>
	import mixins from '@/utils/mixins'

	export default {
		mixins: [mixins],
		data() {
			return {}
		},
		created() {
			this.readAllMessage()
		},
		methods: {
			// 获取列表
			async getList (type) {
				this.loading = true
				const result = await this.$axios.get(this.API.getMessagesList, {
					params: {
						page: this.page
					}
				})
				this.loading = false
				this.triggered = false
				if (result && result.messages && result.messages.length) {
					const { messages, end } = result
					if (type === 'push') {
						this.list = this.list.concat(messages)
					} else {
						this.list = messages || []
					}
					this.end = end
					this.empty = false
				} else {
					this.empty = true
					this.list = []
					this.end = '0'
				}
			},
			// 已读全部消息
			async readAllMessage () {
				this.loading = true
				const result = await this.$axios.put(this.API.readAllMessage)
				this.loading = false
				if (result || result === 0) {
					uni.$emit('square')
					uni.$emit('campus')
					uni.$emit('team')
					this.getList()
				}
			},
			// 滚动到底部
			scrolltolower (e) {
				if (this.end === '0') {
					this.page++
					this.getList('push')
				}
			},
			// 自定义下拉刷新被触发
			onRefresh () {
				this.page = 1
				this.triggered = true
				this.getList()
			},
			// 自定义下拉刷新被复位
			onRestore () {
				this.triggered = false
			},
			// 跳转
			link (path) {
				uni.navigateTo({
					url: path
				})
			},
			// 跳转
			change (item) {
				// 1：小队申请页   /pages/team/apply?id=12&groupID=@TGS#22SPX2JIR
				// 2：小队房间页   /pages/team/voiceRoom?teamId=18&rid=chat10028
				// 3：个人主页     /pages/share/he?uid=df18h3poe22q
				// 4：交流房间页   /pages/team/voiceRoom?teamId=18&rid=chat10028
				// 5：添加校园页   /pages/campus/add
				// 6:小队活动     /pages/team/schedule?teamId=34&rid=chat10218
				const cell = item.messageJump
				if (cell && cell.jumpType) {
					switch (cell.jumpType) {
						case '1':
							this.link(`${cell.jumpUrl}?id=${cell.jumpParam.id}&groupID=${cell.jumpParam.groupID}`)
						break;
						case '2':
							this.link(`${cell.jumpUrl}?teamId=${cell.jumpParam.teamId}&rid=${cell.jumpParam.rid}`)
						break;
						case '3':
							this.link(`${cell.jumpUrl}?uid=${cell.jumpParam.uid}`)
						break;
						case '4':
							this.link(`${cell.jumpUrl}?teamId=${cell.jumpParam.teamId}&rid=${cell.jumpParam.rid}`)
						break;
						case '5':
							this.link(`${cell.jumpUrl}`)
						break;
						case '6':
							this.link(`${cell.jumpUrl}?teamId=${cell.jumpParam.teamId}&rid=${cell.jumpParam.rid}`)
						break;
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/mixins.scss";
	
	.news {
		min-height: calc(100vh);
		.body_scroll {
			.list {
				.item {
					// box-shadow: -4rpx 4rpx 8rpx 2rpx rgba($color: $bg-0, $alpha: 0.08);
					background-color: $white;
					padding-bottom: 34rpx;
					border-radius: 18rpx;
					margin: 26rpx;
					&.active {
						box-shadow: none;
						.title,
						.content {
							color: $J49494;
						}
					}
					.title {
						line-height: 100rpx;
						position: relative;
						font-size: 32rpx;
						font-weight: 400;
						padding: 0 20rpx;
						color: $bg-0;
						&::before {
							content: '';
							position: absolute;
							right: 0;
							bottom: 0;
							left: 20rpx;
							height: 2rpx;
							background-color: $ECECEC;
						}
					}
					.content {
						margin: 28rpx 20rpx 20rpx;
						@include lineClamp(3);
						text-align: justify;
						line-height: 42rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: $bg-0;
					}
					.read {
						display: flex;
						align-items: center;
						padding: 0 20rpx;
						.read_time {
							line-height: 36rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: $J49494;
						}
					}
				}
			}
		}
	}
</style>
