<template>
	<view class="zhuti">
		<view class="futi">
			<!-- <view class="saleTian" @click="toSaleReport">上报线下销售数据</view> -->
			<view class="" style="width: 96%;margin: 0 auto;background-color: #fff;border-radius: 20rpx;">
				<view class="" style="width: 96%;margin: 0 auto;padding: 20rpx 20rpx;">
					<view style="font-weight: bold;font-size: 28rpx;">线下销售数据</view>
					<view class="cardMu">
						<view class="cardOne">
							<view class="title" style="font-size: 26rpx;">
								今日销售金额
							</view>
							<view class="num">{{todayRe}}</view>
							<view>同比昨日<span>{{subtract}}</span></view>
						</view>
						<!-- <view class="cardOne">
							<view class="title">
								今日销售金额
							</view>
							<view class="num">10</view>
							<view>同比昨日上升1</view>
						</view> -->
					</view>
				</view>
			</view>
			<view class="" style="width: 96%;margin: 0 auto;background-color: #fff;border-radius: 20rpx;margin-top: 20rpx;">
				<view class="" style="width: 96%;margin: 0 auto;padding: 20rpx 20rpx;">
					<view style="font-weight: bold;font-size: 28rpx;">营业额趋势(周)</view>
					<view style="height: 300px;width: 100%;margin-top: 20rpx;">
						<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
					</view>
				</view>
			</view>
			
			<view class="" style="width: 96%;margin: 0 auto;background-color: #fff;border-radius: 20rpx;margin-top: 20rpx;">
				<view class="" style="width: 96%;margin: 0 auto;padding: 20rpx 20rpx;">
					<view style="font-weight: bold;font-size: 28rpx;">销量排名</view>
					<view style="height: 300px;width: 100%;margin-top: 20rpx;">
						<qiun-data-charts type="bar" :opts="opts1" :chartData="chartData1" />
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chart: null,
				chartData: {},
				todayRe:0,
				subtract:0,
				opts: {
		     color: ["#3CA272"],
		           padding: [15,10,0,15],
		           enableScroll: false,
		           legend: {},
		           xAxis: {
		             disableGrid: true,
					  fontSize: 10, // 设置X轴字体大小
		           },
		           yAxis: {
		             gridType: "dash",
		             dashLength: 2
		           },
		           extra: {
		             line: {
		               type: "curve",
		               width: 2,
		               activeType: "hollow"
		             }
		           }
		     
	   },
				chartData1: {},
				opts1: {
					color: ["#3CA272"
					],
					padding: [15, 30, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: false,
				AllyDecimals: false,

					},
					yAxis: {
						
					},
					extra: {
						bar: {
							type: "stack",
							width: 30,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							categoryGap: 2
						}
					}
				}
			}
		},
		onReady() {
			this.getServerData();
		},
		mounted() {

		},
		methods: {
			getServerData() {
			 let ids = uni.getStorageSync('user').phone
				this.$http.sendRequest(`/cereSalesReporting/salesStatistics/${ids}`, 'GET',{},1).then(res => {
				  this.subtract = res.data.data.subtract	
				  this.todayRe = res.data.data.todayRe	
				  let salesRankingCate = []
				  let salesRankingSeries =[]
				   res.data.data.salesRanking.map(item=>{
					   salesRankingCate.push(item.productName)
					   salesRankingSeries.push(item.salesQuantity)
				   })
				  let objList = {
				  	categories:salesRankingCate,
				  	series: [{
				  			name: "数量",
				  			data: salesRankingSeries,
				  		}
				  	]
				  }
				  
				  let turnoverDetailSeries =[]
				  let objMsg ={
				  						  name:'销售额',
				  						  data:[0,0,0,0,0,0,0]
				  }
				  res.data.data.sameDaySalesVOS.map(item=>{
					
					
					if(this.getWeekday(item.saleTime) == '周一'){
						objMsg.data[0] = item.price 
					}else if(this.getWeekday(item.saleTime) == '周二'){
						objMsg.data[1] = item.price 
					}else if(this.getWeekday(item.saleTime) == '周三'){
						objMsg.data[2] = item.price 
					}else if(this.getWeekday(item.saleTime) == '周四'){
						objMsg.data[3] = item.price 
					}else if(this.getWeekday(item.saleTime) == '周五'){
						objMsg.data[4] = item.price 
					}else if(this.getWeekday(item.saleTime) == '周六'){
						objMsg.data[5] = item.price 
					}else if(this.getWeekday(item.saleTime) == '周天'){
						objMsg.data[6] = item.price 
					}
				
				  					   
				  })
				  turnoverDetailSeries.push(objMsg)
				  this.chartData1 = JSON.parse(JSON.stringify(objList))
				  let qushi = {
				  	categories: ["周一", "周二", "周三", "周四", "周五", "周六","周天"],
				  	series: turnoverDetailSeries
				  }
				  this.chartData = JSON.parse(JSON.stringify(qushi))
				  
				})
		
			
			},
			getWeekday(dateString) {
			    // 解析日期字符串
			    const date = new Date(dateString)
			    
			    // 检查日期是否有效
			    if (isNaN(date)) {
			        throw new Error('无效的日期格式。请使用 "YYYY-M-D" 或 "YYYY-MM-DD" 格式。')
			    }
			
			    // 定义星期的中文表示
			    const weekdays = ["周一", "周二", "周三", "周四", "周五", "周六","周天"]
			
			    // 获取星期几（0-6）
			    const dayIndex = date.getDay()
			
			    return weekdays[dayIndex]
			},
			// 跳转到销售上报页面
			toSaleReport(){
				uni.navigateTo({
					url:'/pages/saleReport/saleReport'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'salesReporting.scss';
</style>