<template>
	<view class="container">
		<view class="tab_div">
			<u-tabs :list="typeList" :is-scroll="true" :current="current" @change="change" inactive-color="#999999"
				font-size='32' gutter='42' height="88" active-color="#DE2E27" bar-height="4" bar-width="64"
				:offset="offset" :bold='true'></u-tabs>
		</view>
		<view class="list" v-if="list.length">
			<view class="mim-flex-vertical-center storm" v-for="(item) in list" :key="item.id">
				<view class="mim-font-14 time">{{item.created_at}}</view>
				<view class="mim-view mim-flex-vertical">
					<text class="mim-font-16 bold">{{item.name}}</text>
					<text class="mim-font-14 mim-multi-line"
						style="margin-top: 24rpx;color: 7a7a7a;">{{item.body}}</text>
					<u-divider border-color='#f2f2f2' bg-color='#f2f2f2' margin-top='24' margin-bottom='24'
						use-slot></u-divider>
					<view class="mim-flex-wrap-space-between" @click="goPage(item.source_id,item.id)">
						<view class="mim-font-14" style="color: #999999;">查看详情</view>
						<u-image src="@/static/icon/icon_right.png" width="32rpx" height="32rpx"></u-image>
					</view>
				</view>
			</view>
			<u-divider bg-color='#f7f7f7' fontSize='24'>{{divider}}</u-divider>
		</view>
		<view v-else style="margin-top: 350rpx;">
			<u-empty></u-empty>
		</view>
		<view class="mim-view-list"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				typeList: [{
					name: '未读',
					count: ''
				}, {
					name: '已读',
					count: ''
				}],
				current: 0,
				offset: [10, -2],
				form: {
					guard: 'admins',
					is_read: 0,
					page: 1,
					per_page: 10,
				},
				page: '',
				divider: '没有更多数据啦~',
			}
		},
		onShow() {
			this.messagesListFn()
		},
		onPullDownRefresh() {
			//下拉刷新
			this.messagesListFn()
		},
		onReachBottom() {
			//触底加载
			console.log('触底加载')
			this.divider = '加载中。。。'
			if (this.page > this.form.page) {
				this.form.page++
				this.messagesListFn(false)
			} else {
				this.divider = '没有更多数据啦~'
				this.$u.toast('没有更多数据啦~')
			}
		},
		methods: {
			goPage(m, n) {
				this.$u.route('pages/info/infoDetails', {
					id: n,
					source_id: m
				});
			},
			//切换
			change(index) {
				this.current = index;
				this.form.is_read = index
				if (index == 0) {
					this.typeList[1].count = ''
				} else {
					this.typeList[0].count = ''
				}
				this.list = []
				this.messagesListFn()
			},
			async messagesListFn(empty) {
				try {
					uni.showNavigationBarLoading();
					if (empty !== false) {
						this.list = [];
						this.form.page = 1
					}
					const {
						data: {
							data,
							meta
						},
					} = await this.$u.api.messagesList(this.form);
					this.page = meta.pagination.total_pages;
					this.list = this.page > 1 ? [...this.list, ...data] : data;
					this.divider = '没有更多数据啦~';
					// this.typeList[this.form.is_read].count = meta.pagination.total;
				} catch (error) {
					console.error(error);
				} finally {
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;

		.tab_div {
			width: 100%;
			height: 88rpx;
			background-color: #ffffff;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.mim-view {
			width: calc(100% - 48rpx);
		}

		/deep/.u-badge {
			min-width: 36rpx;
			height: 36rpx;
			padding: 0;
		}

		.list {
			margin-top: 108rpx;

			.storm {
				.time {
					color: #999999;
				}

				&:first-child .time {
					margin-top: 24rpx;
				}
			}

		}
	}
</style>