<template>
	<view class="notice">
		<wd-navbar title="公告" safeAreaInsetTop left-arrow @click-left="back"></wd-navbar>

		<!-- 顶部导航栏 -->
		<view class="nav-tabs">
			<view class="tab-item" :class="active == 1 ? 'active' : ''" @click="activeChange(1, '')">通知</view>
			<!-- <view class="tab-item" :class="active == 2 ? 'active' : ''" @click="activeChange(2, null)">公告</view> -->
			<view
				class="tab-item"
				:class="active == 2 && categoryId == item.id ? 'active' : ''"
				@click="activeChange(2, item.id)"
				v-for="(item, index) in noticeCateList"
				:key="index"
			>
				{{ item.categoryName }}
			</view>
		</view>

		<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
			<view class="p30">
				<view class="notice_block" v-for="(item, index) in dataList" :key="index" @click="toDeitl(item)">
					<view>
						{{ active == 1 ? '通知' : active == 2 ? noticeCateList.find((val) => val.id == categoryId).categoryName : '' }}：{{
							active == 1 ? item.content : item.title
						}}
					</view>
					<image style="width: 40rpx; height: 40rpx" src="/static/y.png" v-if="active == 2"></image>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref, computed } from 'vue';
import api from '@/api/index';
const active = ref(1);
const categoryId = ref<string | number>('');
const paging = ref(null);
const dataList = ref([]);
const noticeCateList = ref([]);
onLoad(() => {
	api.noticeCatePage().then((res) => {
		noticeCateList.value = res.list;
	});
});

const toDeitl = (item) => {
	if (active.value == 1) {
		uni.showModal({
			title: '通知',
			content: item.content,
			showCancel: false
		});
	} else {
		uni.navigateTo({
			url: '/pages/notice/details?id=' + item.id
		});
	}
};

const activeChange = (e, cateId) => {
	active.value = e;
	categoryId.value = cateId;
	paging.value.reload();
};

const queryList = (pageNo, pageSize) => {
	api.noticePage({ pageNo, pageSize, type: active.value, categoryId: categoryId.value })
		.then((res: any) => {
			paging.value.complete(res.list);
		})
		.catch((res) => {
			paging.value.complete(false);
		});
};

const back = () => {
	uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.notice {
	&_block {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 35rpx;
		width: 690rpx;
		height: 106rpx;
		background: #ffffff;
		border-radius: 16rpx;
		position: relative;

		font-weight: 400;
		font-size: 24rpx;
		color: #232323;
	}

	/* 导航标签样式 */
	.nav-tabs {
		display: flex;
		/* justify-content: space-around; */
		background-color: #ffffff;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.tab-item {
		font-size: 15px;
		color: #999;
		position: relative;
		padding: 0 10px;
		z-index: 9;
	}

	.tab-item.active {
		color: #333;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0rpx;
		right: 20rpx;
		width: 40rpx;
		height: 12rpx;
		background: #627c54;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		z-index: 5;
		opacity: 0.8;
	}
}
</style>
