<template>
	<view class="content-class">
		<view class="nar-top">
			<!-- 这里是状态栏占位 -->
			<view class="status_bar"></view>
				 <!-- 导航栏 -->
				<view class="nav-bar">
				    <text class="nav-title">首页</text>
				</view>
			<view class="tabbarClass">
				  <view class="header-container" @click="navigateToPage">
				    <!-- 左侧小区选择区域 -->
				    <view class="location-area">
				      <!-- 定位图标 -->
				      <view class="location-icon">
						  <!-- <uni-icons  type="location-filled" size="14" color="#333333"></uni-icons> -->
						  <image src="/static/首页/adress.png" style="height: 100%;width: 100%;"></image>
				      </view>
					       <!-- 小区名称和下拉箭头 -->
							<view class="community-selector">
								<text class="community-name">{{ currentCommunity }}</text>
								<u-icon 
									name="arrow-down-fill" 
									size="16" 
									:color="isDropdownOpen ? '#2979ff' : '#222222'"
									:class="['dropdown-arrow', { 'rotate': isDropdownOpen }]"
								></u-icon>
						    </view>
						</view>	
					</view>
				
			</view>
		</view>
	
		<!-- banner -->
		<view class="bannarClass">
			  <up-swiper :list="bannerList"   indicator indicatorMode="dot"  ></up-swiper>
		</view>	
		  <view class="noticeClass">
			  <image src="/static/首页/公告.png" style="width: 38px;height: 38px;position: absolute;top: 21px;left: 27px;"></image>
			  <uni-notice-bar show-icon :text="noticeText" type="line"
			   :showIcon="true" show-get-more scrollable color="#000" background-color="#fff" moreColor="#000" @getmore="getNoticeMore"/>
		    <!-- <up-notice-bar class="notice-bar" :text="noticeText" mode="link" speed="100" bgColor="#FFF" color="#000" url="pages/notice-list/noticeList"></up-notice-bar> -->
		  </view>
		  <!-- 一键开门 -->
		  <view class="u-demo-block__content bg-card-open">
		      <up-row  justify="space-between" gutter="10">
		          <up-col span="3">
		              <view class="demo-layout bg-purple openClass" @click="openDoorClick">
						  <view class="iconClass">
								<image src="/static/首页/一键开门.png" mode="" style="width: 70px;height: 70px;border-radius: 8px;"></image> 
						  </view>
						  <view class="title-dome-calss">一键开门</view>
					  </view>
		          </up-col>
		          <up-col span="3">
		              <view class="demo-layout bg-purple-light openClass">
						   <view class="iconClass">
						  		<image src="/static/首页/生活缴费.png" mode="" style="width: 70px;height: 70px;border-radius: 8px;"></image> 
						  	</view>
						  <view class="title-dome-calss">生活缴费</view>
					  </view>
		          </up-col>
		          <up-col span="3">
		              <view class="demo-layout bg-purple openClass" @click="onlineRepairClick">
						    <view class="iconClass">
						   		<image src="/static/首页/在线报修.png" mode="" style="width: 70px;height: 70px;border-radius: 8px;"></image> 
						   	</view>
						   <view class="title-dome-calss">在线报修</view>
					  </view>
		          </up-col>
		          <up-col span="3">
		              <view class="demo-layout bg-purple-light openClass" @click="visitorClick">
						 <view class="iconClass">
							<image src="/static/首页/访客邀请.png" mode="" style="width: 70px;height: 70px;border-radius: 8px;"></image> 
						</view>
						  <view class="title-dome-calss">访客邀请</view>
					  </view>
		          </up-col>
		      </up-row>
		  </view>
		  <!-- 广告卡片 -->
		  <view class="adCardClass">
				<!-- <uni-card :is-shadow="false" > -->
					<view class="u-demo-block__content">
					    <up-row justify="space-between" customStyle="margin-bottom: 10px">
							<up-col  span="3">
							    <view class="demo-layout bg-purple iconRightClass">
									<image src="/static/首页/广告1.png" mode="" style="width: 100%;height: 100%;"></image>			
								</view>
							</up-col>
					        <up-col   span="8">
					            <view class="demo-layout bg-purple-light titleLeft">
									<text style="color: #fff;font-size: 18px;font-weight: 700;">便民服务</text>
									<view style="color: #fff;font-size: 16px;">邻里便民服务 全新上线</view>
								</view>
					        </up-col>
					       
					    </up-row>
					</view>
					
				<!-- </uni-card> -->
		  </view>
		  <!-- 活动列表 -->
		  <uni-card class="activity-card">
			  <view  class="eventListClass">
			  			  <view>
							  <text class="activity-name">活动列表</text>
			  				  <!-- <u-title>活动列表</u-title> -->
			  			  </view>
			  			  <view class="nav-more">
			  				 	<!-- <up-button type="primary" shape="circle" size="small" text="查看更多" @click="moreClick"></up-button> -->
								<text class="look-more-title" @click="moreClick">查看更多</text>
			  			  </view>
			  </view>
			  <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">	
			     <view  class="eventListCard"  v-for="(activity, index) in activityList" :key="activity.id">
				  	<!-- 状态标签 -->
				  	<view class="status-tag" :class="{}">
				  	  {{ activity.statusText }}
				  	  <!-- 进行中 -->
				  	</view>
						<view class="u-demo-block__content ">
						    <up-row justify="space-between" customStyle="margin-bottom: 10px">
						        <up-col   span="4">
						            <view class="demo-layout bg-purple-light activity-img">
										<image src="/static/logo.png" style="width: 100%;height: 100%;"></image>
									</view>
						        </up-col>
						        <up-col  span="10">
						            <view class="demo-layout bg-purple activity-info">
										<view class="activity-title">{{activity.title}}</view>
										<view class="activity-time">{{activity.time}}</view>
										<view class="activity-organizer">
											<text>{{activity.organizer}}</text>
										</view>
										<view class="activity-enrollment">
											<text>活动名额100人，已报名{{activity.enrollment}}人</text>
										</view>
									</view>
						        </up-col>
						    </up-row>
						</view>
				  	

			    </view>
			  </scroll-view>
		  </uni-card>
		
		
		
	</view>

</template>

<script setup>
import { ref } from 'vue'
import {onLoad,onUnload} from '@dcloudio/uni-app'



// 列表数据状态
const isDropdownOpen = ref(false)
const scrollTop = ref(0)
const activityList = ref([
	{
		id:'0',
		statusText:'进行中',
		img:'/static/logo.png',
		title:'社区活动节活动',
		time:'2026.3.5-2026.4.30',
		organizer:'物业中心',
		enrollment:'87'
		
	},
	// {
	// 	id:'1',
	// 	statusText:'进行中',
	// 	img:'',
	// 	title:'222',
	// 	time:'2026.3.5-2026.4.30',
	// 	organizer:'物业中心',
	// 	enrollment:'87'
		
	// },
])
const currentCommunity = ref('碧桂园小区')
const bannerList = ref([
	'/static/首页/banner.png',
	'/static/bannar2.png'
]) 
const noticeText = ref('公告公告本小区今天安装了摄像头')

// =======方法=======
const getNoticeMore = () =>{
	uni.navigateTo({
		url:"/pages/notice-list/noticeList"
	})
}
// 接收选择小区返回的参数
const slelctHomeData = (data) =>{
	  // console.log('收到B页面返回的数据：', data)
	  currentCommunity.value = data.name
}
onLoad(() => {
  // 绑定全局事件监听  
  uni.$on('confirm', slelctHomeData)
  
  
})

// 页面销毁时移除监听（防止内存泄漏）
onUnload(() => {
  uni.$off('confirm', slelctHomeData)
})

// 方法逻辑
const openDoorClick = () =>{
	uni.navigateTo({
		url:"/pages/notice-list/oneClickOpen"
	})
}

const navigateToPage = () => {
  uni.navigateTo({
    url: '/pages/notice-list/selectHome'
  })
}
const onlineRepairClick = () =>{
	uni.navigateTo({
		url:'/pages/online-repair/onlineRepair'
	})
}
// 访客邀请
const visitorClick = () =>{
	uni.navigateTo({
		url:"/pages/visitor/visitor-list"
	})
}
// 活动列表的查看更多
const moreClick = () =>{
	uni.navigateTo({
		url:"/pages/activity-list/activityList"
	})
}



 

</script>

<style lang="scss" scoped>
	.content-class{
		// margin: 0 20rpx;
		// padding: 2rpx;
		background-color: #f9f9f9;
		 padding-bottom: 100rpx;
		  box-sizing: border-box; /* 保证padding不会撑大容器 */
		  min-height: 110vh;
		  overflow-y: auto;
		.nar-top{
			height: 400rpx;
			width: 100%;
			// background-color: #C0E4FB;
			background: repeating-linear-gradient(to right, #EDF4FA , #C0E4FB);
			position: absolute;
			
		}
		  .status_bar {
		    height: 46px;
		    width: 100%;
		  }
		  /* 导航栏 */
		  .nav-bar {
		    height: 44px;
		    line-height: 44px;
		    text-align: center;
		  }
		  .nav-title {
		    font-size: 14px;
		    font-weight: 400;
		  }
		.header-container{
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  padding: 4rpx 30rpx;
			  box-sizing: border-box;
			  // border-bottom: 1rpx solid #f0f0f0;
			  position:absolute;
			  top: 85px;
			  left: 0;
			  z-index: 9999;
		}
		// 左侧区域
		.location-area {
		  display: flex;
		  align-items: center;
		  position: relative;
		  flex: 1;
		  min-width: 0;
		  .location-icon {
			  width: 45rpx;
			  height: 45rpx;
		    margin-right: 12rpx;
		    flex-shrink: 0;
		  }
		 .community-selector {
		      display: flex;
		      align-items: center;
		      max-width: 300rpx;
		      cursor: pointer;
			    .community-name {
			        font-size: 26rpx;
			        font-weight: 500;
			        color: #000;
			        white-space: nowrap;
			        overflow: hidden;
			        text-overflow: ellipsis;
			        max-width: 200rpx;
			      }
			  }
		}
		.bannarClass{
			position: relative;
			top: 110px;
			left: 0;
			padding: 40rpx;
		}
		.noticeClass{
			position: relative;
			top: 167rpx;
			left: 0;
			padding: 40rpx;
		}
		.noticeClass.uni-noticebar{
			padding: 10px 15px 10px 45px;
		}
		
		.notice-bar::after {
		    color: #3E8EFF;
		}
		.bg-card-open{
			position: relative;
			top: 102rpx;
			left: 0;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin: 20px;
		}
		.openClass{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20rpx;
			.iconClass{
				width: 130rpx;
				height: 130rpx;
				border-radius: 10rpx;
				// opacity: 0.4;
			
			}
			.title-dome-calss{
				margin-top: 10rpx;
				font-size: 13px;
				color: #000;
			}
		}
		.adCardClass{
			// width: 100%;
			height: 200rpx;
			margin: 40rpx;
			background-color: #3E8EFF;
			// margin-top: 30rpx;
			border-radius: 28rpx;
			position: relative;
			top:50px;
			left: 0;
			 .titleLeft{
				text-align: left;
				line-height: 2;
				// margin-top: 32rpx;
				// margin-left: 30rpx;
			 }
			 .iconRightClass{
				 width: 120rpx;
				 height: 120rpx;
				 border-radius: 50%;
				 // margin-top: 20rpx;
				 margin: 36rpx;
			 }
		}
		.activity-card{
			position: relative;
			top: 45px;
			left: 0;
			bottom: 20;
		}
		.uni-card{
			margin: 18px !important;
		}
		.eventListClass{
			margin: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.activity-name{
			font-size: 16px;
			font-weight: 600;
			color: #222;
			
		}
		.eventListCard{
			// min-height:200rpx ;
			 position: relative;
			 margin: 30rpx 0rpx;
			 // overflow: hidden;
				.status-tag {
				  position: absolute;
				  top: 0;
				  left: 0;
				  // padding: 6px 18px;
				  padding: 0px 9px 10px 11px;
				  border-radius: 10px 0px 10px 0px;
				  font-size: 12px;
				  color: #fff;
				  font-weight: 500;
				  width: 80rpx;
				  height: 20rpx;
				  // background-color: #FD7373 ;
				  background: repeating-linear-gradient(to right, #FD7373  , #FB3F3F);
				  }
			.activity-img{
				width: 170rpx;
				height: 230rpx;
				// background-color: #333333;
			}
			.activity-title{
				font-size: 16px;
				font-weight: bold;
				color: #333;
				margin-bottom: 12px;
				line-height: 1.4;
			}
			.activity-time,
			.activity-organizer {
			  display: flex;
			  align-items: center;
			  font-size: 14px;
			  color: #999999;
			  margin-bottom: 8px;
			  
			}
			.activity-enrollment{
				display: flex;
				align-items: center;
				 font-size: 15px;
				 margin-top: 20rpx;
				 color: #666666;
			}
			
		}
		.look-more-title{
				color: #3E8EFF;
				font-size: 14px;
			}
	}


</style>
