<template>
	<view class="historyCurve">
		<view class="historyCurve-header">
			<view class="historyCurve-header-date" @click="beginDatePickerShow = true">
				<text class="pr15">{{currentSelectorValue.deviceName}}</text>
				<u-icon name="arrow-down-fill" color="#999999" size="18"></u-icon>
			</view>
			<view class="historyCurve-header-date" @click="endDatePickerShow = true">
				<text class="pr15">{{endDate}}</text>
				<u-icon name="arrow-down-fill" color="#999999" size="18"></u-icon>
			</view>
		</view>
		<u-tabs
			:list="list" 
			:current="current" 
			:is-scroll="false"
			:font-size="28"
			:active-color="'#1C9AFF'"
			:bold="false"
			item-width="25%"
			@change="change"
		>
		</u-tabs>
		<!-- 加载中 -->
		<template v-if="loadStatus ==='loading'">
			<view class="historyCurve-nodata">
				<u-loading mode="flower" :size="60"></u-loading>
			</view>
		</template>
		<!-- 已加载 -->
		<template v-else-if="loadStatus == 'loaded'">
			<!-- 电压 -->
			<template v-if="current===0">
				<voltage :chartData="uColumnData"></voltage>
			</template>
			<!-- 电流 -->
			<template v-else-if="current===1">
				<electric :chartData="iColumnData"></electric>
			</template>
			<!-- 漏电 -->
			<template v-else-if="current===2">
				<leakage :chartData="inColumnData"></leakage>
			</template>
			<!-- 温度-->
			<!-- <template v-else-if="current===3">
				<temperature :lineRoad1Data="lineRoad1ColumnData"></temperature>
			</template> -->
			<template v-else-if="current===3">
				<temperature :lineRoad1Data="lineRoad1ColumnData" :lineRoad2Data="lineRoad2ColumnData" :lineRoad3Data="lineRoad3ColumnData" :lineRoad4Data="lineRoad4ColumnData"></temperature>
			</template>
		</template>
		<!-- 无数据状态 -->
		<template v-else-if="loadStatus == 'none'">
			<view class="historyCurve-nodata">
				<u-empty text="数据为空~" mode="list"></u-empty>
			</view>
		</template>
		<!-- 加载错误 -->
		<template v-else>
			<view class="historyCurve-nodata">
				<u-empty text="网络开小差啦~" mode="data"></u-empty>
			</view>
		</template>
		
		<u-picker mode="selector" :range="selectorData" range-key="deviceName" v-model="beginDatePickerShow" @confirm="selectorOnConfirmFn"></u-picker>
		<u-picker mode="time" :params="params" v-model="endDatePickerShow" @confirm="endDateConfirmFn"></u-picker>
	</view>
</template>

<script>
	import voltage from './components/voltage.vue'
	import electric from './components/electric.vue'
	import leakage from './components/leakage.vue'
	import temperature from './components/temperature.vue'
	
	let _self;
	export default {
		data() {
			return {
				deviceId:"",
				prodKey:"",
				deviceName:"",
				appInfo:{},
				
				beginDatePickerShow:false,
				endDatePickerShow:false,
				currentSelectorValue:{},
				selectorData:[],
				beginDate:"",
				endDate:"",
				params:{
					year: true,
					month: true,
					day: true,
					timestamp: true, // 1.3.7版本提供
				},
				list: [
					{
						name: '电压'
					},{
						name: '电流'
					},{
						name: '漏电'
					},{
						name: '温度'
					}
				],
				current: 0,
				// historyCurveData: {}, // 历史曲线数据
				uColumnData: {},// 电压数据
				inColumnData: {},// 漏电流数据
				iColumnData: {}, // 电流数据
				lineRoad1ColumnData: {}, // 线路1温度
				lineRoad2ColumnData:{}, // 线路2温度
				lineRoad3ColumnData: {}, // 线路3温度
				lineRoad4ColumnData: {}, // 线路4温度
				loadStatus: 'loading'
			}
		},
		onLoad(e) {
			_self = this;
			// this.beginDate = this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
			this.endDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
			
			this.deviceId = e.deviceId;
			this.prodKey = e.prodKey;
			this.deviceKey = e.deviceKey;
			this.deviceName = e.deviceName;
		},
		onReady() {
			this.getDeviceInfoListFn();
		},
		methods: {
			change(index) {
				this.current = index;
			},
			iniData() {
				this.uColumnData = {};
				this.inColumnData = {};
				this.iColumnData = {};
				this.lineRoad1ColumnData = {};
				this.lineRoad2ColumnData = {};
				this.lineRoad3ColumnData = {};
				this.lineRoad4ColumnData = {};
			},
			getDeviceInfoListFn(){
				this.$get(`/app/device/children/${this.deviceId}`).then((res)=>{
					// console.log(res,"Res");
					if(res.data.length>0){
						// console.log(res,"Res");
						this.selectorData = res.data;
						this.currentSelectorValue = this.selectorData[0];
						this.getServerData();
					}else{
						_self.loadStatus = 'none';
						_self.currentSelectorValue = {deviceName:_self.deviceName};
					}
				}).catch(()=>{
					_self.loadStatus = 'error';
					this.selectorData = [];
				})
			},
			// 获取数据
			getServerData(){
				// console.log(_self.currentSelectorValue, '_self.currentSelectorValue')
				let isIos = false;
				try{
					const res = uni.getSystemInfoSync();
					if(res.system.indexOf("iOS") != -1){
						isIos = true;
					}
					// console.log(isIos,"isIos")
				}catch(e){
					//TODO handle the exception
				}
				// 解决ios端转换时间戳时间格式
				if(isIos){
					this.endDate = this.endDate.replace(/-/g,'/');
				}
				let timestampStr = new Date(this.endDate + " 00:00:00"),
					currentDayTimestamp = timestampStr.getTime(),
					lastDayTimeStamp = (currentDayTimestamp + (24*60*60*1000));
				let startTime = this.$utils.getYMDHMS(currentDayTimestamp);
				let endTime = this.$utils.getYMDHMS(lastDayTimeStamp);
				
				console.log(startTime, endTime)
				this.$get('/iot/dev/data/mcb/top',{deviceId: _self.currentSelectorValue.deviceId, startDate: startTime, endDate: endTime})
				.then(res => {
					// console.log(res, '/mcb/top')
					if(res.code !=200 || res.data == 0) {
						console.log("11")
						_self.leakageChartA = true; // 漏电渲染开关
						_self.loadStatus = 'none';
						_self.iniData();
						// _self.$tui.toast("无数据",2000)
						return;
					}else if(res.data.length<=0){
						console.log("22")
						_self.leakageChartA = true; // 漏电渲染开关
						_self.loadStatus = 'none';
						return;
					}
					console.log("33")
					let timeArrList = [],
						uList = [],
						iList = [],
						inList = [],
						lineRoadOneT1List = [],
						lineRoadOneT2List = [],
						lineRoadTwoT3List = [],
						lineRoadTwoT4List = [],
						lineRoadThreeT5List = [],
						lineRoadThreeT6List = [],
						lineRoadFourT7List = [],
						lineRoadFourT8List = [];
					
					res.data.forEach((item,index)=>{
						// timeArrList.push(_self.$u.timeFormat(item.createTime, 'hh:MM:ss') || "-");
						// 解决ios时间格式问题
						if(isIos){
							let createTime = item.createTime.replace(/-/g,'/');
							timeArrList.push(_self.$u.timeFormat(new Date(createTime).getTime(), 'hh:MM:ss') || "-");
						}else{
							timeArrList.push(_self.$u.timeFormat(new Date(item.createTime).getTime(), 'hh:MM:ss') || "-");
						}
						
						uList.push(item.u || 0);
						iList.push(item.i || 0);
						inList.push(item.in || 0)
						lineRoadOneT1List.push(item.t1 || 0);
						lineRoadOneT2List.push(item.t2 || 0);
						lineRoadTwoT3List.push(item.t3 || 0);
						lineRoadTwoT4List.push(item.t4 || 0);
						lineRoadThreeT5List.push(item.t5 || 0);
						lineRoadThreeT6List.push(item.t6 || 0);
						lineRoadFourT7List.push(item.t7 || 0);
						lineRoadFourT8List.push(item.t8 || 0);
					})
					// console.log(timeArrList, 'timeArrList')
					_self.inColumnData = {
						series:[{name:"漏电流(mA)",data:inList}],
						categories:timeArrList
					}
					
					_self.uColumnData = {
						series:[{name:"电压(V)",data:uList}],
						categories:timeArrList
					}
					
					// console.log(_self.uColumnData, 'uColumnData')
					_self.iColumnData = {
						series:[{name:"电流(A)",data:iList}],
						categories:timeArrList
					}
					_self.lineRoad1ColumnData = {
						series:[
							{name:"进线路1温度(°C)",data:lineRoadOneT1List},
							{name:"出线路1温度(°C)",data:lineRoadOneT2List},
						],
						categories:timeArrList
					}
					_self.lineRoad2ColumnData = {
						series:[
							{name:"进线路2温度(°C)",data:lineRoadTwoT3List},
							{name:"出线路2温度(°C)",data:lineRoadTwoT4List},
						],
						categories:timeArrList
					}
					_self.lineRoad3ColumnData = {
						series:[
							{name:"进线路3温度(°C)",data:lineRoadThreeT5List},
							{name:"出线路3温度(°C)",data:lineRoadThreeT6List},
						],
						categories:timeArrList
					}
					_self.lineRoad4ColumnData = {
						series:[
							{name:"进线路4温度(°C)",data:lineRoadFourT7List},
							{name:"出线路4温度(°C)",data:lineRoadFourT8List},
						],
						categories:timeArrList
					}
					_self.leakageChartA = true; // 漏电渲染开关
					_self.loadStatus = 'loaded';
					
				}).catch((err) => {
					console.log("finally",err)
					_self.leakageChartA = true; // 漏电渲染开关
					_self.loadStatus = 'loaded';
					
				})
					
			},
			selectorOnConfirmFn(e){
				this.currentSelectorValue = this.selectorData[e];
				this.getServerData();
			},
			endDateConfirmFn(e){
				// console.log(e,"eeeeeeeeee");
				this.endDate = `${e.year}-${e.month}-${e.day}`;
				// console.log(this.endDate,"this.endDate");
				// let timestampStr = new Date(this.endDate);
				// console.log(timestampStr,"timestampStr");
				this.getServerData();
				
			}
		},
		components: {
			voltage,
			electric,
			leakage,
			temperature
		}
	}
</script>

<style lang='scss' scoped>
.historyCurve{
	width: 100%;
	/* background-color: #F9F9F9; */
	:not(not) {
		box-sizing: border-box;
	}
	&-header{
		/* position: fixed;
		top: 0;
		left: 0;
		z-index: 100; */
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
		background-color: #fff;
		&-date{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;
		}
	}
	&-nodata{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 600rpx;
		height: 550rpx;
	}
}
</style>
