<template>
	<view class="container">
		<view class="top-box">
			<view class="search-box">
				<u-search v-model="keyword"  :show-action="false" :clearabled="true" bg-color="#F8F8F8" shape="round" height="78"></u-search>
			</view>
			<view class="addCustomer" @click="toaddCustomer">增加客户</view>
		</view>
		<view class="select-box">
			<view class="select-item" @click="huxingshow=true">户型</view>
			<view class="select-item" @click="zujinshow=true">租金</view>
		</view>
		<view class="list-box">
			<view class="list-item" v-for="(item,index) in listData" :key="index">
				<view class="item-top">
					<view class="item-left">
						<view class="person">颂女士<image class="love" src="/static/kehu/love.png" mode="" /></view> 
						<view class="time">刘晓洁于2019-01-17录入</view>
						<view class="diffDay">未跟进时间：1239天</view>
					</view>
					<view class="item-right">
						<image style="margin-right: 40rpx;" src="/static/kehu/news.png" mode="" />
						<image src="/static/kehu/call.png" mode="" />
					</view>
				</view>
				<view class="item-bot">
					<view class="btn"><image class="icon" src="/static/kehu/edit.png" mode="" />带看录入</view><view class="border"></view>
					<view class="btn"><image class="icon" src="/static/kehu/edit.png" mode="" />放弃</view><view class="border"></view>
					<view class="btn"><image class="icon" src="/static/kehu/edit.png" mode="" />带看记录</view>
				</view>
			</view>
		</view>
		<!-- 户型弹窗 -->
		<u-popup v-model="huxingshow" mode="top">
			<view class="select-list">
				<view class="item" :class="{'selected':item.value==searchForm.huxingval}" v-for="(item,index) in huxingList" :key="index" @click="secectHuxingval(item)">
					{{item.label}}
				</view>
			</view>
		</u-popup>
		<!--租金 弹窗 -->
		<u-popup v-model="zujinshow" mode="top">
			<view class="select-list">
				<view class="item" :class="{'selected':item.value==searchForm.zujinval}" v-for="(item,index) in zujinList" :key="index" @click="secectZujin(item)">
					{{item.label}}
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				keyword: '',
				listData: [{},{},{},{},{}],
				searchForm: {
					huxingval: '',
					zujinval: ''
				},
				huxingList: [
					{
						label: '不限',
						value: '2'
					},{
						label: '独卫',
						value: '1'
					}
				],
				zujinList: [
					{
						label: '不限',
						value: '2'
					},{
						label: '独卫',
						value: '1'
					}
				],
				zujinshow: false,
				huxingshow: false,
			};
		},
		onLoad(options) {
		},
		onShow() {
		
		},
		methods: {
			secectZujin(item){
				this.searchForm.zujinval = item.value
			},
			secectHuxingval(item){
				this.searchForm.huxingval = item.value
			},
			confirm1(e) {
			},
			confirm2(e) {
			},
			toaddCustomer(){
				uni.navigateTo({
					url: '/pages/customer/addCustomer'
				})
			}
		},

	};
</script>

<style lang="scss" scoped>
.container{
	width: 750rpx;
	min-height: 100vh;
	background: #F8F8F8;
	.top-box{
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		.search-box{
			width: 532rpx;
			height: 78rpx;
		}
		.addCustomer{
			width: 128rpx;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF6D25;
			line-height: 44rpx;
		}
	}
	.select-box{
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #fff;
		padding: 30rpx 0;
		.select-item{
			height: 36rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 36rpx;
			letter-spacing: 1px;
			position: relative;
			&::after{
				position: absolute;
				content: '';
				top: 16rpx;
    		right: -24rpx;
				border-color: #969696;
				border: 8rpx solid transparent;
      	border-top: 8rpx solid #969696;
			}
		}
	}
	.list-box{
		padding: 0 30rpx 30rpx;
		margin-top: 20rpx;
		.list-item{
			width: 690rpx;
			height: 270rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			.item-top{
				display: flex;
				justify-content: space-between;
				align-items: top;
				.item-left{
					display: flex;
					flex-direction: column;
					.person{
						max-width: 200rpx;
						height: 42rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 42rpx;
						margin-bottom: 15rpx;
						display: flex;
						align-items: center;
						.love{
							width: 34rpx;
							height: 30rpx;
							margin-left: 24rpx;
						}
					}
					.time{
						height: 37rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 37rpx;
						margin-bottom: 15rpx;
					}
					.diffDay{
						height: 37rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF6D25;
						line-height: 37rpx;
					}
				}
				.item-right{
					display: flex;
					image{
						width: 88rpx;
						height: 88rpx;
						
					}
				}
			}
			.item-bot{
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 28rpx;
				.btn{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 36rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 36rpx;
					.icon{
						width: 36rpx;
						height: 36rpx;
						margin-right: 12rpx;
					}
				}
				.border{
					width: 1px;
					height: 30rpx;
					background-color: #e0e0e0
				}
			}
		}
	}
	// 筛选弹框样式
	.select-list{
		padding: 0 40rpx;
		max-height: 600rpx;
		overflow: auto;
		.item{
			height: 90rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			border-bottom: 1px solid #e0e0e0;
			&:last-child{
				border: 0;
			}
			&.selected{
				color: #FF6D25;
			}
		}
	}
}
</style>
