<template>
	<!-- 商家数据统计 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					数据统计
				</view>
			</view>
		</view>
		<view style="margin-top: -120rpx;">
			<uni-datetime-picker style="margin-bottom:20rpx;" v-model="range" type="daterange" @change="searchList" />
		</view>
		<view style="width: 100%;margin: 20rpx auto;background: #fff;">
			<view class="box">
				<view style="width: 69%;">
					<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
						<uni-icons type="cart" size="24" color="red"></uni-icons>
					</view>
					销售金额
				</view>
				<view style="width: 30%;text-align: right;">
					<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalAmount}}</text>
					
				</view>
			</view>
			<view class="box">
				<view style="width: 69%;">
					<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
						<uni-icons type="cart" size="24" color="red"></uni-icons>
					</view>
					销量
				</view>
				<view style="width: 30%;text-align: right;">
					<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalJCount}}</text>
					
				</view>
			</view>
			<view style="width: 100%;height: 10rpx;background: rgba(247, 248, 248, 0.6);"></view>
			<view class="box">
				<view style="width: 69%;">
					<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
						<uni-icons type="wallet" size="24" color="red"></uni-icons>
					</view>
					销售利润
				</view>
				<view style="width: 30%;text-align: right;">
					<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalProfit==null?0:shopInfo.totalProfit}}</text>
					
				</view>
			</view>
			<view style="width: 100%;height: 10rpx;background: rgba(247, 248, 248, 0.6);"></view>
			<view class="box">
				<view style="width: 69%;">
					<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
						<uni-icons type="refreshempty" size="24" color="red"></uni-icons>
					</view>
					退货金额
				</view>
				<view style="width: 30%;text-align: right;">
					<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.returnTotalAmount}}</text>
					
				</view>
			</view>
			<view class="box">
				<view style="width: 69%;">
					<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
						<uni-icons type="refreshempty" size="24" color="red"></uni-icons>
					</view>
					退货数
				</view>
				<view style="width: 30%;text-align: right;">
					<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.returnTotalCount}}</text>
					
				</view>
			</view>
			<view style="width: 100%;height: 10rpx;background: rgba(247, 248, 248, 0.6);"></view>
			
			<view class="box">
				<view style="width: 69%;">
					<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
						<uni-icons type="staff" size="24" color="red"></uni-icons>
					</view>
					下单客户
				</view>
				<view style="width: 30%;text-align: right;">
					<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalCCount}}</text>
					
				</view>
			</view>
			<!-- <view class="box" @tap="goDetail('rexiao')">
				<view style="width: 69%;">
					<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
						<uni-icons type="fire" size="24" color="red"></uni-icons>
					</view>
					热销商品
				</view>
				<view style="width: 30%;">
					<text style="display: inline-block;width: 150rpx;text-align: center;"></text>
					<uni-icons type="right" size="24" color="#777"></uni-icons>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				range:[],
				shopInfo:{
					totalProfit:0,
					returnTotalAmount:0,
					saleReturnCost:0
				}
			};
		},
		onShow(){
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			if(this.range ==''){
				this.getMonth();
			}
			this.getSaleInfo();
		},
		methods: {
			getSaleInfo() {
				this.shopInfo = {
					totalProfit:0,
					returnTotalAmount:0,
					saleReturnCost:0
				}
				this.tui.request("/app/sale/getShopAll", "POST", {
					pageVo: {
						pageSize: 5,
						pageNumber: 1
					},
					shopId:uni.getStorageSync('shopId'),
					startTime:this.range[0],
					endTime:this.range[1]
				}, false, false).then((res) => {
					if (res.code == 200) {
						this.shopInfo = res.result
					} else {
						this.tui.toast(res.message,1000)
					}
			
				})
			},
			//获取当月1日到当前时间
			getMonth() {
				let date = new Date()
				let year = date.getFullYear().toString()   //'年'
				let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString()  //'月'
				let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString()  //'日'
				let end = year + '-' + month + '-' + da  //当天
				let beg = year + '-' + month + '-01'    //当月第一天
				this.range = [beg,end]
			},
			back() {
				uni.navigateBack()
			},
			searchList() {
				this.priceList = [];
				this.getSaleInfo()
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}
	
	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}
	
	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 20%;
	}
	
	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	
	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
	.contentPadding {
		padding: 28rpx 20rpx;
		background-color: #fff;
		color: #909399;
	
		.title {
			padding-left: 20rpx;
			font-size: 32rpx;
			color: #303133;
			margin-bottom: 26rpx;
			line-height: 66rpx;
	
			image {
				display: inline-block;
				width: 40rpx;
				vertical-align: middle;
			}
	
			.btn {
				text-align: right;
				width: 24%;
				float: right;
				font-size: 26rpx;
				color: $u-primary;
			}
		}
		.grid-text {
			font-size: 28rpx;
			margin-bottom: 26rpx;
			text-align: center;
		}
	}
	.u-grid-item {
		width: 30% !important;
		height: 160rpx;
		background: linear-gradient(#84C1FF, #C4E1FF) !important;
		margin-left: 3%;
		border-radius: 30rpx;
		margin-top: 20rpx !important;
		color: #fff !important;
	
	}
	.cardText {
		font-size: 24rpx;
	}
	
	.priceText {
		color: $u-primary;
		font-size: 28rpx;
	}
	.u-grid-item:nth-child(2) {
		background: linear-gradient(#FFBB77, #FFDCB9) !important;
	}
	
	.u-grid-item:nth-child(3) {
		background: linear-gradient(#1AFD9C, #7AFEC6) !important;
	}
	
	.u-grid-item:nth-child(4) {
		background: linear-gradient(#1AFD9C, #7AFEC6) !important;
	}
	.u-grid-item:nth-child(5) {
		background: linear-gradient(#FFBB77, #FFDCB9) !important;
	}
	.u-grid-item:nth-child(6) {
		background: linear-gradient(#84C1FF, #C4E1FF) !important;
	}
	.u-count-num {
		color: #FFF !important;
		text-align:center;
	}
	.uni-date{
		background: #fff;
	}
	.uni-tooltip-popup{
		width: 180rpx;
	}
	.u-icon{
		padding: 0 0 0 16rpx !important;
	}
	.u-zidingyi{
		width: 22% !important;
		height: 160rpx;
		background: linear-gradient(#84C1FF, #C4E1FF) !important;
		margin-left: 3%;
		border-radius: 30rpx;
		margin-top: 20rpx !important;
		color: #fff !important;
		text-align: center;
		padding-top: 20rpx;
	}
	.u-zidingyi:nth-child(2) {
		background: linear-gradient(#FFBB77, #C4E1FF) !important;
	}
	.u-zidingyi:nth-child(3) {
		background: linear-gradient(#84C1FF, #7AFEC6) !important;
	}
	.u-zidingyi:nth-child(4) {
		background: linear-gradient(#84C1FF, #C4E1FF) !important;
	}
	.box{
		width: 100%;
		height: 100rpx;
		padding-left: 20rpx;
		display: flex;
		line-height: 100rpx;
		font-size: 34rpx;
		border-bottom: 1px solid #eee;
	}
	.tan-lirun{
		margin-top: 20rpx;
		width: 45%;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
		float: left;
		background-image: linear-gradient(#84C1FF, #C4E1FF) !important;
		color: #fff;
		border-radius: 20rpx;
	}
</style>