<template>
	<view class="container">
<!-- 	   <Header :title="'邻里互助列表'"></Header> -->
		<!-- 蓝色背景 -->
		<!-- <view class="neighbor_head">
		</view> -->
	
	
		<!-- 白色底部区域 -->
		<view class="neighbor_body">
			<!-- 正式页面内容，但是需要留到90%的页面内容和旁边的间隙 -->
			<view class="body">
				<view class="text-with-block">
					<view class="left">
						<text class="text">邻里互助</text>
						<view class="slanted-block"></view>
					</view>
	
					<view class="right" @click="goPage('helpInfo','')">
						<view class="right-icon">+</view>
						<view class="right-font">发帖</view>
					</view>
				</view>
	
				<view class="interact_body">
					<view class="body_item"
					      v-for="(item,index) in inreciprocitiesList"
					      :key="index"
					      @click="goPage('neighborDetail',item.id)">
						<view class="item_left">
							<view class="left_title">
								{{ item.title }}
							</view>
							<view class="left_font">
								{{ item.content }}
							</view>
							<view class="left_botton">
								<text v-if="item.status == 2">进行中</text>
							</view>
	
						</view>
						<view class="item_right">
							<view class="right_nav">
								<image :src="item.customerPortrait ?item.customerPortrait :`/static/imgs/index/nav.png`" class="nav"></image>
								<image src="/static/imgs/index/nav_bg.png" class="bg"></image>
							</view>
							<view class="right_name">
								{{item.customerName || '未知' }}
							</view>
							<view class="right_date">
								{{ formatTime(item.createdAt, 'YYYY年MM月DD日') }}
							</view>
	
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 引入底部 -->
		<Footer></Footer>
	</view>
</template>

<script>
	import {
		get,
		post
	} from '@/utils/request';
	import {
		IMAGE_BASE_URL,
		BASE_URL
	} from '@/utils/config';
	import {
		formatTime,
		formatRelativeTime
	} from '@/utils/timeFormat';
	import Footer from '@/components/footer_common.vue';
	export default {
		components: {
			Footer
		},
		data() {
			return {
				IMAGE_BASE_URL,
				formatTime,
				inreciprocitiesList:[],
			}
		},
		mounted(){
			this.getReciprocities();
		},
		methods: {
			// 跳转详情页面
			goPage(page,id){
				uni.navigateTo({
				  url: `/pages/${page}/index?Id=${id}`,
				  // url: '/pages/helpInfo/index', 
				  success: () => {
				    console.log('切换到tabBar页面成功');
				  },
				  fail: (err) => {
				    console.error('切换到tabBar页面失败:', err);
				  }
				});
			},
			
			async getReciprocities(){
				let params = {
					current:1,
					pageSize:10,
				};
				try {
					const res = await get('/api/v1/apps/home/reciprocities', params);
					if (!res || !res.success) {
						throw new Error('获取互助列表失败');
					}
					this.inreciprocitiesList = [...res.data];
					console.log("item.content",this.inreciprocitiesList)
					
				} catch (err) {
					console.error('获取互助列表失败:', err);
				}
				
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		// background: #f8faff;
		background: #f8faff;
		// height: 100vh;
		// padding: 70rpx 0;
		// margin-top: 90rpx;
		padding-bottom: 400rpx;

		.neighbor_head {
			width: 100%;
			height: 360rpx;
			opacity: 1;
			background: linear-gradient(270deg, rgba(146, 161, 252, 1) 0%, rgba(181, 229, 255, 1) 100%);
			position: relative;
		}


		.neighbor_body {
			width: 100%;
			// height: 300rpx;
			background: #fff;
			height: 650rpx;
			position: absolute;
			top: 150rpx;
			z-index: 9;

			.body {
				width: 90%;
				margin: 0 5%;
				position: absolute;
				top: -150rpx;
				z-index: 99;

				.text-with-block {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					height: 50rpx;

					.left {
						.text {
							font-size: 34rpx;
							font-weight: bold;
							color: #333;
							position: relative;
							z-index: 2;
							padding-left: 50rpx;
						}

						.slanted-block {
							position: absolute;
							left: 120rpx;
							top: 46rpx;
							transform: translateX(-50%) skewX(-40deg);
							width: 166rpx;
							height: 24rpx;
							background-color: #80B3FF;
							z-index: 1;
						}
					}

					.right {
						font-size: 26rpx;
						color: #3B8CFF!important;
						text-decoration: none;
						cursor: pointer;
						// margin-top: 20rpx;
						margin-right: 20rpx;

						.right-icon {
							color: #3B8CFF!important;
							width: 32rpx;
							height: 32rpx;
							line-height: 28rpx;
							border: 4rpx solid #3B8CFF;
							border-radius: 50%;
							text-align: center;
							font-weight: 500;
							font-size: 34rpx;
						}
                        .right-font{
							text-align: center;
							font-size: 20rpx;
						}
					}
				}

				.interact_body {
					// display:list-item;
					grid-template-columns: repeat(2, 1fr);
					grid-gap: 26rpx;
					width: 100%;
					margin-top: -20rpx;

					.body_item {
						// width: 80%;
						margin: 40rpx auto;
						// height: 400rpx;
						background: #E8F3FF;
						border-radius: 20rpx;
						display: flex;
						align-items: flex-start;
						// gap: 20rpx;
						padding: 20rpx 30rpx;

						.item_left {
							// flex: 1;
							// display: flex;
							// flex-direction: column;
							// justify-content: space-between;
							// gap: 10rpx;
							width: 70%;
							margin-right: 10%;

							.left_title {
								font-size: 32rpx;
								font-weight: bold;
								color: #333;
								line-height: 80rpx;
							}

							.left_font {
								font-size: 22rpx;
								color: #3D3D3D;
								line-height: 1.5;
							}

							.left_botton {

								width: 134rpx;
								height: 30rpx;
								opacity: 1;
								line-height: 30rpx;
								padding: 10rpx 20rpx;
								background-color: #3881FF;
								color: #fff;
								font-size: 24rpx;
								text-align: center;
								border-radius: 10rpx;
								// width: fit-content;
								cursor: pointer;
								margin: 20rpx 0;
							}

							.end {
								background: #9FA3AB;
							}
						}

						.item_right {
							width: 100rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							gap: 10rpx;
							margin-top: 14rpx;

							.right_nav {
								width: 100rpx;
								height: 100rpx;
								background-color: #ccc;
								border-radius: 50%;
								/* 圆形头像 */
								text-align: center;
								line-height: 100rpx;
								font-size: 24rpx;
								color: #fff;
								position: relative;
								

								.nav {
									position: absolute;
									top: 0;
									left: 0;
									width: 100rpx;
									height: 100rpx;
									border-radius: 50%;
									z-index: 2
								}

								.bg {
									position: absolute;
									z-index: 1;
									top: 20rpx;
									left: -118rpx;
									width: 260rpx;
									height: 260rpx;
								}
							}

							.right_name {
								width: 200rpx;
								font-size: 24rpx;
								font-weight: 900;
								color: #333;
								text-align: center;
								// padding-left: 62rpx;
							}

							.right_date {
								font-size: 24rpx;
								color: #999;
								width: 270rpx;
								text-align: center;
								// padding-left: 72rpx;
								margin-top: 12rpx;
							}
						}
					}

					.interact_more {
						text-align: right;
						color: #3B8CFF;
						font-size: 24rpx;
					}
				}
			}
		}

		

		


	}
</style>