<template>
	<view class="pages">
		<u-navbar title="订单统计" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff"
			title-size='36' height='50'></u-navbar>
		<!-- 快捷选择 -->
		<view class="ordertongji">
			<view class="orderday">
				<view class="sj">
					<text @click="btnriq(1)" :class="dateindex == 1 ? 'dateactive' : ''">今日</text>
					<text @click="btnriq(2)" :class="dateindex == 2 ? 'dateactive' : ''">昨日</text>
					<text @click="btnriq(3)" :class="dateindex == 3 ? 'dateactive' : ''">近七日</text>
					<text @click="btnriq(4)" :class="dateindex == 4 ? 'dateactive' : ''">本月</text>
					<text @click="btnriq(5)" :class="dateindex == 5 ? 'dateactive' : ''">上月</text>
				</view>
			</view>
		</view>
		<view class="time">
			<view class="timert">
				<view style="margin-right: 10rpx;" class="xztime" @click="btnks(1)">{{endtime}} <image src="https://api.ccttiot.com/smartmeter/img/static/u2x4BXCLOru9JkebEuQx" mode=""></image> </view> <text style="color: #fff;">—</text> <view
					style="margin-left: 10rpx;" class="xztime" @click="btnks(2)">{{lasttime}} <image src="https://api.ccttiot.com/smartmeter/img/static/u2x4BXCLOru9JkebEuQx" mode=""></image> </view> 
				<!-- <view class="qinc" @click="btnqc">×</view> -->
				<view class="view" @click="btnsear">搜索</view>
			</view>
		</view>
		<view class="zongji">
			<view class="lt">
				<view class="name">
					完成总订单
				</view>
				<view class="price">
					{{totalOrder == null ? 0 : totalOrder}} <text style="font-size: 36rpx;">单</text>
				</view>
			</view>
			<view class="lt">
				<view class="name">
					订单总金额
				</view>
				<view class="price">
					{{totalOrderAmount  == null ? 0 : totalOrderAmount}} <text style="font-size: 36rpx;">元</text>
				</view>
			</view>
		</view>
		
		<view class="orderlist">
			<view class="tabtop">
				<view :class="actindex == index ? 'active' : ''" v-for="(item,index) in arr" :key="index" @click="btntab(index)">
					{{item}}
				</view>
			</view>
			<scroll-view scroll-y class="order-list" @scrolltolower="loadMoreOrders" refresher-enabled
						 :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
				<view>
					<view class="order-item" v-for="(item, index) in 2" :key="index">
						<view class="order-header">
							<text class="order-num">订单编号：125455245</text>
							<text class="order-status">已完成</text>
						</view>
						<view class="order-content">
							<text class="shop-name">店铺名称：西湖</text>
							<text class="light-times">爆灯次数：3次</text>
							<text class="order-time">订单时间：2024-2-3</text>
						</view>
						<view class="order-footer">
							<text class="shop-name">订单金额：</text>
							<text class="price">¥20</text>
						</view>
					</view>
					<!-- 加载更多 -->
					<view class="loading-more" v-if="hasMoreData">
						<text>加载中...</text>
					</view>
					<view class="no-more-data" v-else>
						<text>没有更多数据了</text>
					</view>
				</view>
				<!-- 空状态 -->
				<view class="empty-state">
					<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/empty_orders.png" mode="aspectFit"></image>
					<text>暂无订单数据</text>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#0B0B0B",
				},
				statusList: '',
				type: '',
				endtime: '',
				lasttime: '',
				arr:['已完成','已取消','有退款'],
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				num: '',
				tableData: [],  
				vallist:[],
				previouslyExpandedIndex: null,
				dateindex:1,
				totalOrder:'',
				totalOrderAmount:'',
				tyoe:'1',
				actindex:0,
				storeId:'',
				pageNum:1
			}
		},
		onLoad(option) {
			if(option.storeId){
				this.storeId = option.storeId
			}
			const todayStartTime = this.getTodayStartTime()
            this.endtime = this.formatDate(todayStartTime)
			this.lasttime = this.formatDate(todayStartTime)
			this.getList()
		},
		onShow() {

		}, 
		methods: {
			// 点击切换高亮
			btntab(index){
				this.actindex = index
			},
			// 商户请求统计列表
			getList(){
				console.log(this.endtime,this.lasttime);
				this.$u.get(`/bst/dashboard/storeIncome?storeId=${this.storeId}&startDate=${this.endtime}&endDate=${this.lasttime}&pageNum=${this.pageNum}&pageSize=20`).then((res) => {
					if (res.code == 200) {
					  // this.totalOrder = res.data.totalOrder 
					  // this.totalOrderAmount = res.data.totalOrderAmount
					  this.tableData = res.rows
					}
				})
			},
			btnriq(num) {
				this.dateindex = num
				if (num == 1) {
					let today = new Date();
					this.endtime = this.formatDate(today)
					this.lasttime = this.formatDate(today)
					this.getList()
				} else if (num == 2) {
					let yesterday = new Date()
					yesterday.setDate(yesterday.getDate() - 1)
					this.endtime = this.formatDate(yesterday)
					this.lasttime = this.formatDate(yesterday)
					this.getList()
				} else if (num == 3) {
					let today = new Date()
					let firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6)
					this.endtime = this.formatDate(firstDayOfMonth)
					this.lasttime = this.formatDate(new Date())
					this.getList()
				} else if (num == 4) {
					let today = new Date()
					let firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 1)
					let lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), today.getDate())
					this.endtime = this.formatDate(firstDayOfLastMonth)
					this.lasttime = this.formatDate(lastDayOfLastMonth)
					this.getList()
				} else if (num == 5) {
					let today = new Date()
					let firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
					let lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0)
					this.endtime = this.formatDate(firstDayOfLastMonth)
					this.lasttime = this.formatDate(lastDayOfLastMonth)
					this.getList()
				} 
			},
			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}`
			},
			formatDuration(seconds) {
			  const days = Math.floor(seconds / (3600 * 24))
			  const remainingSeconds = seconds % (3600 * 24)
			  const hours = Math.floor(remainingSeconds / 3600)
			  const minutes = Math.floor((remainingSeconds % 3600) / 60)
			  return `${days.toString().padStart(2, '0')}天${hours.toString().padStart(2, '0')}小时${minutes.toString().padStart(2, '0')}分钟`
			}, 
			// 点击搜索
			btnsear(){
				if(this.endtime == '' || this.endtime == ''){
					uni.showToast({
						title: '时间范围不能为空',
						icon: 'none',
						duration:2000 
					})
				}else{
					if(this.tyoe == 1){
						this.gethhList()
					}else{
						this.getList()
					}
					this.dateindex = ''
				}
			},
			// 获取当天时间
			getTodayStartTime() {  
			  const now = new Date()
			  const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0)
			  return startOfDay  
			},
			// 调用函数并打印结果  
			formatDate(date) {  
			  const year = date.getFullYear()  
			  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1并补零  
			  const day = String(date.getDate()).padStart(2, '0') // 补零  
			  const hours = String(date.getHours()).padStart(2, '0') // 补零（虽然这里总是00）  
			  const minutes = String(date.getMinutes()).padStart(2, '0') // 补零  
			  const seconds = String(date.getSeconds()).padStart(2, '0') // 补零  
			  return `${year}-${month}-${day} `  
			},

			// 选择时间
			btnks(num) {
				this.show = true
				if (num == 1) {
					this.num = 1
				} else {
					this.num = 2
				}
			},
			// 清除时间
			btnqc() {
				this.endtime = ''
				this.lasttime = ''
			},
			// 确定时间
			confirm(e) {
				if (this.num == 1) {
					this.endtime = e.year + '-' + e.month + '-' + e.day 
				} else {
					this.lasttime = e.year + '-' + e.month + '-' + e.day 
				}
			},
		}
	}
</script>

<style lang="scss">
	::v-deep .u-title {
		padding-bottom: 22rpx;
	}
    .active{
		color: #fff !important;
	}
	::v-deep .uicon-nav-back {
		padding-bottom: 22rpx;
	}
	.orderlist{
		margin-top: 40rpx;
		.tabtop{
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;
			box-sizing: border-box;
			view{
				font-size: 32rpx;
				color: #7C7C7C;
			}
		}
	}
	.order-list {
		// padding: 0 20rpx;
		height: 60vh;
		overflow: scroll;
		margin-top: 20rpx;
		.refund-btn {
					background-color: transparent;
					border: 1px solid #FF8998;
					color: #FF8998;
					font-size: 24rpx;
					padding: 3rpx 20rpx;
					border-radius: 30rpx;
					line-height: 1.5;
					height: 100rpx;
					&:active {
						opacity: 0.8;
					}
				}
		.order-item {
			background-color: rgba(17, 17, 17, 0.8);
			padding: 20rpx;
			border-bottom: 1px solid #222;
			
			.order-header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;
				
				.order-num {
					font-size: 24rpx;
					color: #fff;
				}
				
				.order-status {
					font-size: 24rpx;
					color: #FF8998;
					
					&.canceled {
						color: #888;
					}
				}
			}
			
			.order-content {
				.shop-name, .light-times, .order-time {
					font-size: 24rpx;
					color: #fff;
					display: block;
					margin-bottom: 10rpx;
				}
			}
			
			.order-footer {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				.shop-name, .light-times, .order-time {
					font-size: 24rpx;
					color: #fff;
					display: block;
				}
				.price {
					color: #FF8998;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
		
		/* 加载更多 */
		.loading-more, .no-more-data {
			text-align: center;
			padding: 20rpx 0;
			
			text {
				font-size: 24rpx;
				color: #666;
			}
		}
		
		/* 空状态 */
		.empty-state {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 600rpx;
			
			image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 20rpx;
			}
			
			text {
				font-size: 28rpx;
				color: #666;
			}
		}
	}
	page{
		background-color: #0B0B0B;
		width: 100%;
		height: 100vh;
	}
	.input-placeholder{
		color: #fff;
	}
	.view {
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #FF8998;
		background-color: #FCE9EA;
		border-radius: 10rpx;
		margin-left: 30rpx;
	}
	.dateactive {
		color: #fff !important;
	}
	.ordertongji {
		width: 100%;
		background: #0B0B0B;
		.shuju {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			margin-top: 24rpx;
			.sjone{
				margin: auto;
				text-align: center;
				.je{
					font-size: 40rpx;
					color: #3D3D3D;
					font-weight: 600;
				}
				.shu{
					font-size: 20rpx;
					color: #3D3D3D;
					margin-top: 20rpx;
				}
			}
		}
	
		.date {
			padding-left: 80rpx;
			padding-right: 80rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			margin-top: 26rpx;
			text {
				padding: 6rpx 18rpx;
				box-sizing: border-box;
				background: #eee; 
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-size: 24rpx;
				color: #808080;
			}
		}
	
		.orderday {
			display: flex;
			justify-content: space-between;
			width: 750rpx;
			padding: 10rpx 76rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #0B0B0B;
			padding-bottom: 24rpx;
			.sj{
				display: flex;
				justify-content: space-between;
				width: 750rpx;
			}
			text { 
				color: #727171;
				font-size: 34rpx;
			}
		}
	}
	.table-container {  
	  width: 100%;
	  view{
		  
	  }
	}  
	  
	.table-row {  
	  margin-bottom: 40rpx;  
	  border-bottom: 1rpx solid #ddd;  
	  padding: 20rpx;
	  box-sizing: border-box;
	  width: 100%;
	  background-color: #fff;
	  padding: 20rpx;
	  box-sizing: border-box;
	  border-radius: 0 0 50rpx 50rpx;
	}  
	  
	.row-header {  
	  display: flex;  
	  justify-content: space-between;  
	  align-items: center;  
	  padding: 10rpx;  
	  background-color: #f5f5f5;  
	  cursor: pointer;  
	  height: 140rpx;
	  text{
		  width: 16%;
		  text-align: center;
		  overflow: scroll;
	  }
	}  
	  
	.row-details {  
	  padding: 10rpx;  
	  background-color: #fff;  
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  view{
		  width: 16%;
		  text-align: center;
		  overflow: scroll;
	  }
	}  
	  
	.folded-count {  
	  margin-top: 20rpx;  
	  font-size: 30rpx;  
	  text-align: center;  
	}  
    .list{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.tab {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		background-color: #fff;
		height: 50rpx;
		view{
			width: 16%;
			text-align: center;
			overflow: scroll;
			font-size: 32rpx;
		}
	}
    .zongji{
		width: 100%;
		background-color: #0B0B0B;
		display: flex;
		justify-content: space-between;
		padding: 0 120rpx;
		box-sizing: border-box;
		padding-bottom: 28rpx;
		margin-top: 46rpx;
		.lt{
			text-align: center;
			.name{
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.price{
				margin-top: 12rpx;
				font-weight: 600;
				font-size: 52rpx;
				color: #FFFFFF;
			}
		}
	}
	.serch {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
		height: 120rpx;
		background-color: #0B0B0B;
        
		input {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 30rpx;
			border: 1px solid #fff;
			border-radius: 10rpx;
			color: #fff;
		}

		.view {
			width: 170rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: #0B0B0B;
			background-color: #fff;
			border-radius: 10rpx;
			margin-left: 30rpx;
		}
	}

	.time {
		height: 100rpx;
		padding-top: 20rpx !important;
		padding: 0 40rpx;
		box-sizing: border-box;
		background-color: #0B0B0B;
        
		.timetit {
			font-weight: 600;
			font-size: 30rpx;
		}

		.timert {
			display: flex;
			line-height: 60rpx;
			justify-content: space-between;
			margin-top: 20rpx;

			.xztime {
				width: 300rpx;
				height: 60rpx;
				border: 1px solid #727171;
				color: #727171;
				border-radius: 10rpx;
				text-align: center;
				background-color: transparent;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-left: 20rpx;
				}
			}

			.qinc {
				font-size: 50rpx;
				color: #fff;
				width: 80rpx;
				height: 60rpx;
				text-align: center;
			}
		}
	}
</style>