<template>
	<z-paging :refresher-enabled="false" :show-loading-more-when-reload="true" loading-more-default-text=""
		loading-more-loading-text="" loading-more-fail-text="" :empty-view-text="t('common.noData')"
		:show-loading-more-no-more-view="false" ref="paging" v-model="dataList" @query="queryList"
		class="max-w-[750px]">
		<h-dark :title="t('notice.title')"></h-dark>
		<view class="mx-[24rpx] py-[30rpx]" v-for="item,index in dataList" :key="item.id">
			<view class="text-muted text-center">
				{{item.create_time}}
			</view>
			<view class="bg-[#F4F4F4] p-[30rpx] mt-[20rpx] rounded-lg">
				<view class="font-bold mb-[30rpx]">
					{{item.title}}
				</view>
				<view class="content leading-normal mb-[30rpx] text-muted" v-html="item.content">
				</view>
				<view class="flex justify-between pt-[30rpx]" style="border-top: 1px solid #ECECEC;"
					@click="handleJump('/pages/notice/detail?id='+item.id,index)">
					<view class="text-[#0066FF]">
						{{t('notice.viewDetail')}}
					</view>
					<view class="flex justify-between items-center">
						<view class="text-[#E72A2A]" v-if="item.read==0">
							●
						</view>
						<u-icon size="30" color="#A2A2A7" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { shallowRef, ref } from 'vue'
	import { getUserNoticeLists } from '@/api/user'
	import { t } from '@/utils/util'
	uni.setNavigationBarTitle({ title: t('notice.title') })

	const paging = shallowRef()
	const dataList = ref<any[]>([])
	const current = ref(0)

	const queryList = async (pageNo : number, pageSize : number) => {
		try {
			const data = await getUserNoticeLists({
				type: current.value,
				page_no: pageNo,
				page_size: pageSize,
			})
			paging.value.complete(data.lists)
		} catch (error) {
			paging.value.complete(false)
		}
	}
	const handleJump = async (val : string, index : number) => {
		dataList.value[index]['read'] = 1;
		uni.navigateTo({
			url: val
		})
	}
	onLoad((options : any) => {
		current.value = options.type;
	})
</script>

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

	.content {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>