<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="page-container">
		<view style="width:94%;margin: 20px auto;background: #FFF;border-radius: 20px;">
			<view style="width: 92%;margin:10px auto;display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #f5f5f5;padding: 10px;align-items: center;">
				<view style="font-size: 32rpx;font-weight: bold;">今日客流统计</view>
				<view style="font-size: 24rpx;color:#999999;">更新时间：{{flowData.updateTime}}</view>
			</view>
			<view style="width: 92%;margin:10px auto;padding: 10px;font-size: 28rpx;">
				<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
					<view style="font-weight: bold;width: 40%;">当前人数:</view>
					<view>{{flowData.presentNum}}</view>
				</view>
				<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
					<view style="font-weight: bold;width: 40%;">进场人数:</view>
					<view>{{flowData.enters}}</view>
				</view>
				<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
					<view style="font-weight: bold;width: 40%;">出场人数:</view>
					<view>{{flowData.exits}}</view>
				</view>
				<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
					<view style="font-weight: bold;width: 40%;">最大容纳人数:</view>
					<view>{{flowData.capacity}}</view>
				</view>
				<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
					<view style="font-weight: bold;width: 40%;">峰值人数:</view>
					<view>{{flowData.presentFlowVOList[0].peakNum}}</view>
				</view> 
			</view> 
		</view>
		
		<view style="width:94%;margin: 20px auto;background: #FFF;border-radius: 20px;padding-bottom: 20px;">
			<view style="width: 92%;margin:10px auto;display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #f5f5f5;padding: 10px;align-items: center;">
				<view style="font-size: 32rpx;font-weight: bold;">今日客流趋势</view>
				<view style="font-size: 24rpx;color:#999999;">单位：人</view>
			</view>
			<view style="width: 92%;margin:10px auto;padding: 10px;font-size: 28rpx;height: 45vh;">
				 <qiun-data-charts 
				       type="line"
				       :opts="opts"
				       :chartData="chartData"
				     />
			</view> 
		</view>
		
	</view>
</template>

<script>
import { queryPassengerNumApi } from '@/api/passenger/index.js'

export default {
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,
			dateList:[],
			canteenItem:{},
			flowData:{
				"presentFlowVOList": [
					{
						"date": "2025-06-10",
						"presentList": [
							"0",
							"0",
							"0",
							"0",
							"0",
							"0",
							"0",
							"39",
							"13",
							"9",
							"9"
						],
						"enterList": [
							"0",
							"0",
							"0",
							"0",
							"0",
							"0",
							"0",
							"110",
							"193",
							"218",
							"218"
						],
						"exitList": [
							"0",
							"0",
							"0",
							"0",
							"0",
							"0",
							"0",
							"71",
							"180",
							"209",
							"209"
						],
						"peakNum": "39"
					}
				],
				"updateTime": "2025-06-10 10:40:05",
				"presentNum": 9,
				"enters": 218,
				"exits": 209,
				"capacity": 400
			},
			chartData:{},
			opts: {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [15,10,0,15],
				enableScroll: false,
				legend: {},
				xAxis: {
				  disableGrid: true
				},
				yAxis: {
				  gridType: "dash",
				  dashLength: 2
				},
				extra: {
				  line: {
					type: "curve",
					width: 2,
					activeType: "hollow"
				  }
				}
			}
		}
	},
	onLoad(options) {
		options = JSON.parse(options.params) 
		this.canteenItem = options
		console.log(this.canteenItem)
		this.dateList = this.getRecentWeekDates() 
	},
	onReady() {
		// this.initChart()
		this.queryNowPresentNum();
	},
	methods: {
		getRecentWeekDates() {
			let currentDate = new Date(); // 获取当前日期
			let weekDates = []; 
			// for (let i = 0; i < 1; i++) {
				let day = currentDate.getDate();
				let month = currentDate.getMonth() + 1; // 月份是从0开始计数的，所以要+1
				let year = currentDate.getFullYear();
				//日期 
				let formattedDate2 = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;  
				weekDates.push(formattedDate2); 
				// currentDate.setDate(currentDate.getDate() + 1); // 获取前一天的日期
			// } 
			return weekDates;
		},
		async queryNowPresentNum() {
			try {
				let param = {
					"canteenId":this.canteenItem.canteenId,
					"periods":1,
					"presentDate":this.dateList,
				}
				const res = await queryPassengerNumApi(param)
				console.log('?? ~ getList ~ res:', res)
				this.flowData = res.data; 
				this.initChart()
				
			} catch (error) {
				console.log(error)
			}
		},
		initChart(){
			if(this.flowData.presentFlowVOList&&this.flowData.presentFlowVOList.length>0){
				let xData = []
				let line1=[]
				let line2=[]
				let xIndex = 0
				let index1 = this.flowData.presentFlowVOList[0].enterList.findIndex(v=>Number(v)>0)
				let index2 = this.flowData.presentFlowVOList[0].exitList.findIndex(v=>Number(v)>0) 
				console.log(index1)
				console.log(index2)
				if(index1<=index2){
					this.flowData.presentFlowVOList[0].enterList.forEach((item,index)=>{
						if(index>=index1){
							xData.push((index+1)+"点")
							line1.push(this.flowData.presentFlowVOList[0].enterList[index])
							line2.push(this.flowData.presentFlowVOList[0].exitList[index])
						} 
					})
				}else{
					this.flowData.presentFlowVOList[0].exitList.forEach((item,index)=>{
						if(index>=index2){
							xData.push((index+1)+"点")
							line1.push(this.flowData.presentFlowVOList[0].enterList[index])
							line2.push(this.flowData.presentFlowVOList[0].exitList[index])
						} 
					})
				} 
				console.log(xData)
				var lineData = {
					categories: xData,
					series: [
					  {
						name: "进场人数",
						// lineType: "dash",
						data: line1
					  },
					  {
						name: "出场人数",
						data: line2
					  }
					]
				};  
			}else{
				var lineData = {
					categories: ["8点","9点","10点","11点","12点","13点","14点","15点","16点","17点","18点","19点","20点"],
					series: [
					  {
						name: "进场人数",
						// lineType: "dash",
						data: [0,0,0,0,0,0,0,0,0,0,0,0,0]
					  },
					  {
						name: "出场人数",
						data: [0,0,0,0,0,0,0,0,0,0,0,0,0]
					  }
					]
				};
			}
			this.chartData = JSON.parse(JSON.stringify(lineData)); 
		}
		
	}
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

</style>