<template>
	<view class="page">
		<u-navbar :title="storeobj.storeName" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='36' id="navbar">
		</u-navbar>
        <image src="https://api.ccttiot.com/smartmeter/img/static/uo5KnRUd2Lbmx6kqLD8y" class="bj" mode=""></image>
        <view class="top">
        	<view class="lt">
        		<view class="jinri">
        			今日营业额（元）
        		</view>
				<view class="money">
					{{storeobj.todayIncome == null ? '--' : storeobj.todayIncome}}元
				</view>
				<view class="jinri">
					总收入：{{storeobj.totalIncome == null ? '--' : storeobj.totalIncome}}元
				</view>
        	</view>
			<view class="rt">
				<view class="jinri">
					今日订单（笔）
				</view>
				<view class="money">
					{{storeobj.todayOrderCount == null ? '--' : storeobj.todayOrderCount}}笔
				</view>
				<view class="jinri">
					总订单：{{storeobj.totalOrder == null ? '--' : storeobj.totalOrder}}笔
				</view>
			</view>
        </view>
		<view class="tongji">
			<view class="list">
				<view class="li">
					<view class="shu">
						{{storeobj.deviceCount == null ? '--' : storeobj.deviceCount}}
					</view>
					<view class="wen">
						设备总数
					</view>
				</view>
				<view class="li">
					<view class="shu">
						{{storeobj.freeDeviceCount == null ? '--' : storeobj.freeDeviceCount}}
					</view>
					<view class="wen">
						空闲设备
					</view>
				</view>
				<view class="li" style="border: none;">
					<view class="shu">
						{{storeobj.usingDeviceCount == null ? '--' : storeobj.usingDeviceCount}}
					</view>
					<view class="wen">
						使用中
					</view>
				</view>
			</view>
		</view>
		<view class="pricequan">
			<view class="tab">
				<view :class="activeindex == index ? 'active' : ''" v-for="(item,index) in arr" :key="index" @click.stop="btnact(index)">
					{{item}}
				</view>
			</view>
			<view class="tit">
				收支概览
			</view>
			<view class="xianshi">
				<view class="one">
					<view class="two">
						营收
					</view>
					<view class="thr">
						<text>￥</text> {{storeobj.payMoney == null ? '--' : storeobj.payMoney}}
					</view>
				</view>
				<view class="one">
					<view class="two">
						退款
					</view>
					<view class="thr">
						<text>￥</text>  {{storeobj.refundMoney == null ? '--' : storeobj.refundMoney}}
					</view>
				</view>
				<view class="one">
					<view class="two">
						实际营收
					</view>
					<view class="thr">
						<text>￥</text>  {{storeobj.realAmount == null ? '--' : storeobj.realAmount}}
					</view>
				</view>
			</view>
		</view>
		<view class="icons">
			<image @click.stop="btnpage(1)" src="https://api.ccttiot.com/smartmeter/img/static/ut6vvvispEWtKhCR9XYB" mode=""></image> <!-- 设备管理 -->
			<image @click.stop="btnpage(2)" src="https://api.ccttiot.com/smartmeter/img/static/uv6sqvVGDswiq90j7pMP" mode=""></image> <!-- 订单管理 -->
			<image @click.stop="btnpage(3)" src="https://api.ccttiot.com/smartmeter/img/static/u0d1g9wvKTqZMeTNljln" mode=""></image> <!-- 店铺配置 -->
			<image @click.stop="btnpage(4)" src="https://api.ccttiot.com/smartmeter/img/static/uOjdAFMpXa7IgycvqW0z" mode=""></image> <!-- 订单统计 -->
		</view>
		
		<view class="del" @click="btndel">
			删除
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "",
                },
				arr:['今天','昨天','近七天','本月','上月','全部'],
				activeindex:0,
				storeId:'',
				storeobj:{},
				endDate:'',
				startDate:''
			}
		},
		onLoad(option) {
			const now = new Date();
			const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
			this.startDate = this.formatDate(today);
			this.endDate = this.formatDate(today);
            this.storeId = option.storeId
			this.getxq()
		},
		methods: {
			// 删除店铺
			btndel(){
				let that = this
				uni.showModal({
				    title: '提示',  
				    content: '您确定要删除此店铺吗？',  
				    success: function (res) {  
				        if (res.confirm) { 
						   that.$u.delete(`/bst/store/${that.storeId}`).then(res =>{
						   	if(res.code == 200){
						   		uni.showToast({
						   			title: '删除成功',
						   			icon: 'success',
						   			duration: 2000
						   		})
						   		setTimeout(()=>{
						   			uni.navigateBack()
						   		},1500)
						   	}else{
						   		uni.showToast({
						   			title: res.msg,
						   			icon: 'none',
						   			duration: 2000
						   		})
						   	}
						   })
				        } else if (res.cancel) {  
				           
				        }  
				    }  
				})
			},
			// 请求店铺详情
			getxq(){
				this.$u.get(`/bst/store/${this.storeId}?startDate${this.startDate}&endDate${this.endDate}`).then(res =>{
					if(res.code == 200){
						this.storeobj = res.data
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 点击进行页面跳转
			btnpage(num){
				if(num == 1){ //设备管理
					uni.navigateTo({
						url:'/page_shanghu/device/index?storeId=' + this.storeId + '&tit=' + this.storeobj.storeName
					})
				}else if(num == 2){ //订单管理
					
				}else if(num == 3){ //店铺配置
					
				}else if(num == 4){ //订单统计
					
				}
			},
			// 点击切换高亮
			btnact(index) {
			  this.activeindex = index;
			  const now = new Date();
			  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
			  
			  if (index === 0) { // 今天
			    this.startDate = this.formatDate(today);
			    this.endDate = this.formatDate(today);
				this.getxq()
			  } else if (index === 1) { // 昨天
			    const yesterday = new Date(today);
			    yesterday.setDate(yesterday.getDate() - 1);
			    this.startDate = this.formatDate(yesterday);
			    this.endDate = this.formatDate(yesterday);
				this.getxq()
			  } else if (index === 2) { // 近七天
			    const sevenDaysAgo = new Date(today);
			    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 6);
			    this.startDate = this.formatDate(sevenDaysAgo);
			    this.endDate = this.formatDate(today);
				this.getxq()
			  } else if (index === 3) { // 本月
			    const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
			    this.startDate = this.formatDate(firstDayOfMonth);
			    this.endDate = this.formatDate(today);
				this.getxq()
			  } else if (index === 4) { // 上月
			    const firstDayOfLastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
			    const lastDayOfLastMonth = new Date(now.getFullYear(), now.getMonth(), 0);
			    this.startDate = this.formatDate(firstDayOfLastMonth);
			    this.endDate = this.formatDate(lastDayOfLastMonth);
				this.getxq()
			  } else if (index === 5) { // 全部
			    this.startDate = ''; // 或者设置为你的最早可能日期
			    this.endDate = '';   // 或者设置为你的最晚可能日期
				this.getxq()
			  }
			},
			
			// 辅助方法：格式化日期为 YYYY-MM-DD
			formatDate(date) {
			  if (!date) return '';
			  const year = date.getFullYear();
			  const month = String(date.getMonth() + 1).padStart(2, '0');
			  const day = String(date.getDate()).padStart(2, '0');
			  return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	.active{
		color: #FF8998 !important;
	}
	.del{
		width: 680rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 600;
		background-color: #FF8998;
		color: #fff;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 80rpx;
		border-radius: 30rpx;
	}
	.icons{
		width: 680rpx;
		height: 172rpx;
		background: #0B0B0B;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		display: flex;
		justify-content: space-between;
		margin: auto;
		margin-top: 24rpx;
		padding: 36rpx 56rpx;
		box-sizing: border-box;
		image{
			width: 96rpx;
			height: 98rpx;
		}
	}
	.pricequan{
		width: 680rpx;
		height: 296rpx;
		background: #0B0B0B;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 24rpx;
		.xianshi{
			display: flex;
			justify-content: space-between;
			margin-top: 28rpx;
			padding: 0 74rpx;
			box-sizing: border-box;
			.one{
				text-align: center;
				.two{
					font-size: 28rpx;
					color: #808080;
				}
				.thr{
					font-weight: 600;
					font-size: 32rpx;
					color: #FFFFFF;
					margin-top: 6rpx;
					text{
						font-size: 24rpx;
					}
				}
			}
		}
		.tit{
			font-size: 30rpx;
			color: #FFFFFF;
			padding-left: 30rpx;
			box-sizing: border-box;
		}
		.tab{
			display: flex;
			justify-content: space-between;
			padding: 34rpx 30rpx;
			box-sizing: border-box;
			view{
				color: #808080;
			}
		}
	}
	.tongji{
		width: 680rpx;
		height: 172rpx;
		background: #0B0B0B;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(72,137,59,0.1);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 46rpx 0;
		box-sizing: border-box;
		margin: auto;
		margin-top: 36rpx;
		.list{
			display: flex;
			justify-content: space-between;
			.li{
				width: 33.3%;
				text-align: center;
				border-right: 1px solid #C7C7C7;
				.shu{
					font-weight: 600;
					font-size: 40rpx;
					color: #FFFFFF;
				}
				.wen{
					font-size: 24rpx;
					color: #FFFFFF;
					margin-top: 16rpx;
				}
			}
		}
	}
	.top{
		display: flex;
		justify-content: space-between;
		padding: 0 70rpx;
		box-sizing: border-box;
		margin-top: 36rpx;
		.rt,
		.lt{
			.jinri{
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.money{
				font-weight: 600;
				font-size: 44rpx;
				color: #FFFFFF;
				margin-top: 12rpx;
				margin-bottom: 16rpx;
			}
		}
	}
	.bj{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	page {
		background: #fff;
	}

</style>