<template>
	<view class="page">

		<!-- 幻灯片 -->
		<view class="swiper">
			<u-swiper :list="swiperList" :height="250" :radius="0" @change="e => currentNum = e.current"
				indicatorStyle="right: 20px; bottom: 50px" @click="click">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
				</view>
			</u-swiper>

			<!-- 房源参数 -->
			<view class="house-info">
				<view class="title">
					{{ form.houseTitle || '' }}
					<!-- 五象航洋城三室一厅采光好新房精装修三房一厅 采光好，乘诚意出售 -->
				</view>
				<view class="label">
					<view class="u-page__tag-item" v-for="tag in form.houseLabel">
						<u-tag :text="tag" type="primary" plain size="mini"></u-tag>
					</view>
				</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.roomNumber || '' }}
				</view>
				<view class="item col-2">
					密码：{{ form.password || '' }}
				</view>
				<view class="item col-2">业主电话：{{ form.phone || '' }}</view>
				<view class="item col-2">物业费：{{ form.propertyFees || '' }}</view>
				<view class="item col-2">租期：{{ form.tenancy || '' }}</view>
				<view class="item col-2" v-if="form.gradeName == '公司员工'">
					佣金：{{ form.commission || '' }}
				</view>
				<view class="item col-2" v-if="form.gradeName == '公司员工'">
					是否可溢价：{{ form.premium || '' }}
				</view>
			</view>
		</view>

		<!-- 办公室配套 -->
		<u-gap></u-gap>
		<view class="house-card">
			<view class="title">
				办公室配套
			</view>
			<view class="field-list">
				<u-grid :border="false" col="5" @click="click">
					<u-grid-item v-for="(baseListItem,baseListIndex) in form.supporting" :key="baseListIndex">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon>
						<text class="grid-text">{{baseListItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

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

		<!-- 房源位置 -->
		<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;">{{ form.gradeName }}</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="heart"></u-icon>
				<u-icon name="heart" size="28" v-else></u-icon>
				<text v-if="heart">已收藏</text>
				<text v-else>收藏</text>
			</view>
			<view class="item" @click="$push('sub_pages/checkout/checkout?id=' + form.houseId)">
				<u-button icon="map" type="error" text="预约看房"></u-button>
			</view>
			<view class="item" @click="onCall(form.phone)">
				<u-button icon="phone" type="primary" text="电话咨询"></u-button>
			</view>
		</view>
	</view>
</template>

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

	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 {
		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'
				},
				heart: false,
				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'
				}]
			};

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

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			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) || []
				}).catch(err => {
					app.$error(err.message)
				})
			},
			onHeart() {
				this.heart = !this.heart
			},
			onCall(phone) {
				if (!phone) {
					return false
				}
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		},
		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;

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