<style lang='scss' scoped>
.electricity-detail{
	width: 100%;
	&-header{
		display: flex;
		font-size: 24rpx;
		justify-content: space-between;
		padding: $paddingTB $paddingLR;
		background-color: #F5F5F9;
	}
	&-list{
		padding: $paddingTB $paddingLR;
	}
	&-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1px solid #eee;
	}
}
</style>
<template>
	<view class="electricity-detail">
		<headerSelect @onDateChangeFn="onDateChangeFn" :defaultDate="currentDate"></headerSelect>
		<view class="electricity-detail-header">
			<view class="">线路列表</view>
			<view class=""></view>
			<view class="">电量(度)</view>
		</view>
		<view class="electricity-detail-list">
			<view class="electricity-detail-box" v-for="(item,index) in deciveDataList" :key="index">
				<view class="electricity-detail-box-left">
					<tuiIcon :name="getIcon(item.deviceName)" size="50"></tuiIcon>
					<text class="pl15">{{item.deviceName}}</text>
				</view>
				<view class="electricity-detail-box-right" style="color: #FA6400;">{{item.electricity}}</view>
			</view>
			<!-- <view class="electricity-detail-box">
				<view class="electricity-detail-box-left">
					<tuiIcon name="xinpian" size="50"></tuiIcon>
					<text class="pl15">总路</text>
				</view>
				<view class="electricity-detail-box-right" style="color: #FA6400;">1.574</view>
			</view> -->
		</view>
	</view>
</template>
<script>
	import headerSelect from "@/components/electricalSafe/headerSelect.vue"
	export default {
		data() {
			return {
				currentDate:"",
				deciveDataList:[
					{
						icon:"xinpian",
						name:"总路",
						electricity:1.574
					},
					{
						icon:"dianluquanding",
						name:"线路1",
						electricity:1.2
					},
					{
						icon:"dianluquanding",
						name:"线路2",
						electricity:1.1
					},
					{
						icon:"kongdiao",
						name:"空调",
						electricity:0.09
					},
					{
						icon:"dianluquanding",
						name:"照明",
						electricity:1.574
					},
					{
						icon:"chazuo",
						name:"普插",
						electricity:0.1
					},
				],
				projectId: '',
				spaceId: '',
				iconList: [
					{
						icon:"xinpian",
						name:"总路",
					},
					{
						icon:"dianluquanding",
						name:"线路1",
					},
					{
						icon:"dianluquanding",
						name:"线路2",
					},
					{
						icon:"kongdiao",
						name:"空调",
					},
					{
						icon:"dianluquanding",
						name:"照明",
					},
					{
						icon:"chazuo",
						name:"普插",
					},
				]
			}
		},
		components:{headerSelect},
		onLoad(e) {
			this.currentDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm');
			this.projectId = e.projectId;
			this.spaceId = e.spaceId;
			this.getDetail();
		},
		methods: {
			onDateChangeFn(val) {
				this.currentDate = val;
				this.getDetail();
			},
			getDetail(){
				let params = {
					projectId: this.projectId,
					spaceId: this.spaceId,
					date: this.currentDate,
				}
				this.$get('/app/smart/power/info', params).then(res => {
					if(res.code === 200){
						this.deciveDataList = res.data
					}
				})
			},
			getIcon(name) {
				let res = this.iconList.find(item => item.name === name);
				if (res) {
					return res.icon
				} else {
					return "xinpian"
				}
			}
		}
	}
</script>
