<template>
	<view class="content">
		<headersVue :titles="titles" style="position: static !important;">
			<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
		</headersVue>
		<view class="ail">
			<view class="ahhh">
				<uni-datetime-picker v-model="range" type="daterange" @change="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 v-if="id == 4">
				<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.skuName || '' }}:
							</view>
							<view class="t-num">{{ item.orderCount || 0 }}</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="id == 5">
				<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" @click ="goProjectList(item)">
						<view class="t-top">

							<view class="t-title" style="display: flex; align-items: center; ">{{ item.name || '' }}:
							</view>
							<view class="t-num">{{ item.theNum || 0 }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
	import headersVue from "@/components/header/headers.vue";

	export default {
		components: {
			headersVue
		},
		data() {
			return {
				id: 1,
				datas: [],
				remark: '未知类别',
				range: ['2023-9-28', '2023-10-7'],
				titles: '',
				businessId: '',
			}

		},
		watch: {
			range(newval) {
				if (this.id == 1) {
					this.getone()
				}
				if (this.id == 2) {
					this.gettwo()
				}
				if (this.id == 3) {
					this.getthree()
				}
				if (this.id == 4) {
					this.getfour()
				}
			},
		},
		onLoad(option) {
			this.gettime()
			this.id = option.id
			if (this.id == 1) {
				this.remark = option.remark
				this.getone()
				this.titles = '客户来源统计'
			}
			if (this.id == 2) {
				this.gettwo()
				this.titles = '检测车型统计'
			}
			if (this.id == 3) {
				this.getthree()
				this.titles = '代收款'
			}
			if (this.id == 4) {
				this.getfour()
				this.titles = '检测类型统计'
			}
			if (this.id == 5) {
				this.businessId = option.dataId
				this.getCustomerSourceCount()
				this.titles = '客户来源统计'
			}
		},
		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
				this.range[0] = currentTime
				this.range[1] = currentTime

			},
			async getone() {
				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
			},
			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

			},
      goProjectList(data){
         uni.navigateTo({
           url: "/pages/index/staffProjectList/staffProjectList?customerSource=" + data.name
        })
      },
			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

			},
			async getfour() {
				let data = {
					startTime: this.range[0],
					endTime: this.range[1]
				}
				let res = await request({
					url: '/partnerOwn/partner/queryInspectionSkuList',
					method: 'get',
					params: data
				})
				this.datas = res.data

			},
			async getCustomerSourceCount() {
				let data = {
					startTime: this.range[0],
					endTime: this.range[1],
					businessId: this.businessId
				}
				let res = await request({
					url: '/partnerOwn/partner/customerSourceCount',
					method: 'get',
					params: data
				})
				this.datas = res.data
			},
			maskClick(e) {
				console.log('执行了吗');
				if (this.id == 1) {
					this.remark = option.remark
					this.getone()
				}
				if (this.id == 2) {
					this.gettwo()
				}
				if (this.id == 3) {
					this.getthree()
				}
				if (this.id == 4) {
					this.getfour()
				}
				if (this.id == 5) {
					this.getCustomerSourceCount()
				}
			},
			getback() {
				uni.navigateBack()
			}
		},
	}
</script>

<style scoped lang="scss">
	.jsy {
		width: 90%;
		margin: 40px auto;
	}

	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F7F8FC;
		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>