<template>
	<view class="page">
		<view class="bj"></view>
        <view class="tabs">
        	<view @click="btntab(0)" :class="index == 0 ? 'active' : ''">
        		营收类
				<text></text>
        	</view>
			<view @click="btntab(1)" :class="index == 1 ? 'active' : ''">
				运维类
				<text></text>
			</view>
        </view>
		<view class="" style="width: 100%;height: 20rpx;"></view>
		<!-- 营收类 -->
		<view class="" style="height: 80vh;overflow: scroll;" v-if="index == 0">
			<view class="yinshoubox">
				<view class="lt">
					<view class="zhye">
						账户余额（元）
					</view>
					<view class="price">
						6566.23
					</view>
					<view class="ljtx">
						累积提现：3456.23
					</view>
				</view>
				<view class="rt">
					<view class="tx" @click="btntx">
						提现
					</view>
					<view class="txjl">
						提现记录
					</view>
				</view>
			</view>
			<view class="leiji">
				<view class="li">
					<view class="top">
						3653
					</view>
					<view class="bot">
						累计用户
					</view>
				</view>
				<view class="li">
					<view class="top">
						3653
					</view>
					<view class="bot">
						累计收益
					</view>
				</view>
				<view class="li">
					<view class="top">
						3653
					</view>
					<view class="bot">
						累计订单
					</view>
				</view>
				<view class="li">
					<view class="top">
						3653
					</view>
					<view class="bot">
						累计退款
					</view>
				</view>
			</view>
			<view class="time">
				<view class="timewz">
					时间范围 
				</view>
				<view class="inptime">
					<view class="" @click="oneshow = true">
						{{kstime}}
					</view> 
					--
                    <view class="" @click="twoshow = true">
                    	{{jstime}}
                    </view> 					
				</view>
			</view>
			<u-picker mode="time" v-model="oneshow" :params="oneparams" @confirm="confirmone"></u-picker>
			<u-picker mode="time" v-model="twoshow" :params="twoparams" @confirm="confirmtwo"></u-picker>
			<view class="riqi">
				<view :class="riqiindex == 0 ? 'actives' : ''" @click="btnriqi(0)">
					今日
				</view>
				<view :class="riqiindex == 1 ? 'actives' : ''" @click="btnriqi(1)">
					昨日
				</view>
				<view :class="riqiindex == 2 ? 'actives' : ''" @click="btnriqi(2)">
					本月
				</view>
				<view :class="riqiindex == 3 ? 'actives' : ''" @click="btnriqi(3)">
					上月
				</view>
			</view>
			<view class="yinshouqk">
				<view class="name">
					营收情况
				</view>
				<view class="zongfy">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uUjJxrOO6zHPzjT0Srl4" mode=""></image>
					<view class="top">
						<view class="topwz">
							3652
						</view>
						<view class="botwz">
							订单总费用
						</view>
					</view>
					<view class="top">
						<view class="topwz">
							3652
						</view>
						<view class="botwz">
							手续费
						</view>
					</view>
					<view class="top">
						<view class="topwz">
							3652
						</view>
						<view class="botwz">
							总营收
						</view>
					</view>
				</view>
				<view class="zongfy">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uCWFSrIsbEaQdKHWZv7U" mode=""></image>
					<view class="top">
						<view class="topwz">
							3652
						</view>
						<view class="botwz">
							待支付
						</view>
					</view>
					<view class="top">
						<view class="topwz">
							3652
						</view>
						<view class="botwz">
							已支付
						</view>
					</view>
					<view class="top">
						<view class="topwz">
							3652
						</view>
						<view class="botwz">
							已退款
						</view>
					</view>
				</view>
				<view class="zupibox">
					<view class="zupi">
						<view class="one">
							<view class="onewz">
								租赁费
							</view>
							<view class="twowz">
								已支付：￥0.00
							</view>
							<view class="twowz">
								已退款：￥0.00
							</view>
						</view>
						<view class="one">
							<view class="onewz">
								调度费（运营区外）
							</view>
							<view class="twowz">
								已支付：￥0.00
							</view>
							<view class="twowz">
								已退款：￥0.00
							</view>
						</view>
					</view>
					<view class="zupi" style="margin-top: 30rpx;">
						<view class="one">
							<view class="onewz">
								预约费
							</view>
							<view class="twowz">
								已支付：￥0.00
							</view>
							<view class="twowz">
								已退款：￥0.00
							</view>
						</view>
						<view class="one">
							<view class="onewz">
								调度费（停车区外）
							</view>
							<view class="twowz">
								已支付：￥0.00
							</view>
							<view class="twowz">
								已退款：￥0.00
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cheliang">
				<view class="name">
					车辆概况
				</view>
				<view class="dabox">
					<view class="li">
						<view class="bfb">
							100%
						</view>
						<view class="cl">
							车辆健康率
						</view>
					</view>
					<view class="li">
						<view class="bfb">
							0%
						</view>
						<view class="cl">
							车辆亏电率
						</view>
					</view>
					<view class="li">
						<view class="bfb">
							3256
						</view>
						<view class="cl">
							可骑行车辆
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 运维类 -->
		<view class="yunwei" v-if="index == 1">
			<view class="cheliang" style="padding: 30rpx 62rpx;box-sizing: border-box;">
				<view class="name">
					工单管理
				</view>
				<view class="dabox">
					<view class="li">
						<view class="bfb">
							236
						</view>
						<view class="cl">
							调度工单
						</view>
					</view>
					<view class="li">
						<view class="bfb">
							365
						</view>
						<view class="cl">
							维修工单
						</view>
					</view>
					<view class="li">
						<view class="bfb">
							3256
						</view>
						<view class="cl">
							投诉工单
						</view>
					</view>
				</view>
			</view>
			<view class="clzb">
				<view class="name">
					车辆指标
				</view>
				<view class="ul">
					<view class="li">
						<view class="shu">
							100
						</view>
						<view class="zi">
							总投放
						</view>
					</view>
					<view class="li">
						<view class="shu">
							100
						</view>
						<view class="zi">
							待使用
						</view>
					</view>
					<view class="li">
						<view class="shu">
							100
						</view>
						<view class="zi">
							使用中
						</view>
					</view>
					<view class="li">
						<view class="shu">
							100
						</view>
						<view class="zi">
							临时锁车
						</view>
					</view>
					<view class="li">
						<view class="shu">
							100
						</view>
						<view class="zi">
							仓库中
						</view>
					</view>
					<view class="li">
						<view class="shu">
							100
						</view>
						<view class="zi">
							禁用中
						</view>
					</view>
					<view class="li">
						<view class="shu">
							100
						</view>
						<view class="zi">
							投放中
						</view>
					</view>
					<view class="li">
						<view class="shu">
							100
						</view>
						<view class="zi">
							运营中P点外
						</view>
					</view>
					<view class="li">
						<view class="shu">
							100
						</view>
						<view class="zi">
							运营中超区
						</view>
					</view>
					<view class="li">
						<view class="shu">
							100
						</view>
						<view class="zi">
							零收益车辆
						</view>
					</view>
					<view class="li">
						<view class="shu">
							100
						</view>
						<view class="zi">
							调度设备
						</view>
					</view>
					<view class="li"></view>
				</view>
			</view>
		</view>
        <TabBar :indexs='1' style=""></TabBar>
	</view>
</template>

<script>
	import TabBar from '@/page_shanghu/components/tab-bar/tab-bar.vue'
	export default {
		components: {
			TabBar
		},
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				index:0,
				riqiindex:0,
				oneparams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				oneshow: false,
				twoparams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				twoshow: false,
				kstime:'',
				jstime:''
			}
		},
		onLoad() {

		},
		onShow() {
			this.getCurrentDate(this.riqiindex)
		},
		methods: {
			// 一开始就获取当前年月日
			getCurrentDate(num) {
			    const currentDate = new Date()
			    const year = currentDate.getFullYear()
			    const month = currentDate.getMonth() + 1
			    const day = currentDate.getDate()
			    const formatDate = (year, month, day) => {
			        const formattedMonth = month < 10 ? `0${month}` : month
			        const formattedDay = day < 10 ? `0${day}` : day
			        return `${year}-${formattedMonth}-${formattedDay}`
			    }
			    const getFirstDayOfMonth = (year, month) => {
			        return new Date(year, month - 1, 1)
			    }
			    const getLastDayOfMonth = (year, month) => {
			        return new Date(year, month, 0)
			    }
			    switch (num) {
			        case 0:
			            this.kstime = formatDate(year, month, day)
			            this.jstime = formatDate(year, month, day)
			            break
			        case 1:
			            const yesterday = new Date(currentDate)
			            yesterday.setDate(currentDate.getDate() - 1)
			            this.kstime = formatDate(yesterday.getFullYear(), yesterday.getMonth() + 1, yesterday.getDate())
			            this.jstime = formatDate(yesterday.getFullYear(), yesterday.getMonth() + 1, yesterday.getDate())
			            break
			        case 2:
			            const firstDayOfMonth = getFirstDayOfMonth(year, month)
			            this.kstime = formatDate(firstDayOfMonth.getFullYear(), firstDayOfMonth.getMonth() + 1, firstDayOfMonth.getDate())
			            this.jstime = formatDate(year, month, day)
			            break
			        case 3:
			            const lastMonthFirstDay = getFirstDayOfMonth(year, month - 1)
			            const lastMonthLastDay = getLastDayOfMonth(year, month - 1)
			            this.kstime = formatDate(lastMonthFirstDay.getFullYear(), lastMonthFirstDay.getMonth() + 1, lastMonthFirstDay.getDate())
			            this.jstime = formatDate(lastMonthLastDay.getFullYear(), lastMonthLastDay.getMonth() + 1, lastMonthLastDay.getDate())
			            break
			        default:
			            this.kstime = formatDate(year, month, day)
			            this.jstime = formatDate(year, month, day)
			            break
			    }
			},
			// 选择开始时间
			confirmone(e){
				this.kstime = e.year + '-' + e.month + '-' + e.day
				this.riqiindex = -1
			},
			// 选择结束时间
			confirmtwo(e){
				this.jstime = e.year + '-' + e.month + '-' + e.day
				this.riqiindex = -1
			},
			// 点击跳转到提现
			btntx(){
				uni.navigateTo({
					url:'/page_shanghu/gongzuotai/AccountDetails'
				})
			},
			// 点击切换日期
			btnriqi(num){
				this.riqiindex = num
				this.getCurrentDate(this.riqiindex)
			},
			// 点击切换tab
			btntab(num){
				this.index = num
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}
	.actives{
		border: 1px solid #4297F3 !important;
		color: #4297F3 !important;
		background: #E8F3FF !important;
	}
	.clzb{
		width: 696rpx;
		height: 496rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 20rpx;
		padding: 44rpx 34rpx;
		box-sizing: border-box;
		.name{
			font-weight: 600;
			font-size: 32rpx;
			color: #3D3D3D;
		}
		.ul{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		   .li{
		   	  width: 25%;
		   	  text-align: center;
			  margin-top: 28rpx;
			  .shu{
				  font-weight: 800;
				  font-size: 32rpx;
				  color: #4297F3;
			  }
			  .zi{
				  font-size: 28rpx;
				  color: #AFAFAF;
				  margin-top: 12rpx;
			  }
		   }	
		}
	}
	.cheliang{
		width: 696rpx;
		height: 254rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 20rpx;
		padding: 30rpx 34rpx;
		box-sizing: border-box;
		.name{
			font-weight: 600;
			font-size: 28rpx;
			color: #3D3D3D;
		}
		.dabox{
			display: flex;
			justify-content: space-between;
			.li{
				margin-top: 46rpx;
				text-align: center;
				.bfb{
					font-weight: 800;
					font-size: 36rpx;
					color: #3D3D3D;
				}
				.cl{
					font-size: 28rpx;
					color: #AFAFAF;
					margin-top: 6rpx;
				}
			}
		}
	}
	.zupibox{
		width: 630rpx;
		height: 360rpx;
		background: #F5FAFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: auto;
		margin-top: 44rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		.zupi{
			display: flex;
			justify-content: space-between;
			.one{
				.onewz{
					font-size: 28rpx;
					color: #4297F3;
					margin-top: 10rpx;
				}
				.twowz{
					font-size: 28rpx;
					color: #7C7C7C;
					margin-top: 10rpx;
				}
			}
		}
	}
	.yinshouqk{
		width: 696rpx;
		height: 768rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 30rpx 34rpx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 20rpx;
		.zongfy{
			display: flex;
			justify-content: space-between;
			margin-top: 54rpx;
			padding: 0 18rpx;
			box-sizing: border-box;
			.top{
				text-align: center;
				.topwz{
					font-weight: 800;
					font-size: 36rpx;
					color: #3D3D3D;
				}
				.botwz{
					font-size: 28rpx;
					color: #AFAFAF;
				}
			}
			image{
				width: 78rpx;
				height: 78rpx;
			}
		}
		.name{
			font-weight: 600;
			font-size: 28rpx;
			color: #3D3D3D;
		}
	}
	.riqi{
		view{
			width: 162rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			font-size: 28rpx;
			color: #3D3D3D;
			text-align: center;
			line-height: 64rpx;
			border: 1px solid #fff;
		}
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 28rpx;
		box-sizing: border-box;
	}
	.time{
		width: 696rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 22rpx 34rpx;
		box-sizing: border-box;
		align-items: center;
		.timewz{
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
		}
		.inptime{
			display: flex;
			align-items: center;
			color: #979797;
			view{
				margin-left: 10rpx;
				margin-right: 10rpx;
				width: 196rpx;
				height: 52rpx;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				border: 1rpx solid #808080;
				text-align: center;
				line-height: 52rpx;
				font-size: 28rpx;
				color: #979797;
			}
		}
	}
	.leiji{
		width: 696rpx;
		height: 178rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 38rpx 44rpx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 34rpx;
		.li{
			text-align: center;
			.top{
				font-weight: 800;
				font-size: 32rpx;
				color: #4297F3;
				margin-top: 12rpx;
			}
			.bot{
				margin-top: 12rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #AFAFAF;
			}
		}
	}
	.yinshoubox{
		display: flex;
		justify-content: space-between;
		padding: 0 56rpx;
		box-sizing: border-box;
		margin-top: 22rpx;
		.rt{
			.tx{
				width: 162rpx;
				height: 58rpx;
				background: #FFFFFF;
				box-shadow: 4rpx 4rpx 2rpx 0rpx rgba(0,0,0,0.3);
				border-radius: 36rpx 36rpx 36rpx 36rpx;
				text-align: center;
				line-height: 58rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #4297F3;
				margin-top: 50rpx;
			}
			.txjl{
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-top: 44rpx;
				text-align: right;
			}
		}
		.lt{
			.zhye{
				font-weight: 600;
				font-size: 28rpx;
				color: rgba(255,255,255,0.6);
			}
			.price{
				font-weight: 600;
				font-size: 50rpx;
				color: #FFFFFF;
				margin-top: 8rpx;
			}
			.ljtx{
				margin-top: 40rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(255,255,255,0.6);
			}
		}
	}
	.active{
		color: #fff !important;
		text{
			display: block;
			width: 54rpx;
			height: 8rpx;
			background: #FFFFFF;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			margin: auto;
			margin-top: 8rpx;
		}
	}
	.tabs{
		display: flex;
		padding-top: 108rpx;
		padding-left: 56rpx;
		box-sizing: border-box;
		view{
			margin-right: 72rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: rgba(255,255,255,0.6);
		}
	}
    .bj{
		width: 750rpx;
		height: 454rpx;
		background: #4297F3;
		border-radius: 0 0 50rpx 50rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
</style>