<template>
	<view class="content flex flex_column">
		<div class="p-header" @click="openShlef">
			<text>{{curCustomerName||'全部客户'}}</text>
			<u-icon name="arrow-right"></u-icon>
		</div>
		<div class="e-chart">
			<div class="card-box" v-if="$hasPermissions('M_salesStatistics_mobile')">
				<div class="card-tits">
					销售单
				</div>
				<div class="card-body">
					<div class="data-box flex">
						<div>
							<div class="data-amount">
								{{allData&&allData.salesTotalQty||0}}
							</div>
							<div class="data-label">销售产品数量(个)</div>
						</div>
						<div>
							<div class="data-amount">
								<u-count-to :end-val="allData&&allData.salesTotalAmount||0" separator="," :decimals="2"></u-count-to>
							</div>
							<div class="data-label">销售金额(元)</div>
						</div>
					</div>
					<qiun-data-charts 
					      type="line"
						  :opts="opts"
						  :ontouch="true"
					      :chartData="chartData"
						  @complete="complete"
					    />
				</div>
			</div>
			<div class="card-box" v-if="allData&&allData.xprhFlag&&$hasPermissions('M_shelfOrderTj_mobile')">
				<div class="card-tits">
					货架订单
				</div>
				<div class="card-body">
					<div class="data-box flex">
						<div>
							<div class="data-amount">
								{{allData&&allData.orderTotalQty||0}}
							</div>
							<div class="data-label">取货产品数量(个)</div>
						</div>
						<div>
							<div class="data-amount">
								<u-count-to :end-val="allData&&allData.orderTotalAmount||0" separator="," :decimals="2"></u-count-to>
							</div>
							<div class="data-label">取货产品金额(元)</div>
						</div>
					</div>
					<qiun-data-charts 
					      type="line"
						  :opts="opts1"
						  :ontouch="true"
					      :chartData="chartData1"
						  @complete="complete"
					    />
				</div>
			</div>
			<div class="card-box" v-if="allData&&allData.xprhFlag&&$hasPermissions('M_tempOrderTj_mobile')">
				<div class="card-tits">
					急送订单
				</div>
				<div class="card-body">
					<div class="data-box flex">
						<div>
							<div class="data-amount">
								{{allData&&allData.tempTotalQty||0}}
							</div>
							<div class="data-label">急送产品数量(个)</div>
						</div>
						<div>
							<div class="data-amount">
								<u-count-to :end-val="allData&&allData.tempTotalAmount||0" separator="," :decimals="2"></u-count-to>
							</div>
							<div class="data-label">急送产品金额(元)</div>
						</div>
					</div>
					<qiun-data-charts 
					      type="line"
						  :opts="opts2"
						  :ontouch="true"
					      :chartData="chartData2"
						  @complete="complete"
					    />
				</div>
			</div>
		</div>
		<!-- 筛选项 -->
		<u-popup v-model="showSearch" mode="right" width="70%">
			<view class="tabBox">
				<view class="tabs">
					<view class="flex">
						<view :class="item.val==curTab?'active':'all'" v-for="item in placeTab" :key="item.val" @click="tabChange(item)">{{item.name}}</view>
					</view>
				</view>
				<view class="flex align_center form-item-inp" style="padding: 0 30rpx;" v-if="curTab == 6">
					<u-input clearable v-model="dateArray" disabled placeholder="请选择时间段" @click="showDate=true" />
					<u-icon name="arrow-down" color="#999"></u-icon>
				</view>
				<view class="form-footer-btn">
					<u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClean">重置</u-button>
					<u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 选择日期范围 -->
		<u-calendar v-model="showDate" @change="dateChange" mode="range"></u-calendar>
	</view>
</template>

<script>
	import { salesStatistics } from '@/api/sales.js'
	import getDate from '@/libs/getDate.js'
	export default {
		data() {
			return {
				customerSn: '',
				curCustomerName: '',
				chartData: {},
				chartData1: {},
				chartData2: {},
				opts: {},
				opts1:{},
				opts2:{},
				allData: {xprhFlag:true},
				showSearch: false,
				showDate: false,
				dateArray: '',
				customBtnStyle: {  //  自定义按钮样式
					borderColor: this.$config('primaryColor'),
					backgroundColor: this.$config('primaryColor'),
					color: '#fff'
				},
				queryPramas:{
					beginDate: '',
					endDate: '',
					buyerSn: ''
				},
				placeTab: [
					{
						name:'今日',
						val: '0'
					},
					{
						name:'昨日',
						val: '1'
					},
					{
						name:'本周',
						val: '2'
					},
					
					{
						name:'上周',
						val: '3'
					},
					{
						name:'本月',
						val: '4'
					},
					{
						name:'上月',
						val: '5'
					},
					{
						name:'自定义',
						val: '6'
					}
				],
				curTab: '4',
				webView: null
			}
		},
		onLoad() {
			uni.$on('chooseShelfOk',(data)=>{
				this.customerSn = data.customerSn
				this.curCustomerName = data.customerName
				this.queryPramas.buyerSn = data.customerSn
				this.getServerData()
			})
			//#ifdef APP-PLUS
			this.webView = this.$mp.page.$getAppWebview(); 
			//#endif
			// 默认数据
			this.tabChange(this.placeTab[2])
		},
		onReady() {
			setTimeout(()=>{
				this.getServerData()
			},500)
		},
		onUnload() {
			uni.$off("chooseShelfOk")
		},
		onNavigationBarButtonTap() {
			this.showSearch = true
		},
		onBackPress() {
			if(this.showSearch){
				this.showSearch = false
				return true
			}
		},
		methods: {
			// 时间  change
			dateChange(date){
				this.dateArray = date.startDate + ' ~ ' + date.endDate
				this.queryPramas.beginDate = date.startDate + ' 00:00:00'
				this.queryPramas.endDate = date.endDate + ' 23:59:59'
				//#ifdef APP-PLUS
				this.webView.setTitleNViewButtonStyle(0, {
					"text":"\ue626 "+date.startDate+"~"+date.endDate,
					"color": "#00aaff",
					"width": "180px"
				});
				//#endif
			},
			tabChange(data){
				this.curTab = data.val
				if(data.val != 6){
					//#ifdef APP-PLUS
					this.webView.setTitleNViewButtonStyle(0, {
						"text":"\ue626 "+data.name,
						"color": "#00aaff",
						"width": "80px"
					});
					//#endif
				}else{
					this.dateArray = ''
					this.queryPramas.beginDate = ''
					this.queryPramas.endDate = ''
				}
			},
			// 重置
			handleClean(){
				this.tabChange(this.placeTab[2])
				this.showSearch = false
				this.getServerData()
			},
			complete(data){
				console.log(data)
			},
			// 查询
			handleSearch(){
				if(this.curTab == 6){
					if(this.queryPramas.beginDate&&this.queryPramas.endDate){
						this.getServerData()
						this.showSearch = false
					}else{
						uni.showToast({
							icon:'none',
							title: "请选择时间段"
						})
					}
				}else{
					this.getServerData()
					this.showSearch = false
				}
			},
			// 格式化折线图数据
			getFormatData(categories,data,name){
				if(data){
					data.map(item => Number(item))
				}
				return {
					categories: categories,
					series: [
					  {
						name: name,
						data: data||[],
						label:{
							position: 'top'
						}
					  },
					]
			  }
			},
			getOpts(data){
				return {
					enableScroll: true,
					xAxis: {
					  disableGrid: true,
					  itemCount: 4,
					  scrollShow: data.length > 4,
					  scrollAlign:'right'
					},
					yAxis: {
					  gridType: "dash",
					  dashLength: 2
					},
				}
			},
			getQueryDate(){
				const fun = [
					getDate.getToday,
					getDate.getYesterday,
					getDate.getCurrWeekDays,
					getDate.getLastWeekDays,
					getDate.getCurrLastMonthDays,
					getDate.getLastMonthDays
					];
				return {
					beginDate: fun[this.curTab]().starttime,
					endDate: fun[this.curTab]().endtime
				}
			},
			getServerData() {
			  let params = {}
			  // 不是自定义时间段
			  if(this.curTab != 6){
				  params = this.getQueryDate()
			  }
			  salesStatistics(Object.assign(this.queryPramas,params)).then(res => {
				  if(res.status == 200){
					  this.allData = JSON.parse(JSON.stringify(res.data))
					  this.chartData = this.getFormatData(res.data.salesDateList,res.data.salesAmountList,"销售金额")
					  this.opts = this.getOpts(res.data.salesDateList)
					  this.chartData1 = this.getFormatData(res.data.orderDateList,res.data.orderAmountList,"取货产品金额")
					  this.opts1 = this.getOpts(res.data.orderDateList)
					  this.chartData2 = this.getFormatData(res.data.tempDateList,res.data.tempAmountList,"急送产品金额")
					  this.opts2 = this.getOpts(res.data.tempDateList)
				  }
			  })
			},
			openShlef(){
				uni.navigateTo({
					url: "/pages/statistics/chooseShelf?customerSn="+this.customerSn
				})
			}
		}
	}
</script>

<style lang="less">
.content{
	height: 100vh;
	width: 100%;
	.p-header{
		background-color: #fff;
		text-align: center;
		padding-bottom: 20rpx;
	}
	.e-chart{
		flex-grow: 1;
		padding: 20rpx;
		font-size: 28rpx;
		overflow: auto;
		.card-box{
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			overflow: hidden;
			> div{
				padding: 20rpx;
				&:first-child{
					padding-bottom: 0;
				}
			}
			.card-tits{
				font-weight: bold;
			}
			.data-box{
				padding-bottom: 20rpx;
				> div{
					width: 50%;
					text-align: center;
					border-right: 1rpx solid #eee;
					&:last-child{
						border:0;
					}
					.data-amount{
						font-size: 50rpx;
					}
					.data-label{
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		}
		.card-body{
			overflow: auto;
		}
	}
	// 筛选
	.tabBox{
		height: 100vh;
		.tabs{
			flex-grow: 1;
			overflow: auto;
			padding: 20rpx;
			> view{
				flex-wrap: wrap;
				justify-content: space-between;
				> view{
					width: 45%;
					border: 1rpx solid #eee;
					padding: 15rpx;
					border-radius: 50rpx;
					text-align: center;
					margin-bottom: 15rpx;
				}
				.active{
					border:0;
					background-color: #0485F6;
					color: #fff;
				}
			}
		}
		.form-item-inp{
			border-bottom: 1rpx solid #eee;
		}
		.form-footer-btn{
			margin: 30upx;
			display: flex;
			justify-content: space-between;
		}
		.form-footer-btn {
			display: flex;
			.handle-btn {
				font-size: 28upx;
				margin: 0 10upx;
				flex: 1;
			}
		}
	}
}
</style>
