<template>
	<view class="content">
		<view class="c-top">
			<view class="" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="c-title" v-if="id == 1">客户来源统计</view>
				<view class="c-title" v-if="id == 2">检测车型统计</view>
					<view class="c-title" v-if="id == 3">代收款</view>
			<view class=""></view>
		</view>
		<view class="ail">
			<view class="ahhh">
					<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
			</view>
			
			<!-- ↓ 新增 -->
			
			
			<!-- <view class="ping-bottom">
				<view class="dinga">客户来源统计</view>
				<view class="dinga">更多<uni-icons type="right" size="12"></uni-icons></view>
			</view> -->
			<view v-if="id == 1">
			<view class="jsy" v-if="datas.length == 0">
				<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
			</view>
			<view class="top-box" v-for="(item,index) in datas" :key="index">
				<view class="t-top" >
					<view class="sys">
						<view class="t-title">客户来源</view>
						<view class="t-num">{{item.customerSource || ''}}</view>
						
					</view>
					<view class="sys">
						<view class="t-title">车型</view>
						<view class="t-num">{{item.goodsTitle || ''}}</view>
						
					</view>
					<view class="sys">
						<view class="t-title">数量</view>
						<view class="t-num">{{item.theNum || ''}}</view>
						
					</view>
					<view class="sys">
						<view class="t-title">公示金额</view>
						<view class="t-num">{{item.theAmount || ''}}</view>
						
						
					</view>
				</view>
			</view>
			</view>
			<view v-if="id == 2">
			<view class="jsy" v-if="datas.length == 0">
				<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
			</view>
			<view class="waigg">
				<view class="top-boxx" v-for="(item,index) in datas" :key="index">
					<view class="t-top" >
						
							<view class="t-title">{{item.goodsTitle || ''}}</view>
							<view class="t-num">{{item.theNum || ''}}</view>
							
						
						
					</view>
				</view>
			</view>
			
			</view>
			
			
			<view v-if="id == 3">
			<view class="jsy" v-if="datas.length == 0">
				<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
			</view>
			<view class="waigg">
				<view class="top-boxx" v-for="(item,index) in datas" :key="index">
					<view class="t-top" >
						
							<view class="t-title" style="display: flex; align-items: center; ">{{item.theName || ''}}:</view>
							<view class="t-num">{{item.theAmount || ''}}</view>
							
						
						
					</view>
				</view>
			</view>
			
			</view>
			
		
			
			
	
		</view>
	
	
	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
	
	export default{
		data(){
			return{
				id:1,
				datas:[],
				remark:'未知类别',
				range: ['2023-9-28', '2023-10-7'],
			}
			
		},
		watch: {
					range(newval) {
						console.log('范围选:', this.range);
						if(this.id == 1){
							this.getone()
						}
						if(this.id == 2){
							this.gettwo()
						}	
						if(this.id == 3){
							this.getthree()
						}
					},
				},
			onLoad(option) {
				this.gettime()
			this.id = option.id
			if(this.id == 1){
				this.remark = option.remark
				this.getone()	
			}
			if(this.id == 2){
				this.gettwo()
			}	
			if(this.id == 3){
				this.getthree()
			}
			},
			onShow() {
			
			},
			methods:{
				gettime(){
					// 获取当前时间
					var now = new Date();
					
					// 获取年份
					var year = now.getFullYear();
					
					// 获取月份
					var month = now.getMonth() + 1; // 月份从 0 开始，需要加 1
					if(month<10){
						var month ="0"+month
					}
					
					// 获取日期
					var date= now.getDate();
					
					// 格式化时间
					var currentTime = year + '-' + month + '-' + date
					console.log(currentTime)
					this.range[0] = currentTime
					this.range[1] = currentTime
					
				},
				async getone(){
					console.log('remark',this.remark)
					let data = {
						startTime : this.range[0],
						endTime : this.range[1],
						remark:this.remark
					}
					let res = await request({
						url:'/partnerOwn/partner/staticsTable3Detail',
						method: 'get',
						params: data
					})
					this.datas = res.data
					console.log(res);
				},
				async gettwo(){
					let data = {
						startTime : this.range[0],
						endTime : this.range[1]
					}
					let res = await request({
						url:'/partnerOwn/partner/staticsTable4',
						method: 'get',
						params: data
					})
					this.datas = res.data
				
				},
				async getthree(){
					let data = {
						startTime : this.range[0],
						endTime : this.range[1]
					}
					let res = await request({
						url:'/partnerOwn/partner/staticsTable5',
						method: 'get',
						params: data
					})
					this.datas = res.data
				
				},
				maskClick(e){
					console.log('maskClick事件:', e);
							},
			getback(){
				uni.navigateBack()
			}
			},
		}
</script>

<style scoped lang="scss">
	.jsy{
		width: 90%;
		margin: 40px auto;
	}
	.content{
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		// padding-top: 45px;
	}
	.ping-bottom{
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 15px;
	}
	.c-top{
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		 padding-top: 55px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}
	.c-title{
		font-size: 18px;
		font-weight: bold
	}
	.ail{
		width: 100%;
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding-bottom: 20px;
	}
	.top-box{
		width: 95%;
		border-radius: 5px;
		box-sizing: border-box;
		// padding: 18px;
		background-color: white;
		margin: 10px auto;
	}
	.top-boxx{
		width: 47%;
		border-radius: 5px;
		box-sizing: border-box;
		// padding: 18px;
		background-color: white;
		margin-top: 10px;
	
		
	}
	.cont-box{
		width: 100%;
		border-radius: 5px;
		box-sizing: border-box;
		padding: 18px;
		background-color: white;
		margin: 10px auto;
	}
	 .charts-box {
	    width: 100%;
	    height: 300px;
	  }
	  .t-bottom{
		  width: 100%;
		  height: 130px;
		  border-top: 1px solid #EEEEEE;
		  box-sizing: border-box;
		  // padding: 20px;
	  }
	  .t-top{
	  		  width: 100%;
	  		  // height: 130px;
	  		 display: flex;
			
			 justify-content: center;
	  		  box-sizing: border-box;
	  		  padding: 15px;
	  }
	  .sis{
		  width: 33%;
	  }
	  .dinga{
		// margin-left: 25px;
		font-size: 14px;
		font-weight: bold;
	  }
	  .sys{
		   width: 25%;
	  }
	  .t-title{
		  width: 100%;
		  text-align: center;
		  font-size: 14px;
		  font-weight: 400;
		  color: #333333;
		  line-height: 14px;
	  }
	  .t-num{
		  width: 100%;
		  text-align: center;
		  font-size: 22px;
		  font-weight: bold;
		  color: #0D2E8D;
		  line-height: 26px;
		  margin: 5px auto;
	  }
	  .cont-title{
		  font-size: 16px;
		  font-weight: 500;
		  color: #333333;
	  }
	   .charts-box {
	      width: 100%;
	      height: 300px;
	    }
		.wrap-box{
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			margin: 10px auto; 
		}
		.w-box{
			width: 33%;
			box-sizing: border-box;
			text-align: center;
			margin-bottom: 10px;
		}
		.imgicon{
			width: 33px;
			height: 28px;
			margin: 0 auto;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.t-zhong{
			font-size: 14px;
			font-weight: 400;
			color: #333333;
			margin: 3px auto;
		}
		.lanbnum{
			font-size: 26px;
			font-weight: bold;
			color: #0D2E8D;
		}
		.b-title{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			font-weight: 400;
			color: #666666;
			margin-bottom: 10px;
		}
		.b-zuo{
			width: 20%;
		}
		.b-zhong{
			text-align: left;
			width: 60%;
			display: flex;
			align-items: center;
		}
		.b-you{
			width: 20%;
		}
		.touxiang{
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background-color: salmon;
			overflow: hidden;
			margin-right: 10px;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.one{
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background: #FEB947;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			
		}
		.dis-t{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 10px auto;
		}
		.lank{
			width: 102px;
			height: 27px;
			border-radius: 14px ;
			border: 1px solid #0D2E8D;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 15px;
			font-weight: 400;
			color: #0D2E8D;
		}
		.lan-you{
			display: flex;
			align-items: center;
		}
		.yi{
			font-size: 15px;
			font-weight: 400;
			color: #666666;
			line-height: 15px;
			margin-right: 15px;
		}
		.er{
			width: 25px;
			height: 25px;
			background: #0D2E8D;
			border-radius: 3px ;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white !important;
		}
		// ----------------------
		.popup-box{
			overflow: hidden;
			border-radius: 8px;
			box-sizing: border-box;
			padding: 15px;
			width: 100%;
			background-color: white;
		}
		.sousuo{
			width: 95%;
			margin: 0 auto;
			margin-left: 0px;
			height: 30px;
			background: #F0F0F0;
			border-radius: 50px;
			color: #999999;
			box-sizing: border-box;
			padding:0 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			input{
				width: 80%;
			}
		}
		.list-box{
			width: 100%;
			height: 300px;
			overflow: hidden;
			box-sizing: border-box;
		
		}
		.list_scroll{
			height: 100%; // 需设置高度
			display: flex;
			flex-direction: column;
		
		}
		.list-qiu{
			width: 95%;
			border-bottom: 1px solid #EEEEEE;
			box-sizing: border-box;
			padding: 10px 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.tel{
			margin-left: 5px;
			font-size: 15px;
			font-weight: 400;
			color: #666666;
		}
		.ahhh{
			width: 90%;
			margin: 10px auto;
		}
		.waigg{
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			box-sizing: border-box;
			padding: 10px;
		}
</style>