<template>
	<view class="page">
		<!-- 搜索 -->
		<view class="search-fix">
			<view class="search">
				<u-search placeholder="请输入搜索关键词" v-model="where.keywords" :actionStyle="actionStyle" :showAction="false"
					shape="square" bgColor="#ffffff" :animation="true" @search="onSearch"></u-search>
			</view>
		</view>
		<view class="search-tools">
			<view class="region">
				<uni-data-select class="select-width" v-model="where.region" :localdata="region" placeholder="区域"
					@change="onSearch"></uni-data-select>
			</view>
			<view class="region">
				<uni-data-select class="select-width" v-model="where.priceScene" :localdata="price" placeholder="价格区间"
					@change="onSearch"></uni-data-select>
			</view>
			<view class="region">
				<uni-data-select class="select-width" v-model="where.extentScene" :localdata="extent" placeholder="面积"
					@change="onSearch"></uni-data-select>
			</view>
			<view class="region">
				<uni-data-select class="select-width" v-model="where.sortScene" :localdata="sort" placeholder="排序"
					@change="onSearch"></uni-data-select>
			</view>
		</view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="onScroll">
			<uv-waterfall ref="waterfall" v-model="list" left-gap="10" right-gap="10" column-gap="8"
				@changeList="changeList">
				<!-- 第一列数据 -->
				<template v-slot:list1>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view class="house-list">
						<block v-for="(item,index) in list1" :key="index">
							<view class="item" @click="$push('sub_pages/house/detail?houseId=' + item.houseId)">
								<image :src="item.files[0].url" mode="widthFix">
								</image>
								<view class="info">
									<view class="title">{{ item.houseTitle }}</view>
									<view class="desc"><text>{{ item.extent }}m²|{{ item.toward }}</text></view>
									<view class="price">{{ item.monthlyRent }}元/月</view>
								</view>
							</view>
						</block>
					</view>
				</template>
				<!-- 第二列数据 -->
				<template v-slot:list2>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view class="house-list">
						<block v-for="(item,index) in list2" :key="index">
							<view class="item" @click="$push('sub_pages/house/detail?houseId=' + item.houseId)">
								<image :src="item.files[0].url" mode="widthFix">
								</image>
								<view class="info">
									<view class="title">{{ item.houseTitle }}</view>
									<view class="desc"><text>{{ item.extent }}m²|{{ item.toward }}</text></view>
									<view class="price">{{ item.monthlyRent }}元/月</view>
								</view>
							</view>
						</block>
					</view>
				</template>
			</uv-waterfall>
			<!-- <view class="house-list">

				<block v-for="(item,index) in list" :key="index">
					<view class="item" @click="$push('sub_pages/house/detail?houseId=' + item.houseId)">
						<image :src="item.files[0].url" mode="widthFix">
						</image>
						<view class="info">
							<view class="title">{{ item.houseTitle }}</view>
							<view class="desc"><text>{{ item.extent }}m²|{{ item.toward }}</text></view>
							<view class="price">{{ item.monthlyRent }}元/月</view>
						</view>
					</view>
				</block> -->
			<!-- <view class="item">
					<image src="https://file.wsdns.cn/20230802/8bf0658596ab458d94666cbf4b1177e9.jpg" mode="widthFix">
					</image>
					<view class="info">
						<view class="title">整租·万科云城 2室1厅1卫整租·万科云城 2室1厅1卫整租·万科云城 2室1厅1卫</view>
						<view class="desc"><text>50.8m²|南</text></view>
						<view class="price">6600元/月</view>
					</view>
				</view> -->

			<!-- </view> -->
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="list.length == 0">
			</u-empty>
		</scroll-view>
	</view>
</template>

<script>
	import * as Util from '@/utils/util.js'
	import store from '@/store'
	import storage from '@/utils/storage'
	import * as DictApi from '@/api/dict.js'
	import * as HouseInfoApi from '@/api/house-info.js'

	const menu = [{
			name: '推荐',
			reset: true
		},
		{
			name: '必看好房',
			reset: false
		}
	];
	const region = [];
	const price = [];
	const extent = [];
	const sort = [];
	const loginUserId = uni.getStorageSync('userId')

	export default {
		data() {
			return {
				list: [],
				list1: [], // 瀑布流第一列数据
				list2: [], // 瀑布流第二列数据
				loadMore: true,
				status: '加载更多',
				page: 1,
				where: {},
				dict: null,
				cityList: [],
				// 控制onShow事件是否刷新订单列表
				canReset: false,
				disabled: false,
				swiperList: [
					'https://file.wsdns.cn/20230802/f33f5ac239c843438b36f40941d946ef.png',
					'https://file.wsdns.cn/20230802/1116a02b07904991b2ebdc2c3da4a691.png',
				],
				menu,
				region,
				price,
				extent,
				sort,
				// priceScene: null,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				actionStyle: {
					background: '#3f72f4',
					color: '#ffffff',
					padding: '12rpx 0',
					borderRadius: '12rpx'
				},
			};

		},
		onLoad() {
			this.getDict()
			this.list = []
			this.onRefreshList()
		},
		onShow() {},
		onBackPress() {},
		onUnload() {

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 触底函数
		onReachBottom() {
			console.log("触底函数: ");
			const app = this
			if (app.loadMore) {
				app.page = ++app.page;
				app.onRefreshList()
			}
		},
		methods: {
			// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
			changeList(e) {
				this[e.name].push(e.value);
			},
			onRefreshList() {
				const app = this
				const userId = uni.getStorageSync('userId')
				app.where.page = app.page
				// if (app.priceScene) {
				// 	app.where.monthlyRentStart = app.priceScene
				// 	app.where.monthlyRentEnd = app.priceScene
				// }
				console.log('app: ', app.where);
				return new Promise((resolve, reject) => {
					HouseInfoApi.pageHouseInfo(app.where)
						.then(result => {
							const list = result.data.list.map(d => {
								d.files = JSON.parse(d.files) || []
								return d
							})
							// 合并新数据
							app.list = app.list.concat(list)
							if (result.data.count > app.list.length) {
								app.canReset = true
							} else {
								app.canReset = false
							}
							console.log("app.list: ", app.list);
							resolve(list)
						})
				})
			},
			getDict() {
				const app = this
				DictApi.listDictionary().then(res => {
					app.dict = res.data

					app.price = res.data.price[0].map(d => {
						return {
							value: d,
							text: d
						}
					})
					app.extent = res.data.extent[0].map(d => {
						return {
							value: d,
							text: d
						}
					})
					app.sort = res.data.sort[0].map(d => {
						console.log('d: ', d);
						return {
							value: d,
							text: d
						}
					})

					uni.request({
						url: 'https://file.wsdns.cn/json/city.js',
						success(res) {
							res.data.map(e => {
								if (e.value == '450000') {
									e.children.map(city => {
										if (city.value == '450100') {
											app.region = city.children.map(r => {
												return {
													value: r.label,
													text: r.label
												}
											})
										}
									})
								}
							});
						}
					})
				})
			},
			onSearch(text) {
				this.list = []
				this.page = 1
				console.log('extentScene: ', this.where.extentScene);
				if (text == '0-100㎡') {
					this.where.extentScene = '100'
				}
				if (text == '100-150㎡') {
					this.where.extentScene = '100-150'
				}
				if (text == '150-200㎡') {
					this.where.extentScene = '150-200'
				}
				if (text == '200-300㎡') {
					this.where.extentScene = '200-300'
				}
				if (text == '300-400㎡') {
					this.where.extentScene = '300-400'
				}
				if (text == '400-600㎡') {
					this.where.extentScene = '400-600'
				}
				if (text == '600-1000㎡') {
					this.where.extentScene = '600-1000'
				}
				if (text == '1000㎡以上') {
					this.where.extentScene = '1000'
				}

				this.onRefreshList()
				// this.$push('/sub_pages/member/member', this.where)
			},
		},
		watch: {

		}
	};
</script>
<style lang="scss" scoped>
	.page {
		.search-fix {
			width: 750rpx;
			margin: auto;
			display: flex;

			.search {
				width: 710rpx;
				margin: 15rpx auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.search-tools {
			width: 720rpx;
			margin: auto;
			display: flex;
			justify-content: space-around;
			font-size: 22rpx;

			.region {
				width: 178rpx;
				background-color: #ffffff;

				* {
					font-size: 22rpx;
				}
			}
		}

		.fixed {
			position: fixed;
			top: 300rpx;
			left: 125rpx;
		}

		.no-fixed {
			position: absolute;
			top: 0rpx;
			left: 125rpx;
		}

		.tabs {
			margin-top: 50rpx;
		}

		.house-list {
			// width: 700rpx;
			// margin: 20rpx auto;
			// display: flex;
			// flex-wrap: wrap;
			// justify-content: space-between;

			.item {
				margin-bottom: 40rpx;
				border-radius: 20rpx;
				// box-shadow: 0 3rpx 10rpx 0px #cccccc;
				background-color: #ffffff;
				width: 338rpx;

				image {
					border-radius: 20rpx 20rpx 0 0;
					height: 420rpx;
					width: 338rpx;
				}

				.info {
					padding: 20rpx 20rpx;
					display: flex;
					flex-direction: column;

					.title {
						font-size: 30rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 2; //行数
						line-clamp: 2;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
					}

					.desc {
						color: #999999;
						font-size: 28rpx;
					}

					.price {
						color: #ff0000;
						font-size: 30rpx;
					}
				}
			}
		}
	}
</style>