<style lang='scss' scoped>
.leakageCurrent{
	width: 100%;
	min-height: 1206rpx;
	background-color: #F9F9F9;
	&-chart-ctn{
		padding: $paddingTB $paddingLR;
	}
	&-chart{
		padding: 20rpx 0;
		background-color: #fff;
		&-title{
			text-align: center;
		}
	}
	&-info-list{
		padding: $paddingTB $paddingLR;
	}
	&-info-box{
		background-color: #fff;
		padding: 0 10rpx;
		margin-bottom: 20rpx;
		&-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 20rpx;
			border-bottom: 1px solid #eee;
		}
		&-detail{
			padding: 10rpx 30rpx;
			background-color: #1C9AFF;
			color: #fff;
			border-radius: 30rpx;
		}
		&-content{
			padding: 30rpx 0;
			text-align: center;
		}
		&-current{
			font-size: 30px;
			padding: 0 20rpx;
			color: #FA6400;
		}
	}
}
</style>
<template>
	<view class="leakageCurrent">
		<headerSelect @onDateChangeFn="hello" :defaultDate="dateVal"></headerSelect>
		<!-- <view class="leakageCurrent-chart-ctn">
			<view class="leakageCurrent-chart">
				<view class="leakageCurrent-chart-title">2020-11漏电流情况</view>
				<columnScroll :chartData="chartData" width="670" height="400"></columnScroll>
			</view>
		</view> -->
		<view class="leakageCurrent-info-list">
			<view class="leakageCurrent-info-box" v-for="(item, index) in leakageList" :key="index">
				<view class="leakageCurrent-info-box-header">
					<view class="">
						<tuiIcon name="ditu2" color="#1C9AFF"></tuiIcon>
						<text class="text-bold pl10">{{ item.deviceSpaceName + ' ' + item.deviceName }}</text>
					</view>
					<view class="leakageCurrent-info-box-detail" @click="goDetailFn(item)">详情</view>
				</view>
				<view class="leakageCurrent-info-box-content">
					<text class="">漏电流</text>
					<text class="leakageCurrent-info-box-current">{{ item.leakageCurrent }}</text>
					<text class="">mA</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import headerSelect from "@/components/electricalSafe/headerSelect.vue";
	import columnScroll from "@/components/uchartComponents/column-scroll.vue"
	export default {
		data() {
			return {
				dateVal:null,
				chartData:null,
				projectId: '',
				leakageList: [],
			}
		},
		components:{headerSelect,columnScroll},
		onLoad(e) {
			this.projectId = e.projectId
			this.dateVal = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm');
			this.getServerData();
		},
		methods: {
			getServerData(){
				let _self = this;
				// uni.request({
				// 	url: 'https://www.ucharts.cn/data.json',
				// 	data:{
				// 	},
				// 	success: function(res) {
				// 		console.log(res.data.data)
				// 		// let LineA={categories:[],series:[]};
				// 		// //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// 		// LineA.categories=res.data.data.LineA.categories;
				// 		// LineA.series=res.data.data.LineA.series;
				// 		// _self.chartData = LineA;
						
				// 		_self.chartData = {categories:[],series:[]};
				// 		_self.chartData.categories = res.data.data.LineA.categories;
				// 		_self.chartData.series = res.data.data.LineA.series;
				// 		console.log(_self.chartData,"chartData");
				// 		// _self.textarea = JSON.stringify(res.data.data.LineA);
				// 		// _self.showLineA("canvasLineA",LineA);
						
						
				// 	},
				// 	fail: () => {
				// 		// _self.tips="网络错误，小程序端请检查合法域名";
				// 	},
				// });
				let obj = {
					projectId: this.projectId
				}
				this.$get("/app/electrical/safety/leakage-new", obj).then((res)=>{
					console.log(res, "ressssssssssss");
					if (res.code === 200) {
						this.leakageList = res.data
					}
				}).catch((err)=>{
					console.log(err)
				})
			},
			hello(){},
			goDetailFn(item) {
				uni.navigateTo({
					url:`./leakage-detail?deviceId=${item.deviceId}&deviceName=${item.deviceName}&deviceSpaceName=${item.deviceSpaceName}`
				})
			}
		}
	}
</script>
