<template>
	<view class="page">
		<u-navbar title="流水分析" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='58'></u-navbar>
		<view class="box">
			<view class="date">
				<text @click="btnks(1)">{{firsTime}}</text> -- <text @click="btnks(2)">{{lasTime}}</text>
			</view>
			<view style="width: 750rpx;height: 1px;background-color: #F0F0F0;"></view>
			<view class="zongls">
				<view class="hz">
					<view class="">总流水</view>
					<view class="" style="color: #4C97E7;">{{syobj.flow}}</view>
				</view>
				<view class="hz">
					<view class="">总收益</view>
					<view class="" style="color: #25CE88;">{{syobj.income}}</view>
				</view>
				<view class="hz">
					<view class="">总订单</view>
					<view class="" style="color: #FF8157;">{{syobj.order}}</view>
				</view>
			</view>
			<view style="width: 750rpx;height: 1px;background-color: #F0F0F0;"></view>
			<view class="dates">
				<view class="">日期</view>
				<view class="ls" @click="shows = true">{{tit}} <u-icon name="arrow-down"></u-icon> </view>
			</view>
			<view class="list" v-for="(item,index) in listarr" :key="index">
				<view class="">{{item.year +'-' + item.month + '-' + item.day}}</view>
				<view class="ls" v-if="titvalue == 1">{{item.flow}}元</view>
				<view class="ls" v-if="titvalue == 2">{{item.income}}元</view>
				<view class="ls" v-if="titvalue == 3">{{item.order}}单</view>
			</view>
		</view>

		<u-select v-model="shows" :list="list" @confirm="confirms"></u-select>
		<u-picker v-model="show" mode="time" @confirm="confirmtime"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					background: '#25CE88'
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				num: '',
				dateindex: 1,
				firsTime: '',
				lasTime: '',
				shows: false,
				tit:'流水',
				list: [{
						value: '1',
						label: '流水'
					},
					{
						value: '2',
						label: '收益'
					},{
						value: '3',
						label: '订单'
					}
				],
				listarr:[],
				titvalue:1,
				syobj:{}
			}
		},
		onLoad() {
			let today = new Date()
			this.firsTime = this.formatDate(today)
			this.lasTime = this.formatDate(today)
			this.getshouyi()
			this.getlist()
		},
		methods: {
			getlist(){
				this.$u.get('/agent/report/agent/analysis?startDate=' + this.firsTime + '&endDate=' + this.lasTime).then(res => {
					if(res.code == 200){
						this.listarr = res.data
					}
				})
			},
			getshouyi(){
				this.$u.get('/agent/report/agent/total').then(res => {
					if(res.code == 200){
						this.syobj = res.data
					}
				})
			},
			
			confirms(e){
				this.tit = e[0].label
				this.titvalue = e[0].value
			},
			formatDate(date) {
				let year = date.getFullYear();
				let month = String(date.getMonth() + 1).padStart(2, '0');
				let day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			btnks(num) {
				this.show = true
				if (num == 1) {
					this.num = 1
				} else {
					this.num = 2
				}
			},
			confirmtime(e) {
				if (this.num == 1) {
					this.firsTime = e.year + '-' + e.month + '-' + e.day
					this.getlist()
				} else {
					this.lasTime = e.year + '-' + e.month + '-' + e.day
					this.getlist()
				}
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title,
	/deep/ .uicon-nav-back {
		padding-bottom: 40rpx;
	}
	page {
		// background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
	}

	.page {
		width: 750rpx;
		// position: fixed;
		// top: 0;
		// left: 0;

		.box {
			width: 750rpx;
			height:100%;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.list {
				width: 750rpx;
				height: 92rpx;
				line-height: 46rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 52rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #F0F0F0;
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.dates {
				width: 750rpx;
				height: 92rpx;
				line-height: 46rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 52rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #F0F0F0;
				font-size: 28rpx;
				color: #3D3D3D;

				.ls {
					width: 128rpx;
					height: 46rpx;
					background: #F0F0F0;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					text-align: center;
					font-size: 28rpx;
					color: #808080;
				}
			}

			.zongls {
				width: 750rpx;
				height: 164rpx;
				display: flex;
				justify-content: space-between;
				padding: 34rpx 66rpx;
				box-sizing: border-box;
				background-color: #fff;

				.hz {
					width: 154rpx;
					height: 100rpx;
					background: #F0F0F0;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					text-align: center;
					padding: 14rpx 34rpx;
					box-sizing: border-box;
					font-weight: 500;
					font-size: 28rpx;
				}
			}

			.date {
				padding-left: 80rpx;
				padding-right: 80rpx;
				padding-top: 50rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				height: 150rpx;
				background-color: #fff;

				text {
					height: 50rpx;
					padding: 6rpx 18rpx;
					box-sizing: border-box;
					background: #eee;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					font-size: 24rpx;
					color: #808080;
				}
			}
		}
	}
</style>