<template>
	<view>
		<view class="navbar-c">
			<view class="back" @click="backStatistics">
				<u-icon name="arrow-left" color="#101010" size="36"></u-icon>
			</view>
			<view class="title">
				设备用电量
				<image class="img" src="@/assets/img/refresh-line.svg" @click="getList(true)"></image>
			</view>
			
		</view>
		<!-- 标签 -->
		<view class="tabs-box" >
			<view class="tabs">
				<u-tabs :list="list" :is-scroll="false" inactive-color="#999999"  active-color="#666666" :current="current" @change="change"></u-tabs>
			</view>
			<view class="icon" @click="popShow=true">
				<u-icon name="arrow-down" color="#999999"></u-icon>
			</view>
		</view>
		<!-- 标签弹出层 -->
		<u-popup v-model="popShow" duration="10" mode="top" :negative-top="88" border-radius="16">
			<view class="popup-tabs">
				<view class="tabs">
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				<view class="more">
					<u-icon name="arrow-up" color="#777777" size="40" @click="popShow=false"></u-icon>
				</view>
			</view>
			<view class="tabs-options">
				<view class="item" v-for="(item, index) in list" :key="index"
					>
					{{item.name}}
				</view>
			</view>
		</u-popup>
		<view class="tatol-main">
			<!-- 用电量合计 -->
			<view class="total">
				<view class="company">
					<view class="name">
						荆鹏集团
					</view>
					<view class="amount">
						共 3 台设备
					</view>
				</view>
				<view class="infos">
					<view class="infos-item">
						<view class="number">
							361.5
						</view>
						<view class="time">
							昨日
						</view>
					</view>
					<view class="infos-item">
						<view class="number">
							361.5
						</view>
						<view class="time">
							本月
						</view>
					</view>
					<view class="infos-item">
						<view class="number">
							361.5
						</view>
						<view class="time">
							上月
						</view>
					</view>
				</view>
			</view>
			
			<view class="main">
				<view class="item" v-for="(item, index) in kWhList" :key="index" @click="toElectronicMonitoring(item)">
					<view class="icon">
						<image class="img" src="@/assets/img/energyMeter.svg" mode=""></image>
					</view>
					<view class="equipment">
						<view class="equipment1">
							{{item.name}}
						</view>
						<view class="equipment2">
							{{item.companyName}}
						</view>
					</view>
					<view class="electricity">
						<view class="electricity-item">
							<view class="number">
								{{item.yesterdayKwh}}
							</view>
							<view class="date">
								昨日
							</view>
						</view>
						<view class="electricity-item">
							<view class="number">
								{{item.thisDayKwh}}
							</view>
							<view class="date">
								今日
							</view>
						</view>
						<view class="electricity-item">
							<view class="number">
								{{item.thisMonthKwh}}
							</view>
							<view class="date">
								本月
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/energy/index.js'
	
	export default {
		data() {
			return {
				merchantList1: [], // 商户
				merchantList2: [],
				kWhList: [],
				companyId: '',
				pageIndex: 1,
				recordsTotal: 0,
				popShow:false,
				list: [{
					name: '全部'
				}, {
					name: '荆鹏集团'
				}, {
					name: '青少年宫',
					
				}, {
					name: '荆州院子',
					
				}],
				current: 0
			}
		},
		onLoad() {
			this.getList();
			this.getCompanyInfoList();
		},
		onReachBottom() {
			if (this.deviceList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			getCompanyInfoList() {
				this.merchantList1 = [];
				this.merchantList2 = [];
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.deviceCompanyList().then((response) => {
					uni.hideLoading();
					this.companyList = response.data.companyInfoList;
					if(this.companyList.length >3) {
						this.merchantList1.push(this.companyList.slice(0, 3));
						this.merchantList2.push(this.companyList.slice(3));
					} else {
						this.merchantList1 = this.companyList;
					}
					this.merchantList1.unshift({id: '', name: '全部'});
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getList();
			},
			getList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.kWhList = [];
					this.pageIndex = 1;
				}
				var data = {
					pageIndex: this.pageIndex,
					pageSize: 5,
					companyId: this.companyId
				};
				API.homePageKwh(data).then((res) => {
					uni.hideLoading()
					this.kWhList = [
						...this.kWhList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
			
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			change(index) {
				this.current = index;
			},
			backStatistics() {
				uni.navigateBack()
			},
			toElectronicMonitoring(item) {
				uni.navigateTo({
					url: '/pages/equipmentDataMonitoring/electronicMonitoring?id=' + item.id + '&name=' + item.name
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.back {
		z-index: 999;
		width: 200rpx;
	}
	/deep/.u-drawer-content {
		margin-top: 88rpx;
	}
	
	
	.tabs-box{
		background-color: #fff;
		display: flex;
		align-items: center;
		.tabs{
			width: 80%;
		}
		.icon{
			margin-left: auto;
			margin-right: 24rpx;
		}
	}
	.popup-tabs {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding-top: 44px;
		padding-right: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
	
		.tabs {
			width: 80%;
		}
	}
	
	.tabs-options {
		display: flex;
		padding: 24rpx 32rpx 0;
		flex-wrap: wrap;
	
		.item {
			width: 25%;
			margin-bottom: 40rpx;
		}
	}
  
  // 用电量合计
  .total{
	  padding: 24rpx 32rpx;
	  background: linear-gradient(90deg, rgba(49,110,207,1) 2%,rgba(37,138,255,1) 100%);
	  display: flex;
	  .company{
		  .name{
			  color: rgba(255,255,255,1);
			  font-size: 36rpx;
			  font-weight: bold;
		  }
		  .amount{
			  color:#f2f4f6 ;
			  margin-top: 4rpx;
		  }
	  }
	  .infos{
		  display: flex;
		  margin-left: auto;
		  .infos-item{
			  margin-left: 32rpx;
			  text-align: center;
			  .number{
				  color: rgba(255,255,255,1);
				  font-size: 32rpx;
				  font-weight: bold;
			  }
			  .time{
				  color:#f2f4f6 ;
				  margin-top: 4rpx;
			  }
		  }
	  }
  }
  
  
  
   // 用电量
   .main{
	   background-color: #fff;
	   .item{
		   padding: 32rpx;
		   display: flex;
		   align-items: center;
		   border-bottom: 1px solid rgba(245,245,245,1);
		   .icon{
			   width: 72rpx;
			   height: 72rpx;
			   border-radius: 4px;
			   background-color: rgba(219,234,255,1);
			   display: flex;
			   align-items: center;
			   justify-content: center;
			   .img{
				   width: 48rpx;
				   height: 48rpx;
			   }
		   }
		   .equipment{
				 width: 30%;
			   margin-left: 16rpx;
			   .equipment1{
				   color: rgba(51,51,51,1);
				   font-size: 32rpx;
				   font-weight: bold;
			   }
			   .equipment2{
				   color: rgba(119,119,119,1);
			   }
		   }
		   .electricity{
			   display: flex;
			   justify-content: space-between;
			   flex: 1;
			   margin-left: 48rpx;
			   text-align: center;
			   .electricity-item{
					 width: 30%;
				   .number{
					   color: rgba(51,51,51,1);
					   font-size: 32rpx;
					   font-weight: bold;
				   }
				   .date{
					   color: rgba(119,119,119,1);
					   margin-top: 4rpx;
				   }
			   }
		   }
	   }
   }
</style>