<template>
	<view class="page">
		<view style="position: absolute; top: 0; width: 100%;">
			<image  :src="$imgUrl('/bg.png')"   class="top-img" mode="aspectFill"></image>
		</view>
		<view class="head" :style="'background-color: rgba(38,197,112,'+(scrollTop/50)+');'">
			<view class="logo-title">
				<image :src="$imgUrl('/logo.png')" ></image>
			</view>
			<view class="title">
			</view>
			<view class="setting-mess"></view>
		</view>
		<view class="main">
			<view class="banner" style="padding:0 20px;">
				<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true"
					interval="5000" duration="500">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image :src="item.imageUrl" mode="aspectFill"></image>
						<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
					</swiper-item>
				</swiper>
			</view>
			<view class="bg-white">
				<view class="notice-content">
					<view class="notice-left">
						<view>
							<image :src="$imgUrl('/home1.png')"></image>
						</view>
					</view>
					<view class="notice-line"></view>
					<view class="notice-right">
						<view class="notice-right-content" @click="gaozhi(item)" v-for="(item,index) in procedureData">
							<view class="notice-icon">公告</view>
							<view class="notice-text" style="padding-top:4rpx">	{{item.announcementTitle}}</view>
						</view>
					</view>	
				</view>
			</view>

			<view class="bg-white">
				<view class="wallet-info">
					<view class="list" @click="shops">
						<view class="icon">
							<image  :src="$imgUrl('/home2.png')"></image>
						</view>
						<view class="title">
							<text>租商铺</text>
						</view>
					</view>
					<view class="list" @click="field">
						<view class="icon">
							<image :src="$imgUrl('/home3.png')"></image>
						</view>
						<view class="title">
							<text>租场地</text>
						</view>
					</view>
					<view class="list" @click="advertisement">
						<view class="icon">
							<image :src="$imgUrl('/home4.png')"></image>
						</view>
						<view class="title">
							<text>租广告</text>
						</view>
					</view>
					<view class="list" @click="wuye">
						<view class="icon">
							<image  :src="$imgUrl('/home4.png')"></image>
						</view>
						<view class="title">
							<text>物业缴费</text>
						</view>
					</view>
					<view class="list" @click="piaowu">
						<view class="icon">
							<image  :src="$imgUrl('/home5.png')"></image>
						</view>
						<view class="title">
							<text>票务预定</text>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="order-tab">
				<view class="tab" :class="{'action':OrderType==0}" @click="onCouponTab(0)">
					<text>推荐</text>
				</view>
				<view class="tab" :class="{'action':OrderType==1}" @click="onCouponTab(1)">
					<text>商铺</text>
				</view>
				<view class="tab" :class="{'action':OrderType==2}" @click="onCouponTab(2)">
					<text>场地</text>
				</view>
				<view class="tab" :class="{'action':OrderType==3}" @click="onCouponTab(3)">
					<text>广告</text>
				</view>
				<view class="tab" :class="{'action':OrderType==4}" @click="onCouponTab(4)">
					<text>其他</text>
				</view>
			</view> -->

			<!-- 订单列表 -->
			<!-- <view v-if="OrderType===0">
				<view class="screen-list">
					<view class="list" @click="setList(0)">
						<text>{{xuanList[0]}}</text>
						
						<image src="../../static/down.png"></image>
					</view>
					<view class="list" @click="setList(1)">
						<text>{{xuanList[1]}}</text>
						<image src="../../static/down.png"></image>
					</view>
					<view class="list" @click="setList(2)">
						<text>{{xuanList[2]}}</text>
						<image src="../../static/down.png"></image>
					</view>
					<view class="list" @click="setList(3)">
						<text>{{xuanList[3]}}</text>
						<image src="../../static/down.png"></image>
					</view>
					<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
				</view>
				<view class="goods-data">
					<view class="goods-list">
						<view class="list-view" v-for="(item,index) in 8" :key="index" @click="details">
							<view class="thumb">
								<image src="../../static/img/1.jpg" mode="heightFix"></image>
							</view>
							<view class="item">
								<view class="tag">
									<text>标签标签</text>
									<text>标签标签</text>
								</view>
								<view class="title">
									<text class="two-omit">这里有标题这里有标题这里有标题这里有标题</text>
								</view>
								<view class="price">
									<view class="retail-price">
										<text>租金:</text>
										<text class="min">￥</text>
										<text class="max">1067</text>
										<text class="min">/月</text>
										<text class="line"></text>
										<text>面积:</text>
										<text class="max">81</text>
										<text class="min">/m²</text>
									</view>
									<view class="vip-price">
										<image src="../../static/kefu.png"></image>
										<text class="min">这里有地址这里有地址这里有地址这里有地址这里有地址这里有地址</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- <view>
				<view class="screen-list">
					<view class="list" @click="setList(0)">
							<text>{{xuanList[0]}}</text>
							
							<image :src="$imgUrl('/down.png')"></image>
						</view>
						<view class="list" @click="setList(1)">
							<text>{{xuanList[1]}}</text>
							<image :src="$imgUrl('/down.png')"></image>
						</view>
						<view class="list" @click="setList(2)">
							<text>{{xuanList[2]}}</text>
							<image :src="$imgUrl('/down.png')"></image>
						</view>
						<view class="list" @click="setList(3)">
							<text>{{xuanList[3]}}</text>
							<image :src="$imgUrl('/down.png')"></image>
						</view>
						<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
						
					</view>
				<view class="goods-data">
					<view class="goods-list">
						<view class="list-view" v-for="(item,index) in tableData" :key="index" @click="details(item)">
							<view class="thumb">
								<image
									:src=" item.displayMainImage || item.locationDiagram"
									mode="heightFix"></image>
							</view>
							<view class="item">

								<view class="title">
									<text
										class="two-omit">{{ item.shopName || item.advertisingName || ''}}</text>
								</view>
								<view class="price">
									<view class="retail-price">
										<text>租金:</text>
										<text class="min">￥</text>
										<text class="max">{{zujin[index].price}}</text>
										<text class="min">/月</text>
										<text class="line"></text>
										<text>面积:</text>
										<text class="max">{{item.actualUsableArea?item.actualUsableArea:'55.4'}}</text>
										<text class="min">/m²</text>
									</view>
									<view class="vip-price" v-if="item.detailedLocation">
										
										<text class="min">{{item.detailedLocation || ''}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="cardHome">
				<view class="card_home">
					<view class="card_title">热点租赁信息</view>
					<!-- <view class="card_more">查看更多 ></view> -->
				</view>
				<view style="width:50%" >
					<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#3F9B6A"  @change="tabsChange" :current="current"></u-tabs-swiper>
					
				</view>
				<view style="width:100%;margin-top:10px;" class="other-business">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120" >
						<view v-for="(item, index) in tableData" :key="index" class="scroll-view-item_H" @click="details(item)">
							<view class="business-card">
								<u-image :showLoading="true" :src="item.cereBasicInformationShop.displayMainImage || item.cereAdvertisingInformation.locationDiagram || item.cereBasicInformationVenue.displayImage" width="100%" height="210rpx"></u-image>
								<view class="business-card-title">
									{{ item.cereBasicInformationShop.shopName || item.cereAdvertisingInformation.advertisingName || item.cereBasicInformationVenue.venueName}}
								</view>
								<view class="business-card-item">租金：￥<span>{{item.cereReleasePoliciesVO[0].rentalPrice}}</span>/{{item.cereReleasePoliciesVO[0].leaseTerm}}</view>
								<view class="business-card-item">面积：<span>{{item.cereBasicInformationShop.actualUsableArea?item.cereBasicInformationShop.actualUsableArea:'55.4'}}</span>/m2</view>
								<view class="introduce" v-if='item.cereBasicInformationShop.detailedLocation ||item.cereBasicInformationVenue.detailedLocation'>
									<image  :src="$imgUrl('/kefu.png')"></image>
									<text class="one-omit">{{item.cereBasicInformationShop.detailedLocation ||item.cereBasicInformationVenue.detailedLocation}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<view class="cardHome">
				<view class="card_home">
					<view class="card_title">商家活动信息</view>
					<!-- <view class="card_more">查看更多 ></view> -->
				</view>
				<view style="width:100%;margin-top:10px;" class="other-business">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120" >
						<view v-for="(item, index) in activity" :key="index" class="scroll-view-item_H" @click="toDetail(item.id, '/pages/activityDetail/activityDetail')" >
							<view class="business-card">
								<u-image :showLoading="true" :src="item.coverImage" width="100%" height="210rpx"></u-image>
								<view class="business-card-title">
									{{item.activityName || '默认'}}
								</view>
								<view class="huo-card-item">创建时间：<span>{{item.startTime}}</span></view>
								<view class="huo-card-item">参与人数：<span>{{item.maxParticipants}}</span></view>
								
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<view class="cardHome">
				<view class="card_home">
					<view class="card_title">营销推广活动</view>
					<view class="card_more" @click="goDetail('/pages/marketing/marketingList/marketingList')">查看更多  ></view>
				</view>
				<view style="width:100%;margin-top:10px;" class="other-business">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120" >
						<view v-for="(item, index) in yingxiaoData" :key="item.id" class="scroll-view-item_H" @click="toDetail(item.id, '/pages/marketing/marketingDetail/marketingDetail')">
							<view class="business-card">
								<u-image :showLoading="true" :src="item.coverImage" width="100%" height="210rpx"></u-image>
								<view class="business-card-title">
									{{item.title}}
								</view>
								<view class="huo-card-item">活动日期：<span>{{item.startTime}}至{{item.endTime}}</span></view>
								<view class="huo-card-item">举办方：<span></span></view>
								
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<view class="cardHome">
				<view class="card_home">
					<view class="card_title">商务合作</view>
					<view class="card_more" @click="goDetail('/pages/business/businessList/businessList')">查看更多 ></view>
				</view>
				<view style="width:100%;margin-top:10px;" class="other-business">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120" >
						<view v-for="(item, index) in shangwuData" :key="item.id" class="scroll-view-item_H" @click="toDetailTwo(item, '/pages/business/businessDetail/businessDetail')">
							<view class="business-card">
								<u-image :showLoading="true" :src="item.coverImage" width="100%" height="210rpx"></u-image>
								<view class="business-card-title">
									{{item.title}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		
		<!-- tabbar -->
		<tabbar :tabBarShow="0"></tabbar>
	</view>
</template>

<script>
	import tabbar from '../../components/tabbar/tabbar.vue';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				scrollTop: 0,
				OrderType: 0,
				tableData: [],
				procedureData:[],//公告
				pageindex: {
				pageNumber: 1,
				pageSize: 10,
				},
				swiperList: [],//轮播
				zujin:[
					{price:'4800'},
					{price:'3400'},
					{price:'3000'}
				],
				biaoqian:[
					// {name:'4800'},
					// {price:'3400'},
					// {price:'3000'}
				],
				show: false,
				xuanval:0,
				xuanList:['区域','租金','默认排序','筛选'],
				list: [{
						name: '商铺'
					},
					{
						name: '场地'
					},
					{
						name: '广告位'
					}
				],
				current:0,
				yingxiaoData:[],
				shangwuData:[],
				activity:[]
			}
		},
		onLoad() {
			uni.hideTabBar();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		mounted() {
			this.getALL()
			this.onCouponTab(0)
		},
		methods: {
			getALL(){
				let pagesize = {
					pageNumber: 1,
					pageSize: 10
				}
				let  actPages = {
					pageNumber: 1,
					pageSize: 10,
					reviewStatus:'2'
				}
				let shopAct = {
					auditStatus:'3',
					pageNumber: 1,
					pageSize: 10,
				}
				let shanghu = {
					status:'1',
					pageNumber: 1,
					pageSize: 10,
				}
		this.$http.sendRequest('/cereAnnouncement/queryByPage', 'POST', pagesize,1).then(res => {
			//成功回调
			
		this.procedureData = res.data.data.content.slice(-2)
		})
		this.$http.sendRequest('/cereCarouselImage/queryByPage', 'POST', this.pageindex,1).then(res => {
			//成功回调
			this.swiperList =res.data.data.content 
		})
		this.$http.sendRequest('/cereMarketingActivity/queryByPage', 'POST',actPages,1).then(res => {
			this.yingxiaoData =res.data.data.content 
		})
		this.$http.sendRequest('/cereBusinessCooperation/queryByPage', 'POST', shanghu,1).then(res => {
			this.shangwuData =res.data.data.content 
		})
		this.$http.sendRequest('/cereActivityApplication/queryByPage', 'POST',shopAct,1).then(res => {
		   this.activity = res.data.data.content
		})
			},
			onCouponTab(type) {
				let pagesize = {
					pageNumber: 1,
					pageSize: 10,
					resourceType:'',
					dataForm:'2'
				}
				this.current = type
				if (type == 0) {
					pagesize.resourceType = '商铺'
					this.$http.sendRequest('/cereReleaseInvestmentResources/queryByPage', 'POST', pagesize,1).then(res => {
						//成功回调
						
						this.tableData = res.data.data.content
						
					}).catch(err => {
						console.log(err)
						//请求失败
					})
				} else if (type == 1) {
					pagesize.resourceType = '场地'
					this.$http.sendRequest('/cereReleaseInvestmentResources/queryByPage', 'POST', pagesize,1).then(res => {
						//成功回调
						this.tableData = res.data.data.content

					}).catch(err => {
						console.log(err)
						//请求失败
					})
					
				} else if (type == 2) {
					pagesize.resourceType = '广告位'
					// pagesize.advertisingType = '线上广告位'
					this.$http.sendRequest('/cereReleaseInvestmentResources/queryByPage', 'POST', pagesize,1).then(res => {
						//成功回调
						this.tableData = res.data.data.content
					}).catch(err => {
						console.log(err)
						//请求失败
					})
				}

			},
			shops() {
				uni.navigateTo({
					url: '/pages/shops/shops'
				})
			},
			field() {
				uni.navigateTo({
					url: '/pages/field/field'
				})
			},
			toDetail(item, path) {
				uni.navigateTo({
					url: `${path}?item=${item}`
				})
				
			},
			toDetailTwo(item, path){
			let items = JSON.stringify(item)
			uni.navigateTo({
				url: `${path}?item=${items}`
			})
			},
			goDetail(path) {
				uni.navigateTo({
					url: `${path}`
				})
			},
			advertisement() {
				uni.navigateTo({
					url: '/pages/advertisement/advertisement'
				})
			},
			gaozhi(item){
				// let items = JSON.stringify(item)
				// uni.navigateTo({
				// 	url: `/pages/procedureDetail/procedureDetail?item=${items}`
				// })
				let items = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/procedure/procedure?item=${items}`
				})
				
			},
		details(item) {
			let items = ''
			let celue = ''
			 if(this.current == 0){
				 items = JSON.stringify(item.cereBasicInformationShop)
				 celue =  JSON.stringify(item.cereReleasePoliciesVO)
				 uni.navigateTo({
				 	url: `/pages/details/details?item=${items}&celue=${celue}`
				 })
			 }else if(this.current == 1){
				 items = JSON.stringify(item.cereBasicInformationVenue)
				 uni.navigateTo({
				 	url: `/pages/details/details?item=${items}&celue=${celue}`
				 })
			 }else{
				 items = JSON.stringify(item.cereAdvertisingInformation)
				 celue =  JSON.stringify(item.cereReleasePoliciesVO)
				 uni.navigateTo({
				 	url: `/pages/advertisementDetail/advertisementDetail?item=${items}&celue=${celue}`
				 })
			 }
						
						// if(this.current == 0 || this.current == 1){
						// 	uni.navigateTo({
						// 		url: `/pages/details/details?item=${items}`
						// 	})
						// }else{
						// 	uni.navigateTo({
						// 		url: `/pages/advertisementDetail/advertisementDetail?item=${items}`
						// 	})
						// }
						
					},
			setList(val){
				
				this.xuanval = val
				console.log(this.tableData)
				if(val == 0){
				const filteredTableData = this.tableData.filter(item => item.hasOwnProperty('belongingRegion'));
				
				// 提取 belongingRegion 字段并进行去重
			const labeledBelongingRegions = filteredTableData.map(item => ({
			  label: item.belongingRegion
			}));

				const uniqueBelongingRegions = [...new Set(labeledBelongingRegions)];
					console.log(uniqueBelongingRegions)
					this.list  = uniqueBelongingRegions
				}else if(val == 1){
					this.list = []
				}else if(val == 2){
					this.list = []
				}
				this.show = true
			},
			confirm(val) {
					let page = {
						pageNumber: 1,
						pageSize: 10,
						belongingRegion:val[0].label
					}
					this.$http.sendRequest('/cereBasicInformationShop/queryByPage', 'POST', page, 1).then(res => {
						//成功回调
						this.tableData = res.data.data.content
					})
							
			},
			tabsChange(itme){
				console.log(itme)
				this.onCouponTab(itme)
			},
			wuye(){
				uni.navigateTo({
					url: `/pages/propertyPay/propertyPayList/propertyPayList`
				})
				
			},
			piaowu(){
				uni.navigateTo({
					url: `/pages/ticketBooking/ticketBooking`
				})
			}
		}
	};
</script>

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