<template>
	<view class="container">
		<view class="top-box">
			<view class="search-box">
				<u-search v-model="keyword" @change="searchFun" placeholder="请输入电话号码" :show-action="false" :clearabled="true" bg-color="#F8F8F8" shape="round" height="78"></u-search>
			</view>
		</view>
		<view class="list-box">
			<view class="list-item" v-for="(item,index) in listData" :key="index">
				<image  @click="topage(item)" class="house-img" :src="item.pic" mode="" />
				<view class="item-info">
					<view class="house-name u-line-1">{{item.address}}</view>
					<view class="type">
            <view class="label" @click="visit(item)">拜访</view>
            <view class="label" @click="topfunction(item)">{{item.isTop==0?'置顶':'取消置顶'}}</view>
            <view class="label" @click="historyList(item)">历史记录</view>
          </view>
					<view class="area">{{item.belongDistrict}}-{{item.area}}㎡</view>
					<view class="bot-wrap">
						<view class="left u-line-1"><image class="person-icon" src="/static/person.png" mode="" />{{item.personName}}</view>
						<view class="money">{{item.rentPrice}}/月</view>
					</view>
				</view>
			</view>
		</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 class="loading" v-if="loading">
				<u-loading size="40" :show="loading"/>
				正在加载中
			</view>
    <u-modal v-model="showModal" :show-cancel-button="true" confirm-color="#FF6D25" @confirm="confirmFun" title="确认操作" :content="'您确认'+(isTop==0?'置顶吗?':'取消置顶吗?')"></u-modal>
	</view>
</template>
<script>
	export default {
		data() {
			return {
        loading: false,
        showModal: false,
				keyword: '',
				searchForm: {
					addressQuval: '',
					buildTypeval: '',
					priceval: '',
					priceLabel: '',
					houseTypeval: '',
					addressIndex: '',
					addressCityval: ''
				},
				listData: [],
				pageNo: 1,
				pageSize: 10,
				loadDone: false,
				isTop: 0
			};
		},
		onLoad(options) {
		},
		onShow() {
			this.loadDone = false;
			this.pageNo = 1
			this.getList()
		},
		created(){
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			topfunction(item){
				this.currentId = item.mediacyId
				this.isTop = item.isTop
       this.showModal = true
			},
			// 置顶接口
      confirmFun(){
				if(this.isTop ==1){
					this.$u.api.cancelStickyPost({body:{mediacyId:this.currentId}}).then((res)=>{
						console.log(res)
						if(res.ErrNo=='0000'){
							this.loadDone = false
							this.pageNo = 1
							this.getList();
							uni.showToast({
								title: res.ErrMsg,
								icon: 'none'
							})
						}
					})
				}else{
					this.$u.api.stickyPost({body:{mediacyId:this.currentId}}).then((res)=>{
						// console.log(res)
						if(res.ErrNo=='0000'){
							this.loadDone = false
							this.pageNo = 1
							uni.showToast({
								title: res.ErrMsg,
								icon: 'none'
							})
							this.getList();
						}
					})
				}
      },
      historyList(item){
        uni.navigateTo({
					url: '/pages/otherPage/historyList?mediacyId='+ item.mediacyId
				})
      },
      visit(item){
        uni.navigateTo({
					url: '/pages/otherPage/jjrentVisit?masterHouseId='+ item.masterHouseId+'&mediacyId='+ item.mediacyId+'&address='+item.address+'&personName='+item.personName
				})
      },
			topage(item){
				uni.setStorageSync('roomInfo',item)
				uni.navigateTo({
					url: '/pages/otherPage/jjrentDetail?id=' + item.roomId
				})
			},
			searchFun(){
				this.loadDone = false
				this.pageNo = 1
				this.getList()
			},
			getList(){
				if (this.loadDone) return;
				this.loading = true;
				let params = {
					pageNo:this.pageNo,
					pageSize:this.pageSize,
					ownerMobile:this.keyword,
				}
				this.$u.api.intermediary({body:params}).then((res)=>{
					// console.log(res)
					this.loading = false
					if(res.result&&res.result.length){
						res.result.forEach(item=>{
							if(item.pictrues&&item.pictrues.length){
								let obj = item.pictrues[item.pictrues.length-1]
								item.pic = obj.pictureUrl
							}
						})
						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 = []
						}
					}
				})
			}
    }
	};
</script>

<style lang="scss" scoped>
.container{
	width: 750rpx;
	min-height: 100vh;
	.top-box{
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		.search-box{
			width: 690rpx;
			height: 78rpx;
		}
	}
	
	.list-box{
		padding: 30rpx;
		.list-item{
			width: 690rpx;
			height: 202rpx;
			margin-bottom: 30rpx;
			display: flex;
			.house-img{
				width: 248rpx;
				height: 202rpx;
				border-radius: 8rpx;
				margin-right: 24rpx;
				flex: 0 0 248rpx;
			}
			.item-info{
				flex: 1;
				.house-name{
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 44rpx;
					margin-bottom: 12rpx;
					max-width: 410rpx;
				}
				.area{
					height: 36rpx;
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 36rpx;
					margin-bottom: 12rpx;
				}
        .type{
          display: flex;
          justify-content: space-between;
          margin-bottom: 12rpx;
          .label{
						width: 130rpx;
            text-align: center;
            height: 44rpx;
            line-height: 44rpx;
            background: #FFFFFF;
            border-radius: 8rpx;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FF6D25;
            border: 1rpx solid #FF6D25;
          }
        }
				.bot-wrap{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						display: flex;
						align-items: center;
						.person-icon{
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							margin-right: 12rpx;
						}
					}
					.money{
					height: 48rpx;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF6D25;
					line-height: 48rpx;
					}
				}
				
			}

		}
	}
}
</style>
