<template>
	<view>
		<u-navbar :is-back="false" title="MWMS PDA" :background="background" />
		<!--出入库月报表-->
		<view class="bg-white">
			<view class="rpt-up">
				<view class="rpt-left">
					<view class="rpt-left-title">出入库月报表</view>
					<view class="rpt-left-detail" >查询当月的出入库履历</view>
				</view>
				<view class="rpt-right"  @click="openInOutbackdrop">
					<image src="../../static/img/saleRpt.png" ></image>
				</view>
			</view>
			<!--横线-->
			<view style="height:1upx;margin:-40upx 20upx 30upx 20upx;">
				<image style="height: 1upx;width: 100%;" src="../../static/img/split_lin.png"></image>
			</view>
			<view class="rpt-next">
				<view class="rpt-next-date">{{ currentTime }}</view>
				<view class="rpt-next-more">查询报表数据 ></view>
			</view>
		</view>
		
		<!--客户分布统计表-->
		<view class="rpt-head bg-white">
			<view class="rpt-up">
				<view class="rpt-left">
					<view class="rpt-left-title">客户分布统计表</view>
					<view class="rpt-left-detail">查询销售发货客户分布图</view>
				</view>
				<view class="rpt-right">
					<image src="../../static/img/custRpt.png"></image>
				</view>
			</view>
			<!--横线-->
			<view style="height:1upx;margin:-40upx 20upx 30upx 20upx;">
				<image style="height: 1upx;width: 100%;" src="../../static/img/split_lin.png"></image>
			</view>
			<view class="rpt-next">
				<view class="rpt-next-date">{{ currentTime }}</view>
				<view class="rpt-next-more">查询报表数据 ></view>
			</view>
		</view>
		
		<fuibackdrop :show="show" closable @click="close">
			<view class="rpt-right">
				<image src="../../static/img/saleRpt.png"></image>
			</view>
		</fuibackdrop>
	</view>
</template>
<script>
	import fuibackdrop from "@/components/firstui/fui-backdrop/fui-backdrop.vue"
export default {
	components: {
		fuibackdrop
	},
  data() {
    return {
      currentTime: '',
	  show: false,
	  background: {
	  	backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
	  },
    };
  },
  onReady() {
    this.updateCurrentTime();
    // 每秒更新一次时间
    setInterval(this.updateCurrentTime, 1000);
  },
  methods: {
    updateCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
	//出入库报表遮罩
	openInOutbackdrop() {
		console.log("打开了遮罩")
		this.show = true
	},
	//关闭遮罩通过show进行控制
	close() {
		this.show = false;
	}
  }
};
</script>

<style>
@import url("../../css/rpt_list.css");

.bg-white {
	background-color: #FFFFFF;
	color: #7c7c7c;
}
</style>
