<template>
	<view class="page">
		<!-- 搜索 -->
		<view class="head-search">
			<view class="search">
					<u-search placeholder="请输入" v-model="keyword" @search="sousu" @custom="sousu"></u-search>
			</view>
		</view>
		<view class="screen-list">
			<view class="list" @click="setList(0)">
				<text>区域</text>
				<image  :src="$imgUrl('/down.png')"></image>
			</view>
			<view class="list" @click="setList(1)">
				<text>租金</text>
				<image :src="$imgUrl('/down.png')"></image>
			</view>
			<view class="list" @click="setList(2)">
				<text>默认排序</text>
				<image :src="$imgUrl('/down.png')"></image>
			</view>
			<!-- <view class="list" @click="setList(3)">
				<text>筛选</text>
				<image :src="`${this.$imgs}/down.png`" ></image>
			</view> -->
			<view class="zidong" @click="zidong">
				自动匹配
			</view>
			<u-select v-model="show1" :list="list" @confirm="confirm" mini borderless></u-select>
		</view>
		<!-- 订单列表 -->
		<view class="goods-data">
			<view class="goods-list">
				<view class="list" v-for="(item,index) in tableData" :key="index" @click="reconciliationdetail(item)">
					<view class="thumb">
						<image :src="item.displayMainImage" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="one-omit">{{item.shopName}}</text>
						</view>
						<view class="tag">
							<!-- <text>标签标签</text>
							<text>标签标签</text> -->
						</view>
						<view class="introduce">
							<image  :src="$imgUrl('/kefu.png')"></image>
							<text class="one-omit">{{item.detailedLocation}}</text>
						</view>
						<view class="like-goods">
							<view class="retail-price">
								<text>租金:</text>
								<text class="min">￥</text>
								<text class="max">{{zujinList[index].price}}</text>
								<text class="min">/月</text>
								<text class="line"></text>
								<text>面积:</text>
								<text class="max">{{item.actualUsableArea}}</text>
								<text class="min">/m²</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="zidongS" mode="center" width="90%" border-radius="20" :mask-close-able="false" :closeable="true" close-icon-pos="top-right">
			<view class="zulinY">
				<view style="font-size: 32rpx;font-weight: 600;margin-bottom: 20rpx;">请填写您的租赁意向</view>
					<view class="" style="display: flex;justify-content: space-between;border-bottom:1px solid #F6F9FA;padding: 20rpx 0;">
						<text class="sc" style="color: #979797;font-size: 30rpx;">意向租赁管理</text>
						<view @click="showS(1)">
							<text class="mc" style="margin-right: 10rpx;"> {{formList.zulei ==''?'请选择':formList.zulei}}</text>
							<u-icon name="arrow-down"></u-icon>
						</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;border-bottom:1px solid #F6F9FA;padding: 20rpx 0;">
						<text class="sc" style="color: #979797;font-size: 30rpx;">意向区域</text>
						<view @click="showS(2)">
							<text class="mc" style="margin-right: 10rpx;"> {{formList.quyu ==''?'请选择':formList.quyu}}</text>
							<u-icon name="arrow-down"></u-icon>
						</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;border-bottom:1px solid #F6F9FA;padding: 20rpx 0;">
						<text class="sc" style="color: #979797;font-size: 30rpx;">意向租期</text>
						<view @click="showS(3)">
							<text class="mc" style="margin-right: 10rpx;"> {{formList.zuqi ==''?'请选择':formList.zuqi}}</text>
							<u-icon name="arrow-down"></u-icon>
						</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;border-bottom:1px solid #F6F9FA;padding: 20rpx 0;">
						<text class="sc" style="color: #979797;font-size: 30rpx;">意向租金</text>
						<view @click="showS(4)">
							<text class="mc" style="margin-right: 10rpx;"> {{formList.zujin ==''?'请选择':formList.zujin}}</text>
							<u-icon name="arrow-down"></u-icon>
						</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;border-bottom:1px solid #F6F9FA;padding: 20rpx 0;">
						<text class="sc" style="color: #979797;font-size: 30rpx;">意向面积</text>
						<view @click="showS(5)">
							<text class="mc" style="margin-right: 10rpx;"> {{formList.mianji ==''?'请选择':formList.mianji}}</text>
							<u-icon name="arrow-down"></u-icon>
						</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;border-bottom:1px solid #F6F9FA;padding: 20rpx 0;">
						<view class="sc" style="color: #979797;font-size: 30rpx;line-height: 200%;">租赁人姓名</view>
						<view style="width: 20%">
							<u-input v-model="formList.name" type="text" :border="false" placeholder="请输入" :clearable="false" />
						</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;border-bottom:1px solid #F6F9FA;padding: 20rpx 0;">
						<view class="sc" style="color: #979797;font-size: 30rpx;line-height: 200%;">联系电话</view>
						<view style="width: 20%">
							<u-input v-model="formList.phone" type="text" :border="false" placeholder="请输入" :clearable="false"/>
						</view>
				</view>
				<view class="" style="text-align: center;padding: 16rpx 0;background-color: #00BE4B;color: #fff;border-radius: 20rpx;margin: 20rpx 0;" @click="request">
					确定
				</view>
			</view>
			<u-select v-model="show" :list="companys" @confirm="handleCompanyConfirm" mini borderless></u-select>
			
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				pageindex: {
					pageNumber: 1,
					pageSize: 10,
				},
				zidongS: false,
				formList: {
					zulei: '',
					quyu: '',
					zuqi:'',
					zujin: '',
					mianji:'',
					name:'',
					phone:''
				},
				showSex: false,
				show:false,
				index:1,
				zujinList:[
					{price:'4800'},
					{price:'3400'},
					{price:'3000'}
				],
				companys: [
					{
						value: '1',
						label: '商铺'
					},
					{
						value: '2',
						label: '临铺'
					},
					{
						value: '3',
						label: '广告位'
					}
				],
				show1:false,
				list:[],
				xuanval:0,
				keyword:''
					
			}
		},
		mounted() {
			this.getAll()
		},
		methods: {
			reconciliationdetail(item) {
				let items = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/details/details?item=${items}`
				})
			},
			//查询全数据
			getAll() {

				this.$http.sendRequest('/cereBasicInformationShop/queryByPage', 'POST', this.pageindex, 1).then(res => {
					//成功回调
					this.tableData = res.data.data.content
				}).catch(err => {
					console.log(err)
					//请求失败
				})
			},
			zidong() {
					this.zidongS = true
			},
			showS(val){
			   this.index = val 
			   if(val == 1){
				   this.companys = [
					{
						value: '1',
						label: '商铺'
					},
					{
						value: '2',
						label: '临铺'
					},
					{
						value: '3',
						label: '广告位'
					}
				]
				
			   }else if(val ==2 ){
				   this.companys = [
				   	{
				   		value: '1',
				   		label: '成华'
				   	},
				   	{
				   		value: '2',
				   		label: '锦江'
				   	}
				   ]
			   }else if(val == 3){
				   this.companys = [
				   	{
				   		value: '1',
				   		label: '2024-10-1'
				   	},
				   	{
				   		value: '2',
				   		label: '2024-12-1'
				   	}
				   ]
			   }else if(val == 4){
				   this.companys = [
				   	{
				   		value: '1',
				   		label: '5000'
				   	},
				   	{
				   		value: '2',
				   		label: '10000'
				   	}
				   ]
			   }else{
				   this.companys = [
				   	{
				   		value: '1',
				   		label: '50'
				   	},
				   	{
				   		value: '2',
				   		label: '100'
				   	}
				   ]
			   }
			   this.show = true
			},
		handleCompanyConfirm(e){
			console.log(e)
			if(this.index == 1){
				this.formList.zulei = e[0].label
			}else if(this.index  == 2){
				this.formList.quyu = e[0].label 
			}else if(this.index  == 3){
				this.formList.zuqi = e[0].label
			}else if(this.index  == 4){
				this.formList.zujin = e[0].label
			}else{
				this.formList.mianji = e[0].label
			}
			
		},
		setList(val){
			console.log(val)
			this.xuanval = val
			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.show1 = 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
			})
		},
		sousu(){
			if(this.keyword != ''){
			
			}
		},
		request(){
			console.log(this.formList)
			this.zidongS = false
		}
		}
	}
</script>

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