<template>
	<view class="index">
		<image :src="staticHost + '/public/static/index/index_bg.png'" mode="aspectFill" class="bg"></image>
		<float-guide  :initX="280" :initY="400" :videoSrc="staticHost + '/public/static/index/guide.mp4'" />
		<!-- 搜索栏 -->
		<view class="index-title">
			伍家国投
		</view>
		<view class="content-wrapper">

			<view class="search-wrapper">
				<search-bar :city="vuex_city==''?'选择':vuex_city" placeholder="你想住在哪儿" @chooseCity="location"
					@search="search" />
			</view>
			<!-- 房源信息导航栏 -->
			<view class="nav-area">
				<view class="rowClass">
					<u-row>
						<u-col span="3" text-align="center" v-for="(item,index) in navList" :key="index">
							<view class="u-padding-20" @tap="clickNav(item, index)" hover-class="hoverClass">
								<image :src="staticHost + '/public' + item.src " style="width: 86rpx;height: 86rpx;"
									mode="aspectFill"></image>
								<view class="tabName" :style="{color:'#FFFFFF'}">{{item.name}}</view>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="rowClass navbox2">
					<u-row>
						<u-col span="3" text-align="center" v-for="(item,index) in gridList" :key="index">
							<view class="u-padding-20" @tap="clickGrid(item)" hover-class="hoverClass">
								<image :src="staticHost + '/public' + item.src" style="width: 50rpx;height: 50rpx;"
									mode="aspectFill"></image>
								<view class="tabName" :style="{color:'#222222'}">{{item.name}}</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>

			<u-gap height="10"></u-gap>
			<!-- 公告栏 -->
			<view @click="notice" class="noticeStyle">
				<image :src="staticHost + '/public' + '/static/index/notice.png'"
					style="width: 38rpx;height: 37rpx;margin-left: 22rpx;"></image>
				<view class="notice-content">
					<u-notice-bar mode="vertical" :list="noticeList" type="primary" more-icon bg-color="none"
						:duration="5000" :fontSize="30" color="#2D2B2C" :volumeIcon="false"></u-notice-bar>
				</view>
			</view>

			<u-gap height="5"></u-gap>

			<view class="tab-content">
				<!-- 顶部标签栏 -->
				<view class="recommend-tabs">
					<view class="tab-item" :class="{ active: activeRecommendTab === index }"
						v-for="(tab, index) in recommendTabs" :key="index" @click="onRecommendTabClick(index)">
						{{ tab.label }}
					</view>
				</view>

				<!-- 筛选标签 -->
				<view class="filter-tabs">
					<view class="filter-item" :class="{ active: activeFilterTabs.includes(index) }"
						v-for="(tab, index) in filterTabs" :key="index" @click="onFilterTabClick(index)">
						{{ tab.label}}
					</view>
				</view>

				<scroll-view scroll-y class="waterfall-scroll" @scrolltolower="loadMore" lower-threshold="50">
					<u-waterfall v-model="flowList" ref="uWaterfall">
						<template v-slot:left="{leftList}">
							<view class="demo-warter" v-for="(item, index) in leftList" :key="item.assetsNo"
								style="margin-right: 10rpx;">
								<view class="img-box" @click="clickImage(item.assetsNo)">
									<img class="img" :src="item.coverImgUrl" alt="" />
								</view>
								<view class="item-title">{{ item.assetsName}}</view>
								<view class="item-desc">{{ item.footPrint || '0'}}㎡ {{ item.assetsType || '商业用房' }}
								</view>
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="demo-warter" v-for="(item, index) in rightList" :key="item.assetsNo"
								style="margin-left: 10rpx;">
								<view class="img-box" @click="clickImage(item.assetsNo)">
									<img class="img" :src="item.coverImgUrl" alt="" />
								</view>
								<view class="item-title">{{ item.assetsName}}</view>
								<view class="item-desc">{{ item.footPrint || '0'}}㎡ {{ item.assetsType || '商业用房' }}
								</view>
							</view>
						</template>
					</u-waterfall>
					<u-loadmore :status="loadStatus" />
				</scroll-view>

			</view>

			<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
			<u-no-network></u-no-network>

		</view>
	</view>
</template>

<script>
	import SearchBar from '../../components/searchBar/SearchBar.vue';
	import floatGuide from '../../components/floatGuide/floatGuide.vue'; 
	export default {
		components: {
			SearchBar,
			floatGuide
		},
		data() {
			return {
				keyword: '',
				pageNo: 1,
				pageSize: 20,
				scrollTop: 0,
				activeIndex: 0,
				noticeList: [],
				filterActiveConditions: [],
				defaultImgUrl: '/public/static/index/assets.jpg',
				navList: [{
						name: "住房",
						src: "/static/index/house.png",
						type: "住房"
					},
					{
						name: "商铺",
						src: "/static/index/shop.png",
						type: "住房"
					},
					{
						name: "厂房",
						src: "/static/index/factory.png",
						type: "厂房"
					},
					{
						name: "停车场",
						src: "/static/index/parking.png",
						type: "停车场"
					}
				],
				gridList: [{
						name: "看房预约",
						src: "/static/index/reserve.png",
						url: "/pages-biz/reserve/reserveRecords"
					},
					{
						name: "合同签约",
						src: "/static/index/contract.png",
						url: "/pages-biz/contract/contract"
					},
					{
						name: "退租申请",
						src: "/static/index/discharge.png",
						url: "/pages-assets/discharge/leaseCancelList"
					},
					{
						name: "留言板",
						src: "/static/index/fallback.png",
						url: "/pages-assets/fallback/fallback"
					}
				],
				loadStatus: 'more', // ✅ 只改这里
				activeRecommendTab: 0,
				recommendTabs: [{
						label: '为您推荐',
						type: 'recommend'
					},
					{
						label: '上新',
						type: 'new'
					}
				],
				activeFilterTabs: [],
				filterTabs: [{
						label: '两室',
						filterType: '户型',
						value: '两室'
					},
					{
						label: '一室',
						filterType: '户型',
						value: '一室'
					}
				],
				flowList: [],
				uvCode: uni.getStorageSync('uvCode')
			}
		},
		onLoad() {
			this.getNoticecList();
			this.resetAndLoad()
			uni.$on('findIndexHouseList', (obj) => {
				this.findHouseList();
			})
		},
		onShow() {},
		onUnload() {
			uni.$off('findIndexHouseList');
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.resetAndLoad();
			uni.stopPullDownRefresh();
		},
		// ✅ 底部加载（不动逻辑）
		onReachBottom() {
			this.loadMore()
		},
		mounted() {},
		computed: {
			staticHost() {
				return this.$config.staticUrl
			},
			vuex_city() {
				return uni.getStorageSync('lifeData')?.vuex_city || ''
			}
		},
		methods: {
			// 👇 你的所有方法 100% 不动
			onRecommendTabClick(index) {
				this.activeRecommendTab = index;
				this.activeFilterTabs = [];
				this.resetAndLoad();
			},
			resetAndLoad() {
				this.pageNo = 1;
				this.flowList = [];
				this.loadStatus = 'more';

				this.$nextTick(() => {
					this.$refs.uWaterfall && this.$refs.uWaterfall.clear();
					this.findHouseList();
				});
			},
			onFilterTabClick(index) {
				const isActive = this.activeFilterTabs.includes(index);
				if (isActive) {
					this.activeFilterTabs = this.activeFilterTabs.filter(item => item !== index);
				} else {
					this.activeFilterTabs.push(index);
				}
				this.resetAndLoad();
			},
			checkCity() {
				let lifeData = uni.getStorageSync('lifeData');
				let vuex_city = lifeData.vuex_city
				if (!vuex_city || vuex_city.length == 0) {
					return this.$u.route('/pages-biz/location/location');
				}
			},
			search() {
				this.$u.route('/pages-biz/search/search');
			},
			notice() {
				this.$u.route({
					url: '/pages-biz/notice/notice'
				})
			},
			findHouseList(type = null) {
				if (this.loadStatus !== 'more') return;

				this.loadStatus = 'loading';
				let recommendType = this.recommendTabs[this.activeRecommendTab].type;
				let layoutList = this.activeFilterTabs.map(i => this.filterTabs[i].value);
				this.$u.post('/assets/queryPage', {
					assetsType: type,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					assetsStatus: '闲置中',
					recommendType: recommendType,
					layout: layoutList.length > 0 ? layoutList.join(',') : null
				}).then(result => {
					let rows = result.data.result || [];
					if (this.pageNo === 1 && rows.length === 0) {
						this.flowList = [];
						this.loadStatus = 'nomore';
						return;
					}
					rows.forEach(row => {
						if (row.coverImgUrl) {
							row.coverImgUrl = this.$config.staticUrl + row.coverImgUrl
						} else {
							row.coverImgUrl = this.$config.staticUrl + this.defaultImgUrl
						}
					})
					this.flowList = this.flowList.concat(rows);

					if (rows.length < this.pageSize) {
						this.loadStatus = 'nomore';
					} else {
						this.pageNo++;
						this.loadStatus = 'more';
					}

				}).catch(err => {
					console.log("获取资产信息失败：", err);
					this.loadStatus = 'more';
				}).finally(() => {
					uni.stopPullDownRefresh();
				});
			},
			clickImage(assetsNo) {
				console.log(assetsNo)
				this.$u.route({
					url: '/pages-assets/assets/assetsDetail',
					params: {
						assetsNo: assetsNo
					}
				})
			},
			clickNav(item, index) {
				this.activeIndex = index;
				this.pageNo = 1;
				this.flowList = [];
				this.loadStatus = 'more';
				this.$nextTick(() => {
					this.$refs.uWaterfall && this.$refs.uWaterfall.clear();
					this.findHouseList(item.name);
				});
			},
			clickGrid(item) {
				this.$u.route({
					url: item.url
				})
			},
			code() {
				this.$mytip.toast('请咨询作者')
			},
			loadMore() {
				if (this.loadStatus !== 'more') return;
				this.findHouseList();
			},
			appSysFlowInfo() {
				let uvCode = uni.getStorageSync("uvCode");
				let url = "https://sourcebyte.cn/api/flow/upFlow?type=MINI&uvCode=" + uvCode;
				uni.request({
					url: url,
					method: "POST",
					success: (res) => {
						uni.setStorageSync("uvCode", res.data.data);
					},
				});
			},
			getNoticecList() {
				let url = "/notice/pageQuery";
				this.$u.post(url, {
					pageNo: 1,
					pageSize: 10
				}).then(obj => {
					if (obj.flag) {
						let data = obj.data.result
						if (data) {
							data.filter(item => {
								this.noticeList.push((item.noticeTitle || item.noticeContent))
							})
						}
					}
				}).catch(err => {
					console.log("获取招商公告失败：", err)
				});
			},
			location() {
				this.$u.route('/pages-biz/location/location')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		background: #F8F8F8;
		min-height: 100vh;
		position: relative;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 550rpx;
		z-index: 0;
	}

	.index-title {
		position: absolute;
		z-index: 1;
		top: 5%;
		left: 50%;
		transform: translateX(-50%);
		font-family: Noto Sans S Chinese;
		font-weight: 400;
		font-size: 34rpx;
		color: #FFFFFF;
	}

	.content-wrapper {
		position: relative;
		z-index: 1;
	}

	.search-wrapper {}

	.content-wrapper {
		padding: 197rpx 30rpx 22rpx 30rpx;
	}

	.navbox2 {
		height: 170rpx;
		padding-top: 2%;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.nomore {
		background-color: $u-bg-color;
	}

	.noticeStyle {
		display: flex;
		margin-top: 22rpx;
		height: 86rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		align-items: center;
	}

	.notice-content {
		flex: 1;
	}

	.underline {
		margin-top: 5rpx;
		width: 130rpx;
		height: 6rpx;
		border-radius: 5rpx;
		transition: all 0.25s ease;
	}

	.rowClass {
		margin-top: 20rpx;
	}

	.rowBgColor {
		background-color: rgb(248, 248, 248);
	}

	.leftOffSetRow {
		margin-left: 20%;
	}

	.hoverClass {
		background-color: #E4E7ED;
	}

	.tabName {
		font-size: 28rpx;
	}

	.u-close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.item-cover {
		font-size: 55rpx;
		color: $u-type-warning;
	}

	.item-tag {
		font-size: 24rpx;
		color: $u-tips-color;
		margin-top: 3px;
	}

	.tab-content {
		padding: 0 20rpx;
		margin-top: 22rpx;
		background: #fff;
	}

	.recommend-tabs {
		display: flex;
		justify-content: flex-start;
		padding: 20rpx 0;
		background: #fff;
		font-size: 32rpx;
		font-weight: 600;
	}

	.tab-item {
		margin-right: 40rpx;
		padding: 10rpx 0;
		color: #333;
	}

	.tab-item.active {
		color: #FF2F31;
		border-bottom: 4rpx solid #FF2F31;
	}

	.filter-tabs {
		display: flex;
		justify-content: flex-start;
		padding: 0 0 20rpx 0;
		background: #fff;
		flex-wrap: wrap;
	}

	.filter-item {
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		padding: 12rpx 24rpx;
		background: #f5f5f5;
		border-radius: 20rpx;
		font-size: 26rpx;
		color: #666;
	}

	.filter-item.active {
		background: #FFECEC;
		color: #FF2F31;
	}

	.demo-warter {
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.u-waterfall {
		padding: 0 20rpx;
	}

	.item-title {
		font-size: 28rpx;
		font-weight: 600;
		margin-top: 14rpx;
		padding: 0 10rpx;
		color: #333;
		line-height: 40rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.item-price {
		font-size: 32rpx;
		color: #FF2F31;
		margin-bottom: 10rpx;
	}

	.item-price text {
		font-size: 24rpx;
	}

	.item-desc {
		font-weight: normal;
		font-size: 24rpx;
		color: #999;
	}

	.item-desc,
	.item-price {
		padding: 0 10rpx;
		margin-top: 8rpx;
	}

	.auth-popup {
		width: 600rpx;
		padding: 48rpx 40rpx 40rpx;
		background-color: #fff;
		border-radius: 24rpx;
		box-sizing: border-box;
	}

	.auth-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #1a1a1a;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.auth-desc {
		font-size: 26rpx;
		color: #888;
		text-align: center;
		line-height: 1.6;
		margin-bottom: 40rpx;
	}

	.auth-input {
		margin-bottom: 48rpx;

		::v-deep .u-input {
			padding-bottom: 12rpx;
		}
	}

	.auth-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(135deg, #FF2F31, #FF9379);
		color: #fff;
		font-size: 30rpx;
		font-weight: 500;
		border-radius: 44rpx;
		border: none;
		box-shadow: 0 10rpx 24rpx rgba(41, 121, 255, 0.3);
	}

	.auth-btn:active {
		opacity: 0.85;
	}

	.img {
		width: 100%;
		height: 230rpx;
		display: block;
	}

	.img-box {
		border-radius: 10rpx;
		width: 100%;
		overflow: hidden;
	}

	.buttom {
		.loginType {
			font-size: 14px;
			position: fixed;
			right: 30rpx;
			bottom: 300rpx;
			width: 60px;
			height: 60px;
			padding: 4px;
			cursor: pointer;
			background: #FFF;
			text-align: center;
			line-height: 60px;
			border-radius: 100%;
			-webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
			box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
		}
	}
	
	/* ✅ 修复高度，不卡不抖 */
	.waterfall-scroll {
		height: calc(100vh - 500rpx);
		box-sizing: border-box;
	}
</style>