<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;
		}
	}
	&-leakage{
		margin-top: 20rpx;
		&-title{
			padding: 20rpx 30rpx;
			font-weight: bold;
		}
		&-content{
			background-color: #fff;
			padding: 30rpx 0;
		}
		&-switch{
			display: flex;
			border: 1px solid #FF6600;
			width: 600rpx;
			margin: 0 auto;
			&-box{
				width: 200rpx;
				text-align: center;
				padding: 16rpx 0;
				border-right: 1px solid #ff6600;
				&:last-child{
					border-right: none;
				}
			}
			/* .middle-box{
				border-left: 1px solid #ff6600;
				border-right: 1px solid #ff6600;
			} */
			.leakageAction{
				background-color: #ff6600;
				color: #fff;
			}
		}
		&-chart{
			width: 100%;
			height: 550rpx;
			margin-top: 30rpx;
			&-table{
				width: 100%;
				height: 100%;
				&-list{
					height: 480rpx;
					overflow: auto;
				}
			}
		}
	}
}
</style>
<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>
		<!-- 漏电 -->
		<view class="historyCurve-leakage">
			<view class="historyCurve-leakage-title">
				<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
				<text class="pl20">漏电</text>
			</view>
			<view class="historyCurve-leakage-content">
				<view class="historyCurve-leakage-switch">
					<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
					:class="{leakageAction:leakageCurrentPickIndex==index}" @click="switchLeakageFn(item,index)">{{item}}</view>
				</view>
				<view class="historyCurve-leakage-chart">
					<columnScroll canvasId="leakageColumn" @onRenderFinsh="onRenderFinshFn1" v-if="leakageChartA" v-show="leakageCurrentPickIndex==0" :chartData="inColumnData"></columnScroll>
					<lineScroll v-if="leakageChartB" canvasId="leakageLine" v-show="leakageCurrentPickIndex==1" :chartData="inColumnData"></lineScroll>
					<htable v-show="leakageCurrentPickIndex==2" :prodDataList="inColumnData"></htable>
				</view>
			</view>
		</view>
		<!-- 电压 -->
		<view class="historyCurve-leakage">
			<view class="historyCurve-leakage-title">
				<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
				<text class="pl20">电压</text>
			</view>
			<view class="historyCurve-leakage-content">
				<view class="historyCurve-leakage-switch">
					<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
					:class="{leakageAction:voltageCurrentPickIndex==index}" @click="switchVoltageFn(item,index)">{{item}}</view>
				</view>
				<view class="historyCurve-leakage-chart">
					<columnScroll canvasId="voltageColumn" @onRenderFinsh="onRenderFinshFn2" v-if="voltageChartA" v-show="voltageCurrentPickIndex==0" :chartData="uColumnData"></columnScroll>
					<lineScroll v-if="voltageChartB" canvasId="voltageLine" v-show="voltageCurrentPickIndex==1" :chartData="uColumnData"></lineScroll>
					<htable v-show="voltageCurrentPickIndex==2" :prodDataList="uColumnData"></htable>
				</view>
			</view>
		</view>
		<!-- 电流 -->
		<view class="historyCurve-leakage">
			<view class="historyCurve-leakage-title">
				<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
				<text class="pl20">电流</text>
			</view>
			<view class="historyCurve-leakage-content">
				<view class="historyCurve-leakage-switch">
					<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
					:class="{leakageAction:electricCurrentPickIndex==index}" @click="switchElectricFn(item,index)">{{item}}</view>
				</view>
				<view class="historyCurve-leakage-chart">
					<columnScroll canvasId="electricColumn" @onRenderFinsh="onRenderFinshFn3" v-if="electricChartA" v-show="electricCurrentPickIndex==0" :chartData="iColumnData"></columnScroll>
					<lineScroll v-if="electricChartB" canvasId="electricLine" v-show="electricCurrentPickIndex==1" :chartData="iColumnData"></lineScroll>
					<htable v-show="electricCurrentPickIndex==2" :prodDataList="iColumnData" ></htable>
				</view>
			</view>
		</view>
		<!-- 温度1 -->
		<view class="historyCurve-leakage">
			<view class="historyCurve-leakage-title">
				<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
				<text class="pl20">线路1温度</text>
			</view>
			<view class="historyCurve-leakage-content">
				<view class="historyCurve-leakage-switch">
					<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
					:class="{leakageAction:temperatureCurrentPickIndex==index}" @click="switchTemperatureFn(item,index)">{{item}}</view>
				</view>
				<view class="historyCurve-leakage-chart">
					<columnScroll canvasId="temperatureColumn" @onRenderFinsh="onRenderFinshFn4" v-if="temperatureChartA" v-show="temperatureCurrentPickIndex==0" :chartData="lineRoad1ColumnData"></columnScroll>
					<lineScroll v-if="temperatureChartB" canvasId="temperatureLine" v-show="temperatureCurrentPickIndex==1" :chartData="lineRoad1ColumnData"></lineScroll>
					<htable v-show="temperatureCurrentPickIndex==2" :prodDataList="lineRoad1ColumnData"></htable>
				</view>
			</view>
		</view>
		<!-- 温度2 -->
		<view class="historyCurve-leakage">
			<view class="historyCurve-leakage-title">
				<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
				<text class="pl20">线路2温度</text>
			</view>
			<view class="historyCurve-leakage-content">
				<view class="historyCurve-leakage-switch">
					<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
					:class="{leakageAction:temperatureCurrent2PickIndex==index}" @click="switchTemperature2Fn(item,index)">{{item}}</view>
				</view>
				<view class="historyCurve-leakage-chart">
					<columnScroll canvasId="temperatureColumn2" @onRenderFinsh="onRenderFinshFn5" v-if="temperature2ChartA" v-show="temperatureCurrent2PickIndex==0" :chartData="lineRoad2ColumnData"></columnScroll>
					<lineScroll v-if="temperature2ChartB" canvasId="temperatureLine2" v-show="temperatureCurrent2PickIndex==1" :chartData="lineRoad2ColumnData"></lineScroll>
					<htable v-show="temperatureCurrent2PickIndex==2" :prodDataList="lineRoad2ColumnData"></htable>
				</view>
			</view>
		</view>
		<!-- 温度3 -->
		<view class="historyCurve-leakage">
			<view class="historyCurve-leakage-title">
				<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
				<text class="pl20">线路3温度</text>
			</view>
			<view class="historyCurve-leakage-content">
				<view class="historyCurve-leakage-switch">
					<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
					:class="{leakageAction:temperatureCurrent3PickIndex==index}" @click="switchTemperature3Fn(item,index)">{{item}}</view>
				</view>
				<view class="historyCurve-leakage-chart">
					<columnScroll canvasId="temperatureColumn3" @onRenderFinsh="onRenderFinshFn6" v-if="temperature3ChartA" v-show="temperatureCurrent3PickIndex==0" :chartData="lineRoad3ColumnData"></columnScroll>
					<lineScroll v-if="temperature3ChartB" canvasId="temperatureLine3" v-show="temperatureCurrent3PickIndex==1" :chartData="lineRoad3ColumnData"></lineScroll>
					<htable v-show="temperatureCurrent3PickIndex==2" :prodDataList="lineRoad3ColumnData"></htable>
				</view>
			</view>
		</view>
		<!-- 温度4 -->
		<view class="historyCurve-leakage">
			<view class="historyCurve-leakage-title">
				<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
				<text class="pl20">线路4温度</text>
			</view>
			<view class="historyCurve-leakage-content">
				<view class="historyCurve-leakage-switch">
					<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
					:class="{leakageAction:temperatureCurrent4PickIndex==index}" @click="switchTemperature4Fn(item,index)">{{item}}</view>
				</view>
				<view class="historyCurve-leakage-chart">
					<columnScroll canvasId="temperatureColumn4" v-if="temperature4ChartA" v-show="temperatureCurrent4PickIndex==0" :chartData="lineRoad4ColumnData"></columnScroll>
					<lineScroll v-if="temperature4ChartB" canvasId="temperatureLine4" v-show="temperatureCurrent4PickIndex==1" :chartData="lineRoad4ColumnData"></lineScroll>
					<htable v-show="temperatureCurrent4PickIndex==2" :prodDataList="lineRoad4ColumnData"></htable>
				</view>
			</view>
		</view>
		
		<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>
	let _self;
	import uCharts from '@/components/u-charts/u-charts.js';
	import lineScroll from "@/components/uchartComponents/line-scroll.vue";
	import columnScroll from "@/components/uchartComponents/column-scroll.vue";
	import htable from "@/components/historyCmp/table.vue"
	export default {
		data() {
			return {
				deviceId:"",
				prodKey:"",
				appInfo:{},
				
				switchList:[],
				beginDatePickerShow:false,
				endDatePickerShow:false,
				
				currentSelectorValue:{},
				selectorData:[],
				
				beginDate:"",
				endDate:"",
				params:{
					year: true,
					month: true,
					day: true,
					timestamp: true, // 1.3.7版本提供
				},
				historyCurveData:null, // 历史曲线数据
				
				leakageCurrentPickIndex:null, // 下标
				voltageCurrentPickIndex:null,
				electricCurrentPickIndex:null,
				temperatureCurrentPickIndex:null,
				temperatureCurrent2PickIndex:null,
				temperatureCurrent3PickIndex:null,
				temperatureCurrent4PickIndex:null,
				
				// columnData:null,
				// columnDataB:null,
				// columnDataC:null,
				// columnDataD:null,
				
				// lineAData:null,
				// lineADataB:null,
				// lineADataC:null,
				// lineADataD:null,
				
				leakageChartA:false,
				voltageChartA:false,
				electricChartA:false,
				temperatureChartA:false,
				temperature2ChartA:false,
				temperature3ChartA:false,
				temperature4ChartA:false,
				
				leakageChartB:false,
				voltageChartB:false,
				electricChartB:false,
				temperatureChartB:false,
				temperature2ChartB:false,
				temperature3ChartB:false,
				temperature4ChartB:false,
				
				uColumnData:null,// 电压数据
				inColumnData:null,// 漏电流数据
				iColumnData:null, // 电流数据
				lineRoad1ColumnData:null, // 线路1温度
				lineRoad2ColumnData:null, // 线路2温度
				lineRoad3ColumnData:null, // 线路3温度
				lineRoad4ColumnData:null, // 线路4温度
			}
		},
		components:{lineScroll,columnScroll,htable},
		onLoad(e) {
			_self = this;
			this.initVueDataFn();
			// 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;
			console.log(e,"e");
			// this.cWidth=uni.upx2px(750);
			// this.cHeight=uni.upx2px(550);
			
		},
		onReady() {
			this.getDeviceInfoListFn();
		},
		methods: {
			// onRenderFinshFn1(e){
				// console.log(e,"ok?");
				// setTimeout(()=>{
					// _self.temperatureChartA = true;
				// 	setTimeout(()=>{
				// 		_self.temperature2ChartA = true;
				// 		setTimeout(()=>{
				// 			_self.temperature3ChartA = true;
				// 			setTimeout(()=>{
				// 				_self.temperature4ChartA = true;
				// 				setTimeout(()=>{
				// 					_self.voltageChartA = true;
				// 					setTimeout(()=>{
				// 						_self.electricChartA = true;
				// 					},1000) // 电流渲染开关
				// 				},1000) // 电压渲染开关
				// 			},1000) // 温度4渲染开关
				// 		},1000) // 温度3渲染开关
				// 	},1000) // 温度2渲染开关
				// },1000) // 温度1渲染开关
			// },
			onRenderFinshFn1(e){
				_self.voltageChartA = true;
			},
			onRenderFinshFn2(e){
				_self.electricChartA = true;
			},
			onRenderFinshFn3(e){
				_self.temperatureChartA = true;
			},
			onRenderFinshFn4(e){
				_self.temperature2ChartA = true;
			},
			onRenderFinshFn5(e){
				_self.temperature3ChartA = true;
			},
			onRenderFinshFn6(e){
				_self.temperature4ChartA = true;
			},
			
			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();
					}
				}).catch(()=>{
					this.selectorData = []
				})
			},
			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();
				
			},
			selectorOnConfirmFn(e){
				console.log(e,"e");
				this.currentSelectorValue = this.selectorData[e];
				this.getServerData();
			},
			initVueDataFn(){
				// this.pixelRatio = 1;
				this.leakageCurrentPickIndex = 0;
				this.voltageCurrentPickIndex = 0;
				this.electricCurrentPickIndex = 0;
				this.temperatureCurrentPickIndex = 0;
				this.temperatureCurrent2PickIndex = 0;
				this.temperatureCurrent3PickIndex = 0;
				this.temperatureCurrent4PickIndex = 0;
				this.switchList=["柱状图","折线图","数据视图"];
			},
			switchElectricFn(item,index){
				this.electricCurrentPickIndex = index;
				if(index === 1){
					if(_self.electricChartB) return;
					_self.electricChartB = true;
				}
			},
			switchTemperatureFn(item,index){
				this.temperatureCurrentPickIndex = index;
				if(index === 1){
					if(_self.temperatureChartB) return;
					_self.temperatureChartB = true;
				}
			},
			switchTemperature2Fn(item,index){
				this.temperatureCurrent2PickIndex = index;
				if(index === 1){
					if(_self.temperature2ChartB) return;
					_self.temperature2ChartB = true;
				}
			},
			switchTemperature2Fn(item,index){
				this.temperatureCurrent2PickIndex = index;
				if(index === 1){
					if(_self.temperature2ChartB) return;
					_self.temperature2ChartB = true;
				}
			},
			switchTemperature3Fn(item,index){
				this.temperatureCurrent3PickIndex = index;
				if(index === 1){
					if(_self.temperature3ChartB) return;
					_self.temperature3ChartB = true;
				}
			},
			switchTemperature4Fn(item,index){
				this.temperatureCurrent4PickIndex = index;
				if(index === 1){
					if(_self.temperature4ChartB) return;
					_self.temperature4ChartB = true;
				}
			},
			switchVoltageFn(item,index){
				this.voltageCurrentPickIndex = index;
				if(index === 1){
					if(_self.voltageChartB) return;
					_self.voltageChartB = true;
				}
			},
			switchLeakageFn(item,index){
				this.leakageCurrentPickIndex = index;
				if(index === 1){
					if(_self.leakageChartB) return;
					_self.leakageChartB = true;
				}
			},
			// 获取数据
			getServerData(){
				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));
					console.log(timestampStr,"timestampStr");
					console.log(currentDayTimestamp,"currentDayTimestamp");
					console.log(lastDayTimeStamp,"lastDayTimeStamp");
				const userToken = uni.getStorageSync('userToken');
				// console.log(_self.currentSelectorValue.deviceKey,"_self.currentSelectorValue.deviceKey");
				this.$get("/app/common/appInfo").then((res)=>{
					console.log(res,"Ress");
					// this.appInfo = res.data;
					uni.request({
						url:_self.$config.iotOsBaseUrl + "/openapi/sign/dev/data/upload/list",
						method:"POST",
						header:{
							appkey:res.data.appkey,
							sign:res.data.sign,
							timestamp:res.data.timestamp,
							Authorization:userToken
						},
						data:{
							cmd: "up",
							current: 1,
							deviceKey: _self.currentSelectorValue.deviceKey,
							fields: "i,u,in,t8,t6,t4,t2,t7,t5,t3,t1",
							listWhere: [
								{
									"field": "time",
									"operator": "gt_eq",
									"val":currentDayTimestamp,
									"valType": "time"
								},
								{
									"field": "time",
									"operator": "lt",
									"val": lastDayTimeStamp,
									"valType": "time"
								}
							],
							orderType: 1,
							prodPk: _self.currentSelectorValue.prodKey,
							size: 99999
						},
						success:function(res) {
							console.log(res,"resssASSSSS");
							if(res.data.code !=200 || res.data.data.records.length==0) {
								_self.$tui.toast("无数据",3000)
								return;
							}
							let timeArrList = [],
								uList = [],
								iList = [],
								inList = [],
								lineRoadOneT1List = [],
								lineRoadOneT2List = [],
								lineRoadTwoT3List = [],
								lineRoadTwoT4List = [],
								lineRoadThreeT5List = [],
								lineRoadThreeT6List = [],
								lineRoadFourT7List = [],
								lineRoadFourT8List = [];
							// {
							// 	series: [
								// 	{name: "成交量A", data: [35, 8, 25, 37, 4, 20]},
								// 	{name: "成交量B", data: [70, 40, 65, 100, 44, 68]},
								// ],
							// 	categories:[2021,2020,2022]
							// }
							// this.uColumnData = {
							// 	series:[{name:""}],
							// 	categories:timeArrList
							// }
							res.data.data.records.forEach((item,index)=>{
								// 解决ios端转换时间戳时间格式
								if(isIos){
									let createTime = item.time.replace(/-/g,'/');
									timeArrList.push(_self.$u.timeFormat(new Date(createTime).getTime(), 'hh:MM:ss') || "-");
								}else{
									timeArrList.push(_self.$u.timeFormat(new Date(item.time).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);
							})
							_self.inColumnData = {
								series:[{name:"漏电流(A)",data:inList}],
								categories:timeArrList
							}
							_self.uColumnData = {
								series:[{name:"电压(V)",data:uList}],
								categories:timeArrList
							}
							_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; // 漏电渲染开关
							
							console.log(_self.uColumnData,"_self.uColumnData");
						},
						fail: (err) => {
							console.log(err,'errASSS');
						}
					})
				})
				
				// uni.request({
				// 	url: 'https://www.ucharts.cn/data.json',
				// 	data:{
				// 	},
				// 	success: function(res) {
				// 		console.log(res.data.data)
				// 		_self.historyCurveData = res.data.data;
				// 		//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// 		// _self.columnData = {categories:[],series:[]};
				// 		// _self.columnData.categories=res.data.data.LineA.categories;
				// 		// _self.columnData.series=res.data.data.LineA.series;
				// 		// _self.leakageChartA = true;
						
				// 		// setTimeout(()=>{
				// 		// _self.columnDataB = {categories:[],series:[]};
				// 		// _self.columnDataB.categories=res.data.data.LineA.categories;
				// 		// _self.columnDataB.series=res.data.data.LineA.series;
				// 		// setTimeout(()=>{
				// 		// 	_self.voltageChartA = true;
				// 		// },1000)
				// 		_self.columnDataC = {categories:[],series:[]};
				// 		_self.columnDataC.categories=res.data.data.LineA.categories;
				// 		_self.columnDataC.series=res.data.data.LineA.series;
				// 		setTimeout(()=>{
				// 			_self.temperatureChartA = true;
				// 		},2000)
				// 		// _self.columnDataD = {categories:[],series:[]};
				// 		// _self.columnDataD.categories=res.data.data.LineA.categories;
				// 		// _self.columnDataD.series=res.data.data.LineA.series;
				// 		// setTimeout(()=>{
				// 		// 	_self.electricChartA = true;
				// 		// },3000)
				// 	},
				// 	fail: () => {
				// 		_self.tips="网络错误，小程序端请检查合法域名";
				// 	},
				// });
			},
		}
	}
</script>
