<template>
	<view class="page">
		<u-navbar title="公告协议" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
		<view class="content">
			<!-- 加载态 -->
			<view v-if="loading" class="loading">加载中…</view>
			<!-- 空态 -->
			<view v-else-if="isEmpty" class="empty">暂无数据</view>
			<!-- 列表 -->
			<scroll-view v-else scroll-y class="list">
				<view class="item" v-for="item in list" :key="item.id" @click="btnid(item.id)">
					<view class="item__title">{{ item.title }}</view>
					<view class="item__meta">
						<text class="meta__area">{{ item.areaName || '-' }}</text>
						<text class="meta__time">{{ item.duration || '-' }}秒</text>
						<text v-if="item.agreementType == 0">公告</text>
						<text v-if="item.agreementType == 1">协议</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	    export default {
	        data() {
	            return {
					bgc: {
						backgroundColor: "#FFFFFF",
					},
					areaId:'',
					list: [],
					loading: false,
					isEmpty: false,
	            };
	        },
			onLoad(option) {
				this.areaId = option.areaId
			},
			onShow() {
				this.getxieyi()
			},
	        methods: {
				// 获取公告协议
				getxieyi(){
					this.loading = true
					this.$u.get(`/bst/agreement/list?areaId=${this.areaId}`).then((res) => {
						if (res && res.code == 200) {
							const rows = (res.data && (res.data.rows || res.data.list)) || res.rows || []
							this.list = Array.isArray(rows) ? rows : []
							this.isEmpty = this.list.length === 0
						} else {
							this.list = []
							this.isEmpty = true
						}
					}).catch(() => {
						this.list = []
						this.isEmpty = true
					}).finally(() => {
						this.loading = false
					})
				},
				btnid(id){
					uni.navigateTo({
						url:'/page_shanghu/gonggao?id=' + id
					})
				}
	        },
	    }
</script>

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

	.content {
		padding: 24rpx;
		height: calc(100vh - 88rpx);
		box-sizing: border-box;
	}

	.loading,
	.empty {
		text-align: center;
		color: #999;
		padding: 48rpx 0;
	}

	.list {
		max-height: 100%;
	}

	.item {
		padding: 28rpx 24rpx;
		border-radius: 16rpx;
		background: #f1f1f1;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 1rpx, 0.04);
		margin-bottom: 24rpx;
	}

	.item__title {
		font-size: 32rpx;
		font-weight: 600;
		color: #262B37;
		margin-bottom: 12rpx;
	}

	.item__meta {
		font-size: 24rpx;
		color: #7A7F8A;
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 8rpx;
	}

	.meta__dot { color: #bbb; }
	.meta__time { margin-left: auto; }

	.item__brief {
		font-size: 26rpx;
		color: #4A4F59;
		margin-top: 8rpx;
		line-height: 1.6;
	}
</style>