<template>
	<view class="page">

		<!-- 幻灯片 -->
		<view class="swiper">
			<view v-show="swiperType == 'image'">
				<u-swiper :list="swiperList" height="500rpx" :radius="0" @change="e => currentNum = e.current"
					indicatorStyle="right: 20px; bottom: 50px" @click="onSwiper" @longpress="onImageLongPress">
					<view slot="indicator" class="indicator-num">
						<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
					</view>
				</u-swiper>
				<!-- 图片下载按钮 -->
				<view class="download-btn" @click="downloadCurrentImage" v-if="swiperList.length > 0">
					<u-icon name="download" color="#ffffff" size="20"></u-icon>
				</view>
			</view>

			<view class="video-box" v-show="swiperType == 'video'">
				<video loop class="swiper-video" muted :autoplay="true" :src="form.videoUrl" @longpress="onVideoLongPress"></video>
				<!-- 视频下载按钮 -->
				<view class="download-btn2" @click="downloadCurrentVideo" v-if="form.videoUrl">
					<u-icon name="download" color="#ffffff" size="20"></u-icon>
				</view>
			</view>
			<view class="swiper-switch">
				<view @click="swiperType = 'image'" :class="{active: swiperType == 'image'}" class="swiper-switch-item">
					图片</view>
				<view @click="swiperType = 'video'" :class="{active: swiperType == 'video'}" class="swiper-switch-item">
					视频</view>
			</view>


			<!-- 房源参数 -->
			<view class="house-info">
				<view class="title">
					{{ form.houseTitle || '' }}
					<!-- 五象航洋城三室一厅采光好新房精装修三房一厅 采光好，乘诚意出售 -->
				</view>
				<scroll-view scroll-x class="">
					<view class="label">
						<view class="u-page__tag-item" :key="index" v-for="(tag, index) in form.houseLabel">
							<u-tag :text="tag" type="primary" plain size="mini"></u-tag>
						</view>
					</view>
				</scroll-view>
				<view class="dict">
					<view class="dict-item">
						<text class="title">{{ form.monthlyRent || 0 }}元/月</text>
						<text class="desc">月租</text>
					</view>
					<view class="dict-item">
						<text class="title">{{ form.extent || 0 }}m²</text>
						<text class="desc">建筑面积</text>
					</view>
					<view class="dict-item">
						<text class="title">{{ form.houseType || '' }}</text>
						<text class="desc">户型</text>
					</view>
					<view class="dict-item">
						<text class="title">{{ form.floor || '' }}</text>
						<text class="desc">楼层</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 房源介绍 -->
		<u-gap height="124"></u-gap>
		<view class="house-card">
			<view class="title">
				房源介绍
			</view>
			<view class="field-list">
				<view class="item col-2">
					城市：{{ form.city || '' }}
				</view>
				<view class="item col-2">
					区/县：{{ form.region || '' }}
				</view>
				<view class="item col-1">
					物业地址：{{ form.address || '' }}
				</view>
				<view class="item col-2">
					租金(元/m²)：{{ form.rent || '' }}
				</view>
				<view class="item col-2">
					楼层：{{ form.floor || '' }}
				</view>
				<view class="item col-2">
					朝向：{{ form.toward || '' }}
				</view>
				<view class="item col-2">
					押付方式：{{ form.leaseMethod || '' }}
				</view>
				<view v-if="isManager" class="item col-2">
					房号：{{ form.roomNumber || '' }}
				</view>
				<view v-if="isManager" class="item col-2">
					如何看房：{{ form.password || '' }}
				</view>
				<view v-if="isManager" class="item col-2" @click="makePhoneCall">业主电话：{{ form.phone || '' }}</view>
				<view class="item col-2">物业费(元/m²)：{{ form.propertyFees || '' }}</view>
				<!-- <view v-if="isManager" class="item col-2">租期：{{ form.tenancy || '' }}</view> -->
				<view class="item col-2" v-if="isManager">
					佣金：{{ form.commission || '' }}
				</view>
				<!-- <view class="item col-2" v-if="isManager">
					是否可溢价：{{ form.premium || '' }}
				</view> -->
				<view v-if="form.salePrice" class="item col-2">卖价：{{ form.salePrice || '' }}元/m²</view>
				<view v-if="form.totalPrice" class="item col-2">总价：{{ form.totalPrice || '' }}万元</view>
			</view>
		</view>

		<!-- 办公室配套 -->
		<u-gap v-if="form.supporting"></u-gap>
		<view v-if="form.supporting" class="house-card">
			<view class="title">
				办公室配套
			</view>
			<view class="about">
				{{form.supporting}}
			</view>
		</view>

		<!-- 房源介绍 -->
		<u-gap></u-gap>
		<view class="house-card">
			<view class="title">
				房源介绍
			</view>
			<view class="about">
				<mp-html :content="form.content" />
			</view>
		</view>

		<template v-if="isManager">
			<u-gap></u-gap>
			<view class="house-card" style="background-color:azure;">
				<view class="title" style="display: flex; flex-direction: row; justify-content: space-between; width: 100%;">
					<view class="title">管理员备注</view>
					<view><button size="mini" type="primary" @click="$push('sub_pages/house/record?houseId=' + form.houseId)">跟进记录</button></view>
				</view>
				<view class="about">
					<mp-html :content="form.comments" />
				</view>
			</view>
		</template>
		
		<!-- 房源位置 -->
		<u-gap></u-gap>
		<view class="house-card">
			<view class="title">
				房源位置
			</view>
			<view class="position">
				<map style="width: 100%; height: 200px;" :latitude="form.latitude" :longitude="form.longitude"
					:markers="covers">
				</map>
			</view>
		</view>

		<!-- 房产经纪人 -->
		<u-gap></u-gap>
		<view class="user-card">
			<u-cell :title="`${form.nickname}`" :label="`发布房源10套`" :border="false">
				<u-avatar slot="icon" size="50" :src="form.avatar" customStyle="margin: -3px 5px -3px 0"></u-avatar>
				<!-- <view solt="label">
					<text class="desc-text">{{ `ID：${item.userId}` }}</text>
					<text class="desc-text">{{ `粉丝：${item.id}` }}</text>
				</view> -->
				<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
					<text style="color: #666666;">******</text>
					<!-- <text style="color: #666666;">{{ mobile || form.userPhone }}</text> -->
				</view>
			</u-cell>
		</view>


		<!-- 操作栏 -->
		<u-gap height="100"></u-gap>
		<view class="pay-tools">
			<view class="item" @click="onHeart">
				<u-icon name="heart-fill" size="28" color="#ff0000" v-if="form.liked"></u-icon>
				<u-icon name="heart" size="28" v-else></u-icon>
				<text v-if="form.liked">已收藏</text>
				<text v-else>收藏</text>
			</view>
			<!-- <view class="item" @click="onShare">
				<u-icon name="share" size="28" color="#666666"></u-icon>
				<text>分享</text>
			</view> -->
			<!-- <view class="item">
				<u-button icon="map" type="error" text="预约看房" disabled
					@click="$push('sub_pages/checkout/checkout?id=' + form.houseId)"></u-button>
			</view> -->
			<view class="item" @click="goAiHouse">
				<u-icon name="chat" size="28" color="#3f72f4"></u-icon>
				<text style="color: #3f72f4;">AI找房</text>
			</view>
		</view>

		<!-- 分享弹窗 -->
		<ShareSheet
			v-model="showShareSheet"
			:shareTitle="shareTitle"
			:shareImageUrl="shareImageUrl"
			:posterApiCall="handleGenerateHousePoster"
			:posterApiParam="posterApiParam"
		/>

		<!-- 房源海报生成器 -->
		<HousePosterGenerator
			ref="housePosterGenerator"
			:houseData="form"
			:swiperList="swiperList"
			@posterGenerated="onPosterGenerated"
		/>

		<!-- 海报预览弹窗 -->
		<GoodsPosterPopup
			v-model="showPosterPreview"
			:apiCall="posterPreviewApiCall"
			:apiParam="{}"
		/>
	</view>
</template>

<script>
	import * as Util from '@/utils/util.js'
	import * as HouseInfoApi from '@/api/house-info.js'
	import * as DictApi from '@/api/dict.js'
	import {
		getAgentUser,
		getUser
	} from '@/api/user.js'
	import ShareSheet from '@/components/share-sheet'
	import HousePosterGenerator from '@/components/house-poster-generator'
	import GoodsPosterPopup from '@/components/goods-poster-popup'

	const menu = [{
			name: '推荐',
			reset: true
		},
		{
			name: '特价好房',
			reset: false
		}
	];
	const region = [{
			value: 0,
			text: "青秀区"
		},
		{
			value: 1,
			text: "兴宁区"
		}
	];
	const price = [{
			value: 0,
			text: "3000"
		},
		{
			value: 1,
			text: "4000"
		}
	];
	const extent = [{
			value: 0,
			text: "200平"
		},
		{
			value: 1,
			text: "300平"
		}
	];
	const sort = [{
			value: 0,
			text: "升序"
		},
		{
			value: 1,
			text: "降序"
		}
	];
	const baseList = [{
			name: 'star',
			title: '价格低'
		},
		{
			name: 'star',
			title: '间隔'
		},
		{
			name: 'star',
			title: '工区大'
		},
		{
			name: 'star',
			title: '朝向东'
		},
		{
			name: 'star',
			title: '朝向西'
		},
		{
			name: 'star',
			title: '朝向南'
		},
		{
			name: 'star',
			title: '朝向北'
		},
		{
			name: 'star',
			title: '中间楼层'
		},
		{
			name: 'star',
			title: '高楼层'
		},
		{
			name: 'star',
			title: '低楼层'
		},
		{
			name: 'star',
			title: '落地窗'
		},
		{
			name: 'star',
			title: '通上下水'
		},
		{
			name: 'star',
			title: '可做厨房'
		},
		{
			name: 'star',
			title: '中央空调'
		},
	]
	const loginUserId = uni.getStorageSync('userId')

	export default {
		components: {
			ShareSheet,
			HousePosterGenerator,
			GoodsPosterPopup
		},
		data() {
			return {
				houseId: 0,
				form: {

				},
				swiperList: [],
				menu,
				region,
				price,
				extent,
				sort,
				baseList,
				currentNum: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				actionStyle: {
					background: '#3f72f4',
					color: '#ffffff',
					padding: '12rpx 0',
					borderRadius: '12rpx'
				},
				swiperType: 'image',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: 'https://oss.wsdns.cn/20230803/49fe9c001370488caf29c3decb34f6c7.png?x-oss-process=image/resize,w_750/quality,Q_90'
				}],
				agentUser: {},
				isManager: false,
				phone: '',
				// 分享相关数据
				showShareSheet: false,
				shareTitle: '',
				shareImageUrl: '',
				posterApiParam: {},
				// 海报预览相关
				showPosterPreview: false,
				currentPosterUrl: '',
				dealerId: 0,
				mobile: ''
			};

		},
		onLoad(options) {
			this.houseId = options.houseId
			this.getHouseInfo()

			if (options.user_id) {
				getAgentUser(options.user_id).then(res => {
					this.agentUser = res.data
				})
			} else {
				DictApi.getDictionaryOptions({
					dictCode: 'service'
				}).then(res => {
					this.phone = res.data[0].dictDataCode
				})
			}
			getUser().then(res => {
				this.isManager = res.data.gradeId == 16
			}).catch((err) => {
				console.log(err);
			})
			if(options.dealerId){
				this.dealerId = options.dealerId
			}
			if(options.mobile){
				this.mobile = options.phone
			}


		},
		onShow() {},
		onBackPress() {},
		onUnload() {

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onShareAppMessage() {
			return {
				title: this.form.houseTitle,
				path: `/sub_pages/house/detail?houseId=${this.form.houseId}&dealerId=${uni.setStorageSync('userId')}&mobile=${uni.getStorageInfoSync('Phone')}`
			}
		},
		onShareTimeline() {
			return {
				title: this.form.houseTitle,
				query: this.form.houseId
			}
		},
		methods: {
			onSwiper(e) {
				console.log(e,'deeeeee')
			},
			// 图片长按事件
			onImageLongPress() {
				if (this.swiperList.length > 0) {
					uni.showActionSheet({
						itemList: ['下载当前图片', '下载所有图片'],
						success: (res) => {
							if (res.tapIndex === 0) {
								this.downloadCurrentImage();
							} else if (res.tapIndex === 1) {
								this.downloadAllImages();
							}
						}
					});
				}
			},
			// 视频长按事件
			onVideoLongPress() {
				if (this.form.videoUrl) {
					uni.showActionSheet({
						itemList: ['下载视频'],
						success: (res) => {
							if (res.tapIndex === 0) {
								this.downloadCurrentVideo();
							}
						}
					});
				}
			},
			// 下载当前图片
			downloadCurrentImage() {
				if (this.swiperList.length === 0) {
					uni.showToast({
						title: '暂无图片',
						icon: 'none'
					});
					return;
				}

				const currentImage = this.swiperList[this.currentNum];
				const imageUrl = currentImage.image || currentImage.src || currentImage;
        console.log(imageUrl,'imageUrl')
				if (!imageUrl.url) {
					uni.showToast({
						title: '图片地址无效',
						icon: 'none'
					});
					return;
				}
				Util.downloadImage(imageUrl.url);
			},
			// 下载所有图片
			downloadAllImages() {
				if (this.swiperList.length === 0) {
					uni.showToast({
						title: '暂无图片',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '确认下载',
					content: `确定要下载所有 ${this.swiperList.length} 张图片吗？`,
					success: (res) => {
						if (res.confirm) {
							this.batchDownloadImages();
						}
					}
				});
			},
			// 批量下载图片
			batchDownloadImages() {
				let downloadCount = 0;
				let successCount = 0;
				let failCount = 0;
				const totalCount = this.swiperList.length;

				uni.showLoading({
					title: `下载中 0/${totalCount}`,
					mask: true
				});

				this.swiperList.forEach((item, index) => {
					const imageUrl = item.image || item.src || item;

					if (!imageUrl) {
						downloadCount++;
						failCount++;
						this.updateBatchProgress(downloadCount, successCount, failCount, totalCount);
						return;
					}

					setTimeout(() => {
						Util.downloadImage(
							imageUrl,
							() => {
								downloadCount++;
								successCount++;
								this.updateBatchProgress(downloadCount, successCount, failCount, totalCount);
							},
							() => {
								downloadCount++;
								failCount++;
								this.updateBatchProgress(downloadCount, successCount, failCount, totalCount);
							}
						);
					}, index * 1000); // 每张图片间隔1秒下载，避免并发过多
				});
			},
			// 更新批量下载进度
			updateBatchProgress(downloadCount, successCount, failCount, totalCount) {
				if (downloadCount < totalCount) {
					uni.showLoading({
						title: `下载中 ${downloadCount}/${totalCount}`,
						mask: true
					});
				} else {
					uni.hideLoading();
					uni.showModal({
						title: '下载完成',
						content: `成功：${successCount}张，失败：${failCount}张`,
						showCancel: false
					});
				}
			},
			// 下载当前视频
			downloadCurrentVideo() {
				if (!this.form.videoUrl) {
					uni.showToast({
						title: '暂无视频',
						icon: 'none'
					});
					return;
				}

				Util.downloadVideo(this.form.videoUrl);
			},
			getHouseInfo() {
				const app = this
				const {
					houseId
				} = this
				HouseInfoApi.getHouseInfo(houseId).then(res => {
					app.form = res.data
					app.form.files = JSON.parse(res.data.files) || []
					app.swiperList = app.form.files
					app.form.houseLabel = JSON.parse(res.data.houseLabel) || []
					// app.form.supporting = JSON.parse(res.data.supporting) || []

					try {
						app.form.supporting = JSON.parse(app.form.supporting)
						console.log('app.form.supporting: ', app.form.supporting);
					} catch (e) {
						console.log(e);
						//TODO handle the exception
					}

					uni.$u.mpShare = {
						title: `${app.form.houseTitle} ${app.form.monthlyRent}元/月 ${app.form.houseType} ${app.form.extent}m²`,
						path: `sub_pages/house/detail?houseId=${app.form.houseId}&user_id=${uni.getStorageSync('userId')}`
						// path: '' + app.form.houseId + app.form.monthlyRent + '&user_id=' + uni.getStorageSync('userId')
					}
				}).catch(err => {
					app.$error(err.message)
				})
			},
			onHeart() {
				const app = this;
				HouseInfoApi.likeHouse({
					houseId: this.form.houseId,
					houseUserId: this.form.userId
				}).then(res => {
					app.form.liked = res.data
				})
			},
			// 分享功能
			onShare() {
				// 检查是否有房源信息
				if (!this.form.houseTitle) {
					uni.showToast({
						title: '房源信息加载中...',
						icon: 'none'
					});
					return;
				}
				

				HouseInfoApi.getGeneratePoster(this.form.houseId).then(res => {
					console.log(res.data,'12312312...');

					// 点击后下载海报图片 res.data
					this.downloadPosterImage(res.data);

				})

				
			},
			// 处理海报生成（确保this上下文正确）
			handleGenerateHousePoster(params) {
				console.log('handleGenerateHousePoster 被调用，参数:', params);
				console.log('当前房源图片列表:', this.swiperList);
				console.log('房源信息:', this.form);

				return new Promise(async (resolve, reject) => {
					try {
						// 检查房源信息是否完整
						if (!this.form || !this.form.houseTitle) {
							throw new Error('房源信息不完整');
						}

						// 显示加载提示
						uni.showLoading({
							title: '生成海报中...',
							mask: true
						});

						// 使用新的海报生成器
						const posterUrl = await this.$refs.housePosterGenerator.generatePoster();

						console.log('海报生成成功:', posterUrl);

						// 隐藏加载提示
						uni.hideLoading();

						// 保存海报URL并显示预览弹窗
						this.currentPosterUrl = posterUrl;
						this.showPosterPreview = true;

						resolve({
							data: {
								imageUrl: posterUrl
							}
						});

					} catch (error) {
						console.error('handleGenerateHousePoster 执行出错:', error);

						// 隐藏加载提示
						uni.hideLoading();

						// 如果新海报生成失败，回退到原有逻辑
						this.handleFallbackPoster()
							.then(imageUrl => {
								console.log('回退海报生成成功:', imageUrl);

								// 保存海报URL并显示预览弹窗
								this.currentPosterUrl = imageUrl;
								this.showPosterPreview = true;

								resolve({
									data: {
										imageUrl: imageUrl
									}
								});
							})
							.catch(err => {
								console.log('回退海报生成也失败:', err);
								reject(err);
							});
					}
				});
			},
			// 回退海报生成逻辑（当新海报生成失败时使用）
			handleFallbackPoster() {
				return new Promise((resolve) => {
					try {
						// 优先使用房源的第一张图片作为海报
						if (this.swiperList && this.swiperList.length > 0) {
							const firstImage = this.swiperList[0];
							// 支持多种图片URL格式
							const imageUrl = firstImage.url || firstImage.image || firstImage.src || firstImage;

							console.log('第一张图片对象:', firstImage);
							console.log('提取的图片URL:', imageUrl);

							if (imageUrl && typeof imageUrl === 'string' && imageUrl.trim() !== '') {
								console.log('使用房源图片作为回退海报:', imageUrl);
								resolve(imageUrl.trim());
								return;
							}
						}

						console.log('没有可用的房源图片，生成文字海报');
						// 如果没有房源图片，生成一个包含房源信息的文字海报
						const houseTitle = (this.form && this.form.houseTitle) || '房源信息';
						const monthlyRent = (this.form && this.form.monthlyRent) || 0;
						const houseType = (this.form && this.form.houseType) || '';
						const extent = (this.form && this.form.extent) || 0;

						// 使用一个简单的占位图片服务
						const defaultPosterUrl = 'https://dummyimage.com/400x600/4a90e2/ffffff&text=' +
							encodeURIComponent(`${houseTitle}\n${monthlyRent}元/月\n${houseType}\n${extent}m²`);

						console.log('生成的回退海报URL:', defaultPosterUrl);
						resolve(defaultPosterUrl);
					} catch (error) {
						console.error('handleFallbackPoster 执行出错:', error);
						// 如果生成回退海报也失败，使用一个简单的占位图
						resolve('https://dummyimage.com/400x600/cccccc/666666&text=房源海报');
					}
				});
			},

			// 海报生成完成回调
			onPosterGenerated(posterUrl) {
				console.log('海报生成完成:', posterUrl);
				// 可以在这里添加额外的处理逻辑
			},

			// 海报预览API调用（用于GoodsPosterPopup组件）
			posterPreviewApiCall() {
				return Promise.resolve({
					data: {
						imageUrl: this.currentPosterUrl
					}
				});
			},

			onCall() {
				if (this.agentUser && this.agentUser.phone) {
					uni.makePhoneCall({
						phoneNumber: this.agentUser.phone
					})
				} else if (this.phone) {
					uni.makePhoneCall({
						phoneNumber: this.phone
					})
				}
			},
			makePhoneCall() {
				if (!this.form.phone) {
					uni.showToast({
						title: '暂无电话号码',
						icon: 'none'
					})
					return
				}

				uni.makePhoneCall({
					phoneNumber: this.form.phone,
					success: () => {
						console.log('拨打电话成功')
					},
					fail: (err) => {
						console.log('拨打电话失败', err)
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						})
					}
				})
			},

			goAiHouse() {
				uni.navigateTo({
					url: '/pages/ai-house/index'
				})
			},

			// 下载海报图片
			downloadPosterImage(imageUrl) {
				if (!imageUrl) {
					uni.showToast({
						title: '图片地址无效',
						icon: 'none'
					});
					return;
				}

				// 显示加载提示
				uni.showLoading({
					title: '下载中...',
					mask: true
				});

				// 下载图片
				uni.downloadFile({
					url: imageUrl,
					success: (downloadResult) => {
						if (downloadResult.statusCode === 200) {
							// 保存图片到相册
							uni.saveImageToPhotosAlbum({
								filePath: downloadResult.tempFilePath,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: (saveError) => {
									uni.hideLoading();
									console.error('保存图片失败:', saveError);

									// 如果是权限问题，提示用户
									if (saveError.errMsg && saveError.errMsg.includes('auth')) {
										uni.showModal({
											title: '提示',
											content: '需要相册权限才能保存图片，请在设置中开启相册权限',
											showCancel: false
										});
									} else {
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										});
									}
								}
							});
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '下载失败',
								icon: 'none'
							});
						}
					},
					fail: (downloadError) => {
						uni.hideLoading();
						console.error('下载图片失败:', downloadError);
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				});
			}
		},
		watch: {

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

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

		.search-tools {
			width: 700rpx;
			margin: auto;
			display: flex;
			justify-content: space-around;

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

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

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

		.tabs {
			margin-top: 50rpx;
		}

		.swiper {
			position: relative;

			.house-info {
				width: 660rpx;
				height: 240rpx;
				background-color: #FFFFFF;
				border-radius: 15rpx;
				margin: auto;
				padding: 20rpx;
				position: absolute;
				bottom: -200rpx;
				left: 25rpx;
				z-index: 100;

				.label {
					margin: 10rpx 0;
					display: flex;

					.u-page__tag-item {
						margin-bottom: 10rpx;
						margin-right: 10rpx;
						white-space: nowrap;
					}
				}

				.dict {
					display: flex;
					justify-content: space-between;

					.dict-item {
						display: flex;
						flex-direction: column;
						font-size: 26rpx;

						.title {
							color: #ff0000;
						}

						.desc {
							color: #999999;
						}
					}
				}
			}
		}

		.user-card {
			width: 660rpx;
			background-color: #FFFFFF;
			border-radius: 15rpx;
			margin: auto;
			padding: 20rpx;
			z-index: 100;
		}

		.house-card {
			width: 660rpx;
			min-height: 240rpx;
			background-color: #FFFFFF;
			border-radius: 15rpx;
			margin: auto;
			padding: 20rpx;
			z-index: 100;
			
			.title2 {
				width: 100% !important;
			}

			.title {
				font-size: 36rpx;
				padding-bottom: 10rpx;
			}

			.field-list {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					width: 320rpx;
					font-weight: 350;
					font-size: 28rpx;
					line-height: 1.7rem;
					color: #4b4b4b;
				}

				.col-1 {
					width: 640rpx !important;
				}

				.col-2 {
					width: 320rpx;
				}

				.grid-text {
					font-weight: 350;
					font-size: 28rpx;
					color: #4b4b4b;
				}

				.about {
					color: #4b4b4b;
					font-weight: 350;
					font-size: 28rpx;
				}
			}

		}

		.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;
					}
				}
			}
		}
	}

	.pay-tools {
		position: fixed;
		bottom: 0;
		height: 120rpx;
		width: 750rpx;
		border-top: 1rpx solid #f3f3f3;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.demo-layout {
		color: #ff0000;
	}

	.video-box {
		width: 750rpx;
		height: 500rpx;
		text-align: center;

		.swiper-video {
			width: 100%;
			height: 100%;
			margin: auto;
		}
	}

	.swiper-switch {
		position: absolute;
		display: flex;
		border-radius: 20rpx;
		height: 40rpx;
		width: 200rpx;
		background-color: rgba(0, 0, 0, 0.35);
		left: 30rpx;
		bottom: 100rpx;

		&-item {
			color: #FFFFFF;
			flex: 1;
			text-align: center;
			font-size: 24rpx;
			line-height: 40rpx;
			border-radius: 20rpx;

			&.active {
				background-color: #FFFFFF;
				color: #333333;

			}
		}
	}

	.download-btn {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 40rpx;
		color: #FFFFFF;
		font-size: 20rpx;
	}
  .download-btn2 {
    position: absolute;
    right: 30rpx;
    bottom: 95rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60rpx;
    height: 60rpx;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 40rpx;
    color: #FFFFFF;
    font-size: 20rpx;
  }
</style>
