<template>
	<view class="search-list-page">
		<u-navbar title="搜索资产" :autoBack="true" :background="background" title-color="#2D2B2C"
			back-icon-color="#2D2B2C">
		</u-navbar>
		<view class="search-list-content">
			<view class="filter-dropdown-wrapper">
				<u-sticky offset-top="0">
					<view class="sticky" style="width: 100vw;">
						<filterDropdown :menuTop="0" :filterData="filterData" :defaultSelected="defaultSelected"
							:updateMenuName="true" @confirm="confirm" dataFormat="Object"></filterDropdown>
					</view>
				</u-sticky>
			</view>
			<view class="search-bar-wrapper">
				<view class="search-bar">
					<view class="city-select" @click="location()">{{ city ||'宜昌市'}} <text class="icon-down"></text>
					</view>
					<view class="search-input" @click="search">
						<text class="icon-search"></text>
						<input type="text" placeholder="搜索商铺/住房/土地" />
					</view>
				</view>
			</view>
			<view class="tag-group">
				<view class="tag-item" :class="{ active: selectedTags.includes(tag) }"
					v-for="(tag, index) in tagGroupList" :key="index" @click="onTagClick(tag)">
					{{ tag }}
				</view>
			</view>
		</view>

		<view class="u-p-l-10 u-p-r-10 waterfall">
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{ leftList }">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
						<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.assetsType }} {{ item.footPrint }}㎡ {{ item.orientation ||'未知'}}
						</view>
						<view class="item-tags">
							<view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ tag }}</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
						<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.assetsType}} {{ item.footPrint }}㎡ {{ item.orientation ||'未知'}}</view>
						<view class="item-tags">
							<view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ tag }}</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			
			<!-- ✅ 修复状态 + 去掉自带loadmore -->
			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus"
				style="height: 80rpx;line-height: 80rpx;"></u-loadmore>
				
			<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
			<u-no-network></u-no-network>
		</view>
	</view>
</template>

<script>
	import config from "@/common/config.js"
	import searchData from '@/common/utils/searchData.js';
	import filterDropdown from '@/components/zy/filterDropdown.vue';
	export default {
		components: {
			filterDropdown
		},
		data() {
			return {
				city: null,
				indexArr: [],
				valueArr: [],
				defaultSelected: [],
				filterData: [],
				searchData: {},
				pageNo: 1, // ✅ 统一页码
				pageSize: 20,
				scrollTop: 0,
				houseList: [],
				loadStatus: 'more', // ✅ 修复为正确状态
				flowList: [],
				imageModeMap: {},
				defaultImgUrl: '/public/static/index/assets.jpg',
				tagGroupList: [],
				selectedTags: [],
				background: {
					backgroundImage: 'linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);'
				},
			}
		},
		onLoad(option) {
			let type = option.type
			let villageName = option.villageName
			let lifeData = uni.getStorageSync('lifeData');
			let vuex_city = lifeData.vuex_city
			this.city = vuex_city
			this.searchData = {}
			if (type) {
				this.searchData.type = type
			}
			if (villageName) {
				this.searchData.villageName = villageName
			}
			this.findFilterTabData()
			this.findHouseList(null,option.keyword)
		},
		onShow() {

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// ✅ 保留页面触底（瀑布流必须用这个）
		onReachBottom() {
			this.loadMore()
		},
		onPullDownRefresh() {
			this.resetAndLoad();
		},
		computed: {
			staticHost() {
				return this.$config.staticUrl
			}
		},
		methods: {
			onTagClick(tag) {
				const isSelected = this.selectedTags.includes(tag);
				if (isSelected) {
					this.selectedTags = this.selectedTags.filter(item => item !== tag);
				} else {
					this.selectedTags.push(tag);
				}
				this.resetAndLoad()
			},
			location() {
				this.$u.route({
					url: '/pages-biz/location/location',
				})
			},
			search() {
				this.$u.route('/pages-biz/search/search');
			},
			resetAndLoad() {
				this.pageNo = 1;
				this.flowList = [];
				this.loadStatus = 'more'; // ✅ 修复
				this.$nextTick(() => {
					this.$refs.uWaterfall && this.$refs.uWaterfall.clear();
					this.findHouseList();
				});
			},
			findHouseList(type = null,keyword = null) {
				// ✅ 正确判断
				if (this.loadStatus !== 'more') return;

				this.loadStatus = 'loading';

				this.$u.post('/assets/queryPage', {
					assetsStatus:'闲置中',
					assetsType: type,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					keyWord: keyword,
					bizZone: this.searchData.bizZone,
					layout: this.searchData.layout,
					renovationStatus: this.searchData.decoration,
					features: this.searchData.feature
				}).then(result => {
					const 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'; // ✅ 恢复
					}
					this.keyWord = null

				}).catch(err => {
					console.log("获取资产信息失败：", err);
					this.loadStatus = 'more'; // ✅ 恢复
				}).finally(() => {
					uni.stopPullDownRefresh();
				});
			},
			loadMore() {
				if (this.loadStatus !== 'more') return;
				this.findHouseList();
			},
			async findFilterTabData() {
				const bizZones  = await this.getBizZone();
				const features  = await this.getFeatures();
				let featureSubMenu = [];
				for (let i = 0; i < bizZones.length; i++) {
					searchData[0].submenu.push({
						name: bizZones[i],
						value: bizZones[i]
					});
				}
				for (let i = 0; i < features.length; i++) {
					featureSubMenu.push({
						name: features[i],
						value: features[i]
					})
				}
				searchData[1].submenu.push({
					name:"基础配套",
					type:"radio-multi",
					submenu: featureSubMenu
				})
				this.filterData = searchData;
			},
			async getFeatures(){
			  const res = await this.$u.get('/assets/getFeatures');
			  if (res.flag) {
			    return res.data;
			  }
			  return [];
			},
			async getBizZone(){
			  const res = await this.$u.get('/assets/getBizZones');
			  if (res.flag) {
			    return res.data;
			  }
			  return [];
			},
			 getImageSize(url, index) {
			    uni.getImageInfo({
			      src: url,
			      success: (res) => {
			        const { width, height } = res;
			        this.$set(this.imageModeMap, index, width >= height ? 'widthFix' : 'aspectFit');
			      },
			      fail: () => {
			        this.$set(this.imageModeMap, index, 'aspectFit');
			      }
			    });
			  },
			clickImage(houseId) {
				this.$u.route({
					url: '/pages-assets/assets/assetsDetail',
					params: {
						assetsNo: houseId
					}
				})
			},
			confirm(e) {
				let bizZone = e.value[0][0]
				let combo = e.value[1]
				let layout = combo[0]
				let decoration = combo[1]
				let feature = combo[2]
				this.searchData = {}
				if (bizZone) {
					this.searchData.bizZone = bizZone
				}
				if (layout && layout.length > 0) {
					this.searchData.layout =  layout.toString()
				}
				if (decoration && decoration.length > 0) {
					this.searchData.decoration = decoration.toString()
				}
				if (feature && feature.length > 0) {
					this.searchData.feature = feature.toString()
				}
				this.resetAndLoad()
			},
			code() {
				this.$mytip.toast('请咨询技术支持')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-list-page {
		background-color: #f5f5f5;
	}

	.search-list-content {
		background: linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);
		border-radius: 0rpx;
		padding-bottom: 20rpx;
	}

	.search-bar-wrapper {
		padding: 10rpx 20rpx;
	}

	.search-bar {
		display: flex;
		background-color: #fff;
		align-items: center;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
	}

	.city-select {
		margin-right: 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.icon-down {
		display: inline-block;
		width: 0;
		height: 0;
		border-left: 8rpx solid transparent;
		border-right: 8rpx solid transparent;
		border-top: 8rpx solid #666;
		margin-left: 5rpx;
		vertical-align: middle;
	}

	.search-input {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.icon-search {
		margin-right: 10rpx;
		color: #999;
		font-size: 28rpx;
	}

	.search-input input {
		flex: 1;
		font-size: 28rpx;
		border: none;
		background: transparent;
		outline: none;
	}

	.filter-dropdown-wrapper {
		margin-bottom: 20rpx;
	}

	.tag-group {
		padding: 15rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
		border-bottom: 1rpx solid #eee;
		margin-top: 20rpx;
	}

	.tag-item {
		padding: 5rpx 10rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		color: #723324;
		transition: all 0.3s ease;
		border: 1px solid #DBB39D;
	}

	.tag-item.active {
		background-color: #FCF2F3;
		border: 1px solid #ffffff;
	}

	.waterfall {
		padding-top: 20rpx;
		background-color: #ffffff;
	}

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

	.search {
		width: 54px;
		height: 44px;

		&:active {
			background-color: $u-bg-color;
		}
	}

	.rowClass {
		border-radius: 8px;
		background-color: rgb(255, 255, 255);
		margin-top: 10rpx;
	}

	.hoverClass {
		background-color: #E4E7ED;
	}

	.tabName {
		font-size: 28rpx;
		color: $u-main-color;
	}

	.demo-warter {
		border-radius: 8px;
		margin-top: 15rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
		background-color: #ffffff;
		padding: 0rpx;
		position: relative;
		overflow: hidden;
	}

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

	.u-lazy-load {
		width: 100%;
	}

	.item-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
		padding: 12rpx 15rpx 8rpx 15rpx;
		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;
		padding: 0 15rpx 15rpx 15rpx;
	}

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

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

	.item-tags {
		display: flex;
		flex-wrap: wrap;
		padding: 0 15rpx 12rpx 15rpx;
		gap: 10rpx;
	}

	.tag {
		padding: 4rpx 12rpx;
		background-color: #f5f5f5;
		border-radius: 12rpx;
		font-size: 22rpx;
		color: #666;
	}

	.item-tag {
		font-size: 24rpx;
		color: $u-tips-color;
		margin-top: 3px;
	}
	.img{
			  width: 100%;
			  height: 230rpx;
			  display: block;
		}
	.img-box {
	  border-radius: 10rpx;
	  width: 100%;
	  height: 230rpx;
	  overflow: hidden;
	}
</style>