<template>
	<view class="info" v-if="info">
		<u-navbar :title="info.pagodaName" title-width="400" :title-bold="true"></u-navbar>
		<view class="imgs">
			<!-- 轮播图 -->
			<view class="swiper">
				<u-swiper :list="info.pagodaImgs" height="360 " @click="showImgs" border-radius="0">
				</u-swiper>
			</view>

			<!-- 	<u-image width="750rpx" height="480rpx" :src="src" @click="showImgs"></u-image> -->
			<view class="adjunct" v-if="info.pagodaImgs && info.pagodaImgs.length > 0" @click="showImgs(0)">
				周边环境
				({{info.pagodaImgs.length}})
			</view>
		</view>


		<view class="container">
			<!-- 简介 -->
			<view class="introduce">
				<view class="title">
					{{info.pagodaName}}
				</view>
				<view class="content">
					{{info.cemeteryIntroduce  }}
				</view>
				<view class="location">
					<view class="icon">

					</view>
					<view class="text" @click="toMap">
						{{info.address}}
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 基本信息 -->
			<view class="message">
				<view class="title">
					基本信息
				</view>
				<view class="item">
					<text class="text">面积：</text> {{info.pagodaArea}}m(使用面积)
				</view>
				<view class="item">
					<text class="text">朝向：</text>{{info.towards}}
				</view>
				<view class="item">
					<text class="text">户型：</text>{{info.graveNum}}
				</view>
				<view class="item">
					<text class="text">楼层：</text>{{info.floor}}
				</view>
				<view class="item">
					<text class="text">年代：</text>{{info.years}}建成
				</view>
				<view class="item">
					<text class="text">公司：</text>{{info.developersName}}
				</view>
			</view>

			<!-- 租约信息 -->
			<view class="leaseInfo" v-if="info.leaseInfo">
				<view class="title">
					租约信息
				</view>
				<view class="item">
					<text class="text">可使用期限：</text> {{info.leaseInfo.employType}}
				</view>
				<view class="item">
					<text class="text">签约时间：</text>{{info.leaseInfo.contractDate}}
				</view>
				<view class="item">
					<text class="text">注意事项：</text>{{info.leaseInfo.attention}}
				</view>
			</view>

			<!-- 神塔简介 -->
			<view class="cemeteryInfo">
				<view class="title">
					神塔简介
				</view>
				<view class="text">
					{{info.cemeteryContent}}
				</view>
			</view>

			<!-- 神塔产权信息 -->
			<view class="property">
				<view class="title">
					神塔产权2信息
				</view>
				<u-image width="750rpx" height="480rpx" :src="info.titleCertificatePath" mode="scaleToFill"></u-image>
			</view>

			<!-- 神塔墓穴 -->
			<view class="annunciate" id="map" v-if="info.annunciate">
				<view class="title">
					神塔墓穴
				</view>
				<view class="left">
					<view class="head">
						<u-image width="48rpx" height="48rpx" :src="info.annunciate.head" mode="scaleToFill"></u-image>
					</view>
					<view class="name">
						{{info.annunciate.name}}
					</view>
					<view class="message">
						{{info.annunciate.message}}
					</view>
				</view>

				<view class="right">
					刚刚预约 <u-icon name="arrow-right" color="#909399" size="28"
						style="margin-left: 8rpx;transform: translateY( 3rpx);"></u-icon>
				</view>
			</view>

			<!-- 陵园介绍 -->
			<view class="cemeteryInfo">
				<view class="title">
					陵园介绍
				</view>
				<cemeteryCart width="280rpx" height="210rpx" :info="info" />
			</view>

			<!-- 周边及交通 -->
			<view class="ambitus">
				<view class="title">
					<view class="text">
						周边及交通
					</view>
					<view class="right" @click="toMap">
						周边详情 <u-icon name="arrow-right" color="#909399" size="28"
							style="margin-left: 8rpx;transform: translateY( 3rpx);"></u-icon>
					</view>
				</view>
				<map style="width:100%;height:300rpx;" :latitude="+info.cemeteryLatitude"
					:longitude="+info.cemeteryLongitude" :markers="covers" @tap="toMap">
				</map>
			<!-- 	
				<map style="width:100%;height:300rpx;" :latitude="latitude"
					:longitude="longitude" :markers="covers" @tap="toMap">
				</map> -->
				<view class="hint">
					数据来自百度地图，仅供参考
				</view>
			</view>
		</view>

		<!-- 其他推荐 -->
		<view class="recommend">
			<view class="title">
				其他推荐
			</view>
			<scroll-view class="list" scroll-x="true" scroll-left="0">
				<Cart width="328rpx" height="246rpx" :info="item" class="u-p-r-20" v-for="(item,index) in rentingList"
					@click.native="toInfo(item,'renting')" @toLink="toLinkInfo(item)"  :class="{'u-p-l-20': index === 0 }" />
				<Cart width="328rpx" height="246rpx" :info="item" class="u-p-r-20" v-for="(item,index) in resellingList"
					:class="{'u-p-l-20': index === 0 }" @toLink="toLinkInfo(item)" @click.native="toInfo(item,'renting')" />
			</scroll-view>
		</view>

		<!-- 提示 -->
		<view class="warning">
			<text class="text">自如承诺真实资源，如有疑议，请点击</text> <text class="link">资源纠纷</text>
		</view>

		<!-- 空 -->
		<view style="height: 2rpx;">
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<view class="heart" @click="addCollect">
				<u-icon name="heart" size="36" style="margin-right: 12rpx; transform: translateY(4rpx);"></u-icon>收藏
			</view>
			<view class="link btn" @click="toLinkInfo">
				链上查看
			</view>

			<view class="subscribe btn" @click="toSubscribe">
				预约了解
			</view>
		</view>
	</view>
</template>

<script>
	import Cart from '../../../components/cart.vue'
	import cemeteryCart from './components/listItem'
	import Map from '../../../components/ms-openMap/openMap.js'
	export default {
		data() {
			return {
				info: null,
				type: '', // 购买 | 出租
				queryData: {
					pageNum: 1,
					pageSize: 10,
					pagodaName: '', // 模糊查询
					pagodaStatus: '', // 神塔状态reselling售卖中，renting出租中
					isRecommend: true,
				},
				total: 0,
				latitude: 22.671563,
				longitude:113.881745,
				covers: [{
					id: 1,
					width: 42,
					height: 47,
					rotate: 0,
					latitude: 22.671563,
					longitude: 113.881745,
					iconPath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1661148976,2067231542&fm=26&gp=0.jpg',
				}],

				// 租赁列表
				rentingList: [],
				// 出售列表
				resellingList: [],
			}
		},
		methods: {
			infoDatawww() {
				console.log('000000')
				uni.$emit('infoData', {
					isCollection: true
				})
			},
			toInfo(info, type) {
				uni.navigateTo({
					url: 'cemeteryInfo?id=' + info.pagodaId + '&type=' + type
				})
			},

			// 其他推荐
			async getRecommendList(type) {
				// 出租响应
				console.log(type , 99)
				if (type === 'renting') {
					this.queryData.pagodaStatus = type
					let res = await this.$u.api.pagoda.getPagodaList(this.queryData)
					this.rentingList = res.data.rows
					console.log(res, 8880099)
				} else {
					// 出售响应 
					this.queryData.pagodaStatus = type
					let res = await this.$u.api.pagoda.getPagodaList(this.queryData)
					this.resellingList = res.data.rows
					console.log(res, 8880099)
				}

			},
			async addCollect() {
				let res = await this.$u.api.pagoda.addBrowseService({
					pagodaId: this.info.pagodaId,
					browseType: 'collection'
				})
				this.$u.toast('添加成功');
			},
			async getPagodaInfo(id) {
				let res = await this.$u.api.pagoda.getPagodaDetails({
					pagodaId: id
				})
				this.info = res.data
				this.covers[0].latitude = this.info.cemeteryLatitude
				this.covers[0].longitude = this.info.cemeteryLongitude
				console.log(this.info, 99622)

				// #ifdef APP-PLUS
				setTimeout(() => {
					uni.$emit('infoData', {
						isCollection: this.info.isCollection
					})
				}, 300)
				// #endif

				// 添加预览
				let res2 = await this.$u.api.pagoda.addBrowseService({
					pagodaId: this.info.pagodaId,
					browseType: 'browse'
				})
			},
			toMap() {
				
				Map.openMap(+this.info.cemeteryLatitude, +this.info.cemeteryLongitude, this.info.cemeteryName )
			},
			// 创建原生控件  弃用
			createBtn() {
				// const mapNvue = uni.getSubNVueById('map');
				// // 获取节点
				// const query = uni.createSelectorQuery().in(this);
				// query.select('#map').boundingClientRect(data => {
				// 	console.log("得到布局位置信息" + JSON.stringify(data));
				// 	console.log("节点离页面顶部的距离为" + data.bottom);
				// 	mapNvue.setStyle({
				// 		"top": data.top + 30 + 'px'
				// 	})
				// }).exec();
			},

			showImgs(index) {
				console.log(index, 99)
				uni.previewImage({
					current: index,
					urls: this.info.imgList,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			toSubscribe() {
				// 数据缓存
				this.$u.vuex('vuex_cemeteryData', this.info)
				uni.navigateTo({
					url: '../subscribe/subscribe'
				})
			},
			toLinkInfo() {
				console.log('0000000009999999999999999999999999999999')
				uni.navigateTo({
					url: '../linkInfo/linkInfo'
				})
			},
			async cancelCollect() {
				console.log('---------')
				let res = await this.$u.api.pagoda.delBrowseService({
					pagodaId: this.info.pagodaId
				})
				this.$u.toast('已经取消');
			}
		},
		onLoad(data) {
			console.log(data)
			if (data?.id) {
				this.getPagodaInfo(data.id)
			}

			if (data?.type) {
				this.type = data.type
				// 其他推荐
				this.getRecommendList(this.type)
			}else {
				this.getRecommendList()
			}

			// 按钮事件侦听
			// #ifdef APP-PLUS
			// 链上查看
			uni.$on('toLinkInfo', () => {
				this.toLinkInfo()
			})
			// 预约
			uni.$on('toSubscribe', () => {
				this.toSubscribe()
			})
			// 收藏
			uni.$on('addCollect', () => {
				this.addCollect()
			})
			// 取消收藏
			uni.$on('cancelCollect', () => {
				this.cancelCollect()
			})
			// #endif

		},
		onUnload(){
			uni.$off(['addCollect','toLinkInfo','toSubscribe','cancelCollect'])
		},
		components: {
			Cart,
			cemeteryCart
		},
		mounted() {

		},
		watch: {
		
		}

	}
</script>

<style lang="scss" scoped>
	// 顶部图片
	.imgs {
		position: relative;

		.adjunct {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
			width: 160rpx;
			height: 50rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 8rpx;
			background-color: rgba($color: #000000, $alpha: 0.4);
		}
	}

	// 容器
	.container {
		padding: 0 36rpx;

		// 介绍
		.introduce {
			padding: 36rpx 0;
			border-bottom: 2rpx solid #F7F9FCFF;

			.title {
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 24rpx;
			}

			.content {
				color: #606060;
			}

			.location {
				margin-top: 38rpx;
				color: #909399;
				display: flex;
				width: 100%;

				.icon {
					width: 24rpx;
					height: 24rpx;
					background-image: url(../../../static/pos.png);
					background-size: 100% 100%;
					transform: translateY(8rpx);
					margin-right: 10rpx;
				}

				.text {
					overflow: hidden;
					/*文本超出隐藏*/
					text-overflow: ellipsis;
					/*文本超出显示省略号*/
					white-space: nowrap;
					/*超出的空白区域不换行*/
					flex: 1;
				}
			}
		}

		// 基本信息
		.message,
		.leaseInfo,
		.cemeteryInfo,
		.property,
		.annunciate,
		.ambitus,
		.recommend {
			display: flex;
			flex-wrap: wrap;
			padding: 48rpx 0;
			border-bottom: 2rpx solid #F7F9FCFF;

			.title {
				width: 100%;
				margin-bottom: 24rpx;
				font-size: 32rpx;
				color: #303133;
				font-weight: 600;
			}

			.item {
				min-width: 50%;
				margin-bottom: 8rpx;

				.text {
					color: #999ca2;
				}
			}
		}

		// 覆盖	



		.leaseInfo {
			.item {
				width: 100%;
			}
		}

		.cemeteryInfo {
			.text {
				color: #606060;
				line-height: 42rpx;
				font-size: 28rpx;
			}
		}

		.annunciate {
			.left {
				float: left;
				display: flex;
				align-items: center;
				width: 75%;
				font-size: 28rpx;
				flex: 1;

				.name {
					color: #5173B9;
					margin: 0 12rpx;
				}

				.message {
					padding: 0;
				}
			}

			.right {
				float: right;
				display: flex;
				align-items: center;
				color: #909399;
				line-height: 20rpx;
			}
		}

		.property,
		.ambitus {
			.title {
				display: flex;

				.text {
					flex: 1;
				}

				.right {
					color: #909399;
					font-size: 24rpx;
					font-weight: normal;
				}
			}
		}

		.ambitus {
			.hint {
				margin-top: 24rpx;
				color: #909399;
				font-size: 24rpx;
			}
		}

	}

	.recommend {
		display: flex;
		flex-wrap: wrap;
		padding: 48rpx 0;
		border-bottom: 2rpx solid #F7F9FCFF;

		.title {
			padding: 0 36rpx;
			width: 100%;
			margin-bottom: 24rpx;
			font-size: 32rpx;
			color: #303133;
			font-weight: 600;
		}

		/deep/ .uni-scroll-view-content {
			display: flex;
		}
	}

	.warning {
		padding: 72rpx 36rpx;
		border-bottom: 2rpx solid #F7F9FCFF;
		margin-bottom: 130rpx;

		.text {
			color: #909399;
		}

		.link {
			color: #5173b9;
			margin-left: 5rpx;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 128rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 36rpx;
		z-index: 999;

		.heart {
			flex: 1;
		}

		.btn {
			width: 208rpx;
			height: 80rpx;
			background-color: #e67d29;
			border-radius: 12rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			flex: 1;
		}

		.link {
			margin-right: 24rpx;
			background-color: #5173b9;
		}
	}
</style>
