<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">
				<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="">
						<view class="icon">
							<image  :src="$imgUrl('/home4.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="tag">
									<text>标签标签</text>
									<text>标签标签</text>
								</view> -->
								<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">
										<!-- <image :src="`${this.$imgs}/kefu.png`"></image> -->
										<text class="min">{{item.detailedLocation || ''}}</text>
									</view>
								</view>
							</view>
						</view>
					</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: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
			}
		},
		onLoad() {
			uni.hideTabBar();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		mounted() {
			this.getALL()
		},
		methods: {
			getALL(){
				let pagesize = {
					pageNumber: 1,
					pageSize: 2
				}
				this.$http.sendRequest('/cereAnnouncement/queryByPage', 'POST', pagesize,1).then(res => {
					//成功回调
					
				this.procedureData = res.data.data.content.slice(-2)
				})
				
				this.$http.sendRequest('/cereBasicInformationShop/queryByPage', 'POST', this.pageindex,1).then(res => {
					//成功回调
					console.log(res.data.data.content)
					this.tableData = res.data.data.content
				})
				this.$http.sendRequest('/cereCarouselImage/queryByPage', 'POST', this.pageindex,1).then(res => {
					//成功回调
					this.swiperList =res.data.data.content 
				})
				
			setTimeout(bss =>{
				this.$http.sendRequest('/cereAdvertisingInformation/likeGet', 'POST', {pageNumber:1,pageSize:10,advertisingType:"线上广告位"},1).then(res => {
					//成功回调
					let reslist = res.data.data.content
					reslist.forEach(item => {
							this.tableData.push(item)
					})
				
				})
			},500)
			},
			onCouponTab(type) {
				this.OrderType = type;
				if(type == 0){
					this.getALL()
				}
				if (type == 1) {
					this.$http.sendRequest('/cereBasicInformationShop/queryByPage', 'POST', this.pageindex,1).then(res => {
						//成功回调
						this.tableData = res.data.data.content
					}).catch(err => {
						console.log(err)
						//请求失败
					})
				} else if (type == 2) {
					this.tableData = []
				} else if (type == 3) {
					this.pageindex.advertisingType = '线上广告位'
					this.$http.sendRequest('/cereAdvertisingInformation/likeGet', 'POST', this.pageindex,1).then(res => {
						//成功回调
						this.tableData = res.data.data.content
					}).catch(err => {
						console.log(err)
						//请求失败
					})
				} else if (type == 4) {
					this.tableData = []
				} else if (type == 5) {
					this.tableData = []
				}

			},
			shops() {
				uni.navigateTo({
					url: '/pages/shops/shops'
				})
			},
			field() {
				uni.navigateTo({
					url: '/pages/field/field'
				})
			},
			advertisement() {
				uni.navigateTo({
					url: '/pages/advertisement/advertisement'
				})
			},
			gaozhi(item){
				let items = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/procedure/procedure?item=${items}`
				})
			},
			details(item) {
				let items = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/details/details?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
					})
							
			}
		}
	};
</script>

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