<template>
	<view class="container">
		<view class="top-box">
			<view class="search-box">
				<u-search v-model="keyword" @change="search" placeholder="请输入客户姓名/手机号" :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" :class="{'selected': searchForm.huxinglabel}" @click="huxingshow=true">{{searchForm.huxingval?searchForm.huxinglabel:'户型'}}
				<view class="sanjiao"></view>
			</view>
			<view class="select-item" :class="{'selected': searchForm.zujinlabel}" @click="zujinshow=true">{{searchForm.zujinval?searchForm.zujinlabel:'租金'}}
				<view class="sanjiao"></view>
			</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">{{item.customerName}}<image v-if="item.customerLevel==1" @click="love(item)" class="love" src="/static/kehu/love.png" mode="" />
						<image v-else @click="love(item)" class="love" src="/static/kehu/notlove.png" mode="" />
						</view> 
						<view class="time">{{item.belongPerson}}于{{item.createTime}}录入</view>
						<view class="diffDay">未跟进时间：{{item.missingDays}}天</view>
					</view>
					<view class="item-right">
						<!-- <image @click="sendCode(item.customerMobile)" style="margin-right: 40rpx;" src="/static/kehu/news.png" mode="" /> -->
						<image @click="tocall(item.customerMobile)" src="/static/kehu/call.png" mode="" />
					</view>
				</view>
				<view class="item-bot">
					<view class="btn" @click="topage('addLedlook',item.customerId)"><image class="icon" src="/static/kehu/edit.png" mode="" />带看录入</view><view class="border"></view>
					<view class="btn" @click="updateStatus(item.customerMobile)"><image class="icon" src="/static/kehu/giveup.png" mode="" />放弃</view><view class="border"></view>
					<view class="btn" @click="topage('ledList',item.customerId)"><image class="icon" src="/static/kehu/record.png" mode="" />带看记录</view>
				</view>
			</view>
			<view class="loading" v-if="loading">
				<u-loading size="40" :show="loading"/>
				正在加载中
			</view>
			<view class="empty-box" v-if="listData.length==0&&!loading">
				<image class="img" src="http://images.2weisou.com/20221031114904TSF6jF4S.png" mode=""/>
				<view class="no-data">暂无数据</view>
			</view>
		</view>
		<!-- 户型弹窗 -->
		<u-popup v-model="huxingshow" mode="top">
			<view class="select-list">
				<view class="item" :class="{'selected':item.code==searchForm.huxingval}" v-for="(item,index) in huxingList" :key="index" @click="secectHuxingval(item,index)">
					{{item.text}}
				</view>
			</view>
		</u-popup>
		<!--租金 弹窗 -->
		<u-popup v-model="zujinshow" mode="top">
			<view class="select-list">
				<view class="item" :class="{'selected':item.code==searchForm.zujinval}" v-for="(item,index) in zujinList" :key="index" @click="secectZujin(item,index)">
					{{item.text}}
				</view>
			</view>
		</u-popup>
		<u-modal v-model="modalShow" content="您确认放弃该条数据吗？" :show-cancel-button="true" confirm-color="#FF6D25" title="确认操作" @confirm="modalConfirm" ref="uModal" :async-close="true"></u-modal>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loading: false,
				modalShow: false,
				keyword: '',
				listData: [],
				searchForm: {
					huxingval: '',
					zujinval: '',
					huxinglabel: '',
					zujinlabel: '',
				},
				huxingList: [
					{
						text: '不限',
						code: ''
					}
				],
				zujinList: [
					{
						text: '不限',
						code: ''
					}
				],
				zujinshow: false,
				huxingshow: false,
				pageNo: 1,
				pageSize: 10,
				loadDone: false,
			};
		},
		onLoad(options) {
		},
		created() {
			
		},
		onShow() {
			this.keyword = ''
			this.loadDone = false;
			this.zujinshow = false
			this.huxingshow = false
			this.pageNo = 1
			this.listData = []
			this.searchForm = {
				huxingval: '',
				zujinval: '',
				huxinglabel: '',
				zujinlabel: '',
			}
			this.getcustomerList()
			this.getbaseData()
		},
		onReachBottom() {
			this.getcustomerList();
		},
		methods: {
			// 关注
			love(item){
				this.$u.api.updateLevel({body:{
					customerMobile: item.customerMobile,
					customerLevel: item.customerLevel==1?0:1
				}}).then((res)=>{
					// console.log(res)
					if(res.ErrNo=='0000'){
						uni.showToast({
							title: res.ErrMsg,
							icon: 'none'
						})
						item.customerLevel = item.customerLevel==1?0:1
					}
				})
			},
			// 获取筛选下拉的数据
			getbaseData(){
				this.$u.api.region({body:{}}).then((res)=>{
					// console.log(res)
					this.zujinList = this.zujinList.concat(res.result.rentMoney)
					this.huxingList = this.huxingList.concat(res.result.houseType)
				})
			},
			modalConfirm(){
				this.$u.api.updateStatus({body:{customerMobile:this.tel}}).then((res)=>{
					console.log(res)
					if(res.ErrNo=='0000'){
						uni.showToast({
							title: res.ErrMsg,
							icon: 'none'
						})
						this.getcustomerList()
					}
					this.modalShow= false
				})
			},
			// 放弃用户
			updateStatus(tel){
				this.modalShow= true
				this.tel = tel
			},
			search(){
				this.pageNo = 1
				this.loadDone = false
				this.listData = []
				this.getcustomerList()
			},
			tocall(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			sendCode(){

			},
			getcustomerList(){
				if (this.loadDone) return;
				this.loading = true;
				let body = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					phone: this.keyword,
					houseType: this.searchForm.huxingval,//房型： 1,开间  2,一居 3,二居 4,三居 5,四居 6,其他
					rentPriceMin: this.searchForm.zujinval?this.searchForm.zujinlabel.split('~')[0]:'',//最小租金
					rentPriceMax: this.searchForm.zujinval?this.searchForm.zujinlabel.split('~')[1]:''
				}
				this.$u.api.customerFind({body:body}).then((res)=>{
					// console.log(res)
					this.loading = false;
					if(res.result&&res.result.length){
						if(this.pageNo==1){
							this.listData = res.result
						}else{
							this.listData = [...this.listData, ...res.result];
						}
						if(res.result.length<this.pageSize){
							this.loadDone = true;
							return ;
						}
						this.pageNo += 1;
						this.loadDone = false
					}else{
						this.loadDone = true;
						if(this.pageNo==1){
							this.listData = []
						}
					}
				})
			},
			secectZujin(item,index){
				if(index==0) {// 不限
					this.searchForm.zujinval = ''
					this.searchForm.zujinlabel  = ''
					this.zujinshow = false
					this.pageNo = 1
					this.listData = []
					this.loadDone = false
					this.getcustomerList()
					return ;
				}
				this.searchForm.zujinval = item.code
				this.searchForm.zujinlabel = item.text
				this.zujinshow = false
				this.pageNo = 1
				this.listData = []
				this.loadDone = false
				this.getcustomerList()
			},
			secectHuxingval(item,index){
				if(index==0) {// 不限
					this.searchForm.huxingval = ''
					this.searchForm.huxinglabel = ''
					this.huxingshow = false
					this.pageNo = 1
					this.loadDone = false
					this.listData = []
					this.getcustomerList()
					return ;
				}
				this.searchForm.huxingval = item.code
				this.searchForm.huxinglabel = item.text
				this.huxingshow = false
				this.pageNo = 1
				this.listData = []
				this.loadDone = false
				this.getcustomerList()
			},
			toaddCustomer(){
				uni.navigateTo({
					url: '/pages/customer/addCustomer'
				})
			},
			topage(page,id){
				uni.navigateTo({
					url: '/pages/customer/'+page+'?customerId='+ id
				})
			}
		},

	};
</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{
			flex:1;
			text-align: center;
			height: 36rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 36rpx;
			letter-spacing: 1px;
			display: flex;
			align-items: center;
			justify-content: center;
			// position: relative;
			&.selected{
				color: #FF6D25;
			}
			.sanjiao{
				margin: 12rpx 0 0 12rpx;
				border-color: #969696;
				width: 0;
				height: 0;
				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>
