<template>
	<view class="container" >
		<view class="cont-box" v-for="(item,index) in listData" :key="index">
			<view class="my-title">
				<image class="cup" src="/static/cup.png" mode="" />
				{{item.personName||''}}</view>
			<view class="top-tabs">
				<view class="tab">
					<view class="number">{{item.deal||0}}</view>
					新增成交/单
				</view>
				<view class="tab">
					<view class="number">{{item.customer||0}}</view>
					新增客户/位
				</view>
				<view class="tab">
					<view class="number">{{item.see||0}}</view>
					新增带看/位
				</view>
				<view class="tab">
					<view class="number">{{item.agent||0}}</view>
					新增代理合同/单
				</view>
				<view class="tab">
					<view class="number">{{item.follow||0}}</view>
					新增客户跟进/位
				</view>
				<view class="tab">
					<view class="number">{{item.visit||0}}</view>
					新增拜访/位
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				listData: [],
				pageNo: 1,
				pageSize: 10,
				loadDone: false,
			};
		},
		onLoad(options) {
			this.type=options.type
			this.deptId=options.deptId
			this.getList()
		},
		onShow() {
		},
		created(){
			
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			getList(){
				if (this.loadDone) return;
				let params = {
					pageNo:this.pageNo,
					pageSize:this.pageSize,
					type:this.type,
					deptId:this.deptId,
				}
				this.$u.api.personReport({body:params}).then((res)=>{
					// console.log(res)
					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 = []
							
						}
					}
				})
			}
		},

	};
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	height: 100vh;
	background: url(http://images.2weisou.com/202210271525442yADGNwV.png) no-repeat #F8F8F8;;
	background-size: 750rpx 334rpx;
	background-repeat: no-repeat;
	padding-top: 150rpx;
	.cont-box{
		width: 690rpx;
		height: 376rpx;
		background: url('https://static.quhouse.com/85043277616540cea74cc69d200bf369.png')no-repeat;
		background-size: contain;
		margin: 0 30rpx 20rpx;
		padding-top: 26rpx;
		.my-title{
			display: flex;
			align-items: center;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #303030;
			line-height: 44rpx;
			margin-bottom: 34rpx;
			padding-left: 30rpx;
			.cup{
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
		}
		.top-tabs{
			width: 690rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			.tab{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 36rpx;
				margin-bottom: 30rpx;
				width: 33.333%;
				.number{
					height: 56rpx;
					font-size: 40rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 56rpx;
					margin-bottom: 6rpx;
				}

			}
		}
	}

}
</style>
