<style lang='scss' scoped>
.tempDetail{
	width: 100%;
	height: 100%;
	background-color: #F9F9F9;
	overflow-y: auto;
	&-title{
		padding: $paddingTB $paddingLR;
		background-color: #fff;
		box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08);
	}
	&-date-switch{
		width: 350rpx;
		display: flex;
		margin: 0 auto;
		margin-top: 20rpx;
		border: 1px solid #FF6600;
		&-day,&-month{
			width: 50%;
			text-align: center;
			padding: 12rpx 0;
			background-color: #fff;
			color: #111;
		}
	}
	&-time{
		text-align: center;
		padding: 20rpx 0;
	}
	.canvas-columnChart{
		width: 100%;
		height: 500rpx;
		background-color: #fff;
	}
	.switchAction{
		background-color:#FF6600;
		color: #fff;
	}
	&-date-table{
		display: flex;
		padding: 10rpx 20rpx;
		overflow-x: auto;
		width: 100%;
		font-size: 22rpx;
		background-color: #fff;
		&::-webkit-scrollbar {
		  display: none; /* Chrome Safari */
		}
		&-box{
			min-width: 100rpx;
			text-align: center;
			.box-top,.box-bottom{
				width: 100%;
			}
			&:last-child{
				padding-right: 20rpx;
			}
		}
	}
	&-info{
		padding: $paddingTB $paddingLR;
		margin-top: 20rpx;
		&-date-picker{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1px solid #E8EBF2;
			background-color: #fff;
		}
		&-list{
			padding: 0rpx 30rpx;
			background-color: #fff;
		}
		&-box{
			display: flex;
			justify-content: space-between;
			padding-top: 16rpx;
			padding-bottom: 16rpx;
			border-bottom: 1px solid #E8EBF2;
			&:last-child{
				border-bottom: none;
				padding-bottom: 0;
			}
		}
	}
}
</style>
<template>
	<view class="tempDetail">
		<view class="tempDetail-title">{{ deviceSpaceName + ' ' + deviceName }}</view>
		<view class="tempDetail-date-switch">
			<view :class="['tempDetail-date-switch-day', dateType === 'day' ? 'switchAction' : '']" @click="changeDate('day')">日</view>
			<view :class="['tempDetail-date-switch-month', dateType === 'month' ? 'switchAction' : '']" @click="changeDate('month')">月</view>
		</view>
		<view class="tempDetail-time">{{ date ? date : $u.timeFormat(new Date().getTime(), this.format) }}</view>
		<canvas canvas-id="columnChartId" class="canvas-columnChart" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
		<!-- <view class="tempDetail-date-table">
			<view class="tempDetail-date-table-box" v-for="(item, index) in categories" :key="index" :style="{backgroundColor:currentIndex===index?'#FA6400':''}">
				<view class="box-top">{{ item }}</view>
				<view class="box-bottom">12-1</view>
			</view>
		</view> -->
		<view class="tempDetail-info">
			<view class="tempDetail-info-date-picker">
				<u-button size="mini" @click="changeTimeIndex('sub')" :disabled="timeIndex === 0"><u-icon name="play-left-fill"></u-icon></u-button>
				<view>
					{{ categories[timeIndex] }}
				</view>
				<u-button size="mini" @click="changeTimeIndex('add')" :disabled="timeIndex === categories.length - 1"><u-icon name="play-right-fill"></u-icon></u-button>
			</view>
			<view class="tempDetail-info-list">
				<view class="tempDetail-info-box" v-for="(val, key) in dataObj" :key="key" >
					<view class="">{{ key }}</view>
					<view class="">{{ val[timeIndex] + '℃' }}</view>
					<view class="" style="color:#59C141">安全</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	let _self;
	export default {
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				canvaLineA:null,
				currentIndex:3,
				dateType: '',
				deviceId: '',
				deviceName: '',
				deviceSpaceName: '',
				date: null,
				categories: [],
				format: 'yyyy-mm-dd',
				dataObj: {},
				timeIndex: null,
			}
		},
		watch: {
			format: {
				handler (newData, oldData) {
					if (newData) {
						this.date = this.$u.timeFormat(new Date().getTime(), newData);
						this.getServerData()
					}
				},
				immediate: false
			}
		},
		onLoad(e) {
			_self = this;
			this.deviceId = e.deviceId
			this.deviceName = e.deviceName
			this.deviceSpaceName = e.deviceSpaceName
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.dateType = 'day';
			this.timeIndex = 0;
			this.getServerData();
		},
		methods: {
			toJSON(){},
			getServerData(){
				// 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.textarea = JSON.stringify(res.data.data.LineA);
				// 		// _self.showLineA("columnChartId",LineA);
				// 	},
				// 	fail: () => {
				// 		_self.tips="网络错误，小程序端请检查合法域名";
				// 	},
				// });
				let obj = {
					deviceId: this.deviceId,
					date: this.date || this.$u.timeFormat(new Date().getTime(), this.format)
				}
				this.$get("/app/electrical/safety/temperature-data", obj).then((res)=>{
					console.log(res, "ressssssssssss");
					if (res.code === 200) {
						let data = res.data;
						let series = [];
						this.dataObj ={};
						for (let item in data) {
							if (item === 'name') {
								this.categories = data[item]
							} else {
								let seriesObj = {
									name: item,
									data: data[item]
								};
								series.push(seriesObj);
								this.dataObj[item] = data[item]
							}
						}
						let line = {categories: this.categories, series};
						console.log(line);
						_self.showLineA("columnChartId",line);
					}
				}).catch((err)=>{
					console.log(err)
				})
			},
			showLineA(canvasId,chartData){
				this.canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:5,
					},
					dataLabel:true,
					dataPointShape:true,
					dataPointShapeType:'hollow',
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,//开启图表拖拽功能
					xAxis: {
						disableGrid:false,
						type:'grid',
						gridType:'dash',
						itemCount:4,
						scrollShow:true,
						scrollAlign:'left'
					},
					yAxis: {
						//disabled:true
						gridType:'dash',
						splitNumber:8,
						min:10,
						max:80,
						format:(val)=>{return val.toFixed(0)+'℃'}//如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type:"curve"
							// type: 'straight'
						}
					},
				});
				
			},
			touchLineA(e){
				this.canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				this.canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				this.canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				this.canvaLineA.touchLegend(e);
				this.canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			// 切换日期类型
			changeDate(type) {
				this.dateType = type
				if (type === 'month') {
					this.format = 'yyyy-mm';
				} else if (type === 'day') {
					this.format = 'yyyy-mm-dd';
				}
			},
			changeTimeIndex(type) {
				if (type === 'add') {
					if (this.timeIndex < this.categories.length - 1) {
						this.timeIndex++
					}
				} else {
					if (this.timeIndex > 0) {
						this.timeIndex--
					}
				}
			}
		}
	}
</script>
