<template>
	<view>
		<view class="banner-img">
			<!-- <u-image :showLoading="true"
				:src="$img + "
				width="100%" height="100%"></u-image> -->
			<swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500" style="height: 30vh;" indicator-active-color="#fff">
				<swiper-item v-for="(imageUrl, index) in lunbo" :key="index">
					<view style="width: 100%;height: 100%;" v-if="imageUrl.type == 'img'" @click="openimg2(index)">
						<u-image :showLoading="true" :src="imageUrl.url" width="100%" height="100%"></u-image>
					</view>
					<view style="width: 100%;height: 100%;" v-else>
						 <video style="width: 100%;height: 100%;" id="myVideo" :src="imageUrl.url"></video>
					</view>
				</swiper-item>
			</swiper>
			 <!-- <u-swiper :list="lunbo" keyName="url" :autoplay="false" :indicator="false"></u-swiper> -->
		</view>
		<view class="banner">
			<view class="banner-item info">
				<view class="info-title">
					{{tableData.shopName || tableData.venueName}}

				</view>
				<view class="info-text">{{tableData.shopDescription}}</view>
				<view class="info-racord" v-if="moban.length !=0">
					<view class="info-price"><span>{{moban[0].rentalPrice || ''}}</span>元/{{moban[0].leaseTerm || ''}}
					</view>
					<!-- <view class="info-intention">{{tableData.id}}人有意向</view> -->
				</view>
				<view class="" v-if="moban.length !=0" @click="moreZu">
					查看更多租金优惠
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="banner-item field">
				<view class="banner-item-title">场地信息</view>
				<view class="banner-item-form">
					<u-row gutter="10">
						<u-col span="6">
							<view class="form-item">
								<view class="label">场地类型：</view>
								<text>{{tableData.shopName?'商铺':'场地'}}</text>
							</view>
						</u-col>
						<u-col span="6">
							<view class="form-item">
								<view class="label">实际使用面积：</view>
								<text v-if="tableData.actualUsableArea">{{tableData.actualUsableArea}}m²</text>
								<text v-else-if="tableData.actualArea">{{tableData.actualArea}}m²</text>
								<text v-else="tableData.actualUsableArea">暂无</text>
							</view>
						</u-col>
						<u-col span="6">
							<view class="form-item">
								<view class="label">所属区域：</view>
								<text>{{tableData.belongingRegion || tableData.district}}</text>
							</view>
						</u-col>
						<u-col span="12">
							<view class="form-item">
								<view class="label">规划图纸：</view>
							</view>
							<view style="display: flex;flex-wrap: wrap;">
								<u-image @click="openimg1(tableData.architecturalDrawings,index)" :showLoading="true" v-for="(item,index) in tableData.architecturalDrawings"
									v-if="tableData.architecturalDrawings" :src="imgUrl+item" width="100px"
									height="100px" border-radius="20"
									style="margin-bottom:25rpx;margin-left: 25rpx;"></u-image>
								<text v-else>暂无</text>
							</view>
						</u-col>
						<u-col span="12">
							<view class="form-item">
								<view class="label" style="width: 142rpx;">{{tableData.shopName?'位置描述：':'场地描述：'}}</view>

								<view style='flex: 1;'>
									<text v-if="tableData.shopName">{{tableData.detailedLocation}}</text>
									<u-parse :html="tableData.description" v-else></u-parse>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="banner-item position" v-if="tableData.shopName">
				<view class="banner-item-title">位置信息</view>
				<view style="margin-top: 16rpx;">
					<map style="width: 100%; height: 200rpx;">
						<view class="position-info" @click="gomapApp(latitude,longitude)">
							<u-image :showLoading="true" :src="$imgUrl('/location-icon.png')" width="20rpx"
								height="20rpx"></u-image>
							<view>
								<text v-if="tableData.shopName">{{tableData.detailedLocation}}</text>
								<u-parse :html="tableData.description" v-else></u-parse>
							</view>


						</view>
					</map>
				</view>
			</view>
			<!-- <view class="banner-item other-business">
			<view class="banner-item-title">周边商铺</view>
			<view style="margin-top: 16rpx;">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
					<view v-for="(item, index) in 10" :key="index" class="scroll-view-item_H">
						<view class="business-card">
							<u-image :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="210rpx"></u-image>
							<view class="business-card-title">
								这里是标题这里是标题这里是标题这里是标题这里是标题
							</view>
							<view class="business-card-item">租金：￥<span>1067</span>/月</view>
							<view class="business-card-item">面积：<span>81</span>/m2</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view> -->
		</view>
		<!-- 底部 -->
		<view style="height: 100rpx;"></view>
		<view class="page-footer">
			<!-- <view class="footer-service">
				<u-image :showLoading="true" :src="$imgUrl('/sevice-icon.png')"  width="30rpx" height="30rpx"></u-image>
				<text>客服</text>
			</view> -->
			<view class="footer-btn">
				<!-- <u-button type="primary" @click="leaseAdd('/pages/intentionApply/intentionApply')" style="margin-right:10px;height: 35px;">意向申请</u-button> -->
				<u-button type="success" style="width: 100%;border-radius: 10px;"
					@click="leaseAdd('/pages/leaseAdd/leaseAdd')">租赁申请</u-button>
				<!-- <u-button type="success" style="margin-left: unset;" @click="leaseAdd">广告申请</u-button> -->
			</view>
			<!-- <view class="footer-service">
				<u-image :showLoading="true"  :src="$imgUrl('/share-icon.png')"  width="30rpx" height="30rpx"></u-image>
				<text>分享</text>
			</view> -->

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: {},
				swiperList: [{
					id: 0,
					type: 'image',
					url: this.$imgUrl('/img/1.jpg')
				}],
				imgUrl: this.$img,
				latitude: null,
				longitude: null,
				qianzui: '',
				moban: [],
				resourcesId: '',
				lunbo: []
			};
		},
		filters: {
			getimgurl(e) {

				let c1 = e.split(',')
				return c1;

			},
		},
		onLoad(option) {

			let data = JSON.parse(option.item)
			console.log(data)

			if (data.shopName) {
				this.qianzui = 'sp'
			} else {
				this.qianzui = 'cd'
			}
			this.resourcesId = `${this.qianzui}${data.id}`
			let paesize = {
				pageNumber: 0,
				pageSize: 10,
				resourcesId: `${this.qianzui}${data.id}`
			}
			this.$http.sendRequest('/cereResourceStrategy/queryByResources', 'POST', paesize, 1).then(res => {

				this.moban = res.data.data
			}).catch(err => {
				console.log(err)
				//请求失败
			})
			this.swiperList[0].url = data.displayMainImage || data.locationDiagram
			this.tableData = data
			if (typeof data.architecturalDrawings == 'string' && data.architecturalDrawings) {
				this.tableData.architecturalDrawings = data.architecturalDrawings.split(',')
			}
			if (typeof data.planningDrawing == 'string' && data.planningDrawing) {
				this.tableData.architecturalDrawings = data.planningDrawing.split(',')
			}
			// let location
			if (data.mapPunctuation) {
				this.latitude = parseFloat(data.mapPunctuation.split(',')[0])
				this.longitude = parseFloat(data.mapPunctuation.split(',')[1])
			} else if (data.mapMarker) {
				this.latitude = parseFloat(data.mapMarker.split(',')[0])
				this.longitude = parseFloat(data.mapMarker.split(',')[1])
			}
			console.log(this.latitude, this.longitude)
			this.lunbo = []
			let list1 = []
			if(data.otherImageVideos) {
				let c1 = {
					type:'video',
					url:this.imgUrl+data.otherImageVideos
				}
				this.lunbo.push(c1)
			}
			if(data.otherMedia) {
				let c1 = {
					type:'video',
					url:this.imgUrl+data.otherMedia
				}
				this.lunbo.push(c1)
			}
			if (data.displayMainImage) {
				list1 = data.displayMainImage.split(',')
			} else if (data.locationDiagram) {
				list1 = data.locationDiagram.split(',')
			} else if (data.displayImage) {
				list1 = data.displayImage.split(',')
			}
			for (let i = 0; i < list1.length; i++) {
				let c1 = {
					type:'img',
					url:this.imgUrl+list1[i]
				}
				this.lunbo.push(c1)
			}

			console.error(this.lunbo)
			// this.latitude = location.latitude;
			// this.longitude = location.longitude;

		},
		methods: {
			openimg1(urls,index) {
				let list = urls.map(item=>{
					return this.imgUrl + item
				})
				uni.previewImage({
					current:index,
					urls: list,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			openimg2(index) {
				let list =[]
				for (let i = 0; i < this.lunbo.length; i++) {
					if(this.lunbo[i].type == 'img') {
						list.push(this.lunbo[i].url)
					}
				}
				console.error(list)
				uni.previewImage({
					current:this.lunbo[0].type=='img'?index:index-1,
					urls: list,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 打开的点击事件，传经纬度和地点名
			gomapApp(latitude, longitude, ) {
				let url = "";
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					success: function() {
						console.log('success');
					}
				});
			},
			leaseAdd(url) {
				this.$http.sendRequest('/cerePlatformMerchant/queryByPage', 'POST', {
					"pageSize": 10,
					pageNumber: 0,
					phone: uni.getStorageSync('user').phone
				}).then(res => {
					if (res.data.code == '20004' || res.data.code == '20003') {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
					if (res.data.data.content.length > 0) {
						let c1 = res.data.data.content[0]
						if (c1.checkState == '1') {
							uni.showToast({
								icon: 'none',
								title: '商家申请正在审核中',
								duration: 3000
							});
						} else if (c1.checkState == '3') {
							uni.showToast({
								icon: 'none',
								title: '商家申请审核已被拒绝 请重新提交',
								duration: 3000
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pagesA/leaseAdd/leaseAdd'
								})
							}, 3000)
						} else if (c1.checkState == '2') {
							uni.navigateTo({
								url: `${url}?ids=${this.qianzui+this.tableData.id}`
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '请先申请成为商家',
							duration: 3000
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pagesA/leaseAdd/leaseAdd'
							})
						}, 3000)
					}
				})

			},
			moreZu() {
				uni.navigateTo({
					url: `/pagesA/moreZu/moreZu?resourcesId=${this.resourcesId}`
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	@import 'details.scss';
</style>