<style lang='scss' scoped>
.temperature{
	width: 100%;
	/* height: 100%; */
	background-color: #F9F9F9;
	&-chart-ctn{
		width: 100%;
		/* height: calc(100% - 58rpx); */
		padding: $paddingTB $paddingLR;
	}
	&-canvas{
		width: 100%;
		height: 500rpx;
		/* border: 1px solid red; */
		background-color: #fff;
		.canvas-columnChart{
			width: 100%;
			height: 100%;
		}
	}
	.temperature-mescroll{
		background-color: #F9F9F9;
		
	}
}
.temperature-info-list{
	width: 100%;
	padding: 0 $paddingLR;
	
}
.temperature-info-box{
	/* border: 1px solid red; */
	background-color: #fff;
	
	&-header{
		padding: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #E8EBF2;
		&-text{
			
		}
	}
	&-content{
		display: flex;
		flex-wrap: wrap;
		padding: 24rpx;
		padding-bottom: 14rpx;
	}
	&-temp{
		width: 50%;
		padding-bottom: 10rpx;
		.temp-name{
			color: #666;
		}
		.temp-value{
			color: #59C141;
			font-size: 34rpx;
		}
		.temp-unit{
			color: #59c141;
		}
	}
}
</style>
<template>
	<view class="temperature">
		<headerSelect @onDateChangeFn="hello" :defaultDate="currentDate"></headerSelect>
		<!-- <view class="temperature-chart-ctn">
			<view class="temperature-canvas">
				<canvas canvas-id="columnChartId" class="canvas-columnChart"></canvas>
			</view>
		</view> -->
		<mescroll-body top="0" class="temperature-mescroll" height="600rpx" ref="mescrollRef" bottom="80" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="temperature-info-list">
				<view class="temperature-info-box mb20" v-for="(item, key) in temperatureAlarmList" :key="key" >
					<view class="temperature-info-box-header">
						<view class="temperature-info-box-header-text">
							<tuiIcon name="ditu2" color="#1C9AFF"></tuiIcon>
							<text class="pl20">{{ item.deviceSpaceName + ' ' + item.deviceName }}</text>
						</view>
						<u-tag @click="goDetailFn(item)" text="详情" type="primary" mode="dark" shape="circle" />
					</view>
					<view class="temperature-info-box-content">
						<view class="temperature-info-box-temp" v-for="(val, index) in item.leakageCurrent" :key="index" :style="{textAlign:((index+1)%2)==0?'right':'left'}">
							<text class="temp-name">{{ index + '：' }}</text>
							<text class="temp-value">{{ val }}</text>
							<text class="temp-unit">°C</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>
<script>
	import headerSelect from "@/components/electricalSafe/headerSelect.vue";
	import uCharts from '@/components/u-charts/u-charts.js';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	let _self;
	export default {
		data() {
			return {
				currentDate:null, // 当前日期
				pixelRatio:1,
				columnChartWidth:"",
				columnChartHeight:"",
				temperatureAlarmList:[],
				canvaColumn:null,
				projectId: null,
			}
		},
		components:{headerSelect},
		mixins:[MescrollMixin],
		onLoad(param) {
			_self = this;
			this.currentDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm');
			this.projectId = param.projectId
			this.columnChartWidth = uni.upx2px(670);
			this.columnChartHeight = uni.upx2px(500);
			
			let Column={
				categories:[],
				series:[],
			}
			let	chartData = [];
			let arr = [{
				alarmTotal: 24,
				ratio: "50.00",
				typeCode: "a00002",
				typeName: "漏电报警"
			},{
				alarmTotal: 26,
				ratio: "50.00",
				typeCode: "a00002",
				typeName: "1电报警"
			},{
				alarmTotal: 28,
				ratio: "50.00",
				typeCode: "a00002",
				typeName: "2电报警"
			},{
				alarmTotal: 30,
				ratio: "50.00",
				typeCode: "a00002",
				typeName: "3电报警"
			}]
			arr.map((item)=>{
				Column.categories.push(item.typeName);
				chartData.push(item.alarmTotal)
			})
			Column.series = [{
					// area: [74.95, 284, 155, 295],
					color: "green",
					data: chartData,
					index: 0,
					legendShape: "rect",
					name: "安全",
					pointShape: "circle",
					show: true,
					type: "column"
				},{
					// area: [74.95, 284, 155, 295],
					color: "yellow",
					data: chartData,
					index: 0,
					legendShape: "rect",
					name: "预警",
					pointShape: "circle",
					show: true,
					type: "column"
				},{
					// area: [74.95, 284, 155, 295],
					color: "red",
					data: chartData,
					index: 0,
					legendShape: "rect",
					name: "报警",
					pointShape: "circle",
					show: true,
					type: "column"
				}]
			console.log(Column.categories,"Column.categories");
			this.showColumn("columnChartId",Column);
		},
		methods: {
			goDetailFn(item){
				uni.navigateTo({
					url:`./temperature-detail?deviceId=${item.deviceId}&deviceName=${item.deviceName}&deviceSpaceName=${item.deviceSpaceName}`
				})
			},
			/*上拉加载的回调*/
			upCallback(page) {
				console.log(page,"page");
				let obj = {
					projectId: this.projectId
				}
				this.$get("/app/electrical/safety/temperature-new", obj).then((res)=>{
					console.log(res,"ressssssssssss");
					if (res.data && res.data.length>0) {
						// 接口返回的当前页数据列表 (数组)
						this.temperatureAlarmList = res.data; 
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = res.data.length; 
						//设置列表数据
						// if(pageNum == 1) this.temperatureAlarmList = []; //如果是第一页需手动置空列表
						// this.temperatureAlarmList = this.temperatureAlarmList.concat(curPageData); //追加新数据
						// this.mescroll.endBySize(curPageLen, res.total); // 推荐
						// this.mescroll.endByPage(curPageLen, res.data.total)
						this.mescroll.endSuccess(curPageLen);
					} else{
						this.temperatureAlarmList = [];
						// this.mescroll.endErr();
						// this.mescroll.showEmpty();
						// this.mescroll.endUpScroll(true);
					}
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			hello(e){
				console.log("abc",e);
			},
			toJSON(){},
			touchColumn(e){
				this.canvaColumn.scrollStart(e);
			},
			moveColumn(e) {
				this.canvaColumn.scroll(e);
			},
			touchEndColumn(e) {
				this.canvaColumn.scrollEnd(e);
				this.canvaColumn.touchLegend(e, {
					animation:true,
				});
				this.canvaColumn.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			showColumn(canvasId,chartData){
				this.canvaColumn = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					fontSize:11,
					padding:[5,15,15,15],
					legend:{
						show:true,
						position:'top',
						float:'center',
						itemGap:30,
						padding:5,
						margin:5,
						//backgroundColor:'rgba(41,198,90,0.2)',
						//borderColor :'rgba(41,198,90,0.5)',
						borderWidth :1
					},
					dataLabel:true,
					dataPointShape:true,
					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:4,
						min:10,
						// max:180,
						format:(val)=>{return val.toFixed(0)}//如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.columnChartWidth*_self.pixelRatio,
					height: _self.columnChartHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'group',
							width: _self.columnChartWidth*_self.pixelRatio*0.45/chartData.categories.length
						}
					},
				});
				// let canvaColumn = new uCharts({
				// 	$this:_self,
				// 	canvasId: canvasId,
				// 	type: 'column',
				// 	padding:[25,15,10,15],
				// 	legend:{
				// 		show:false,
				// 	// 	padding:5,
				// 	// 	lineHeight:11,
				// 	// 	margin:0,
				// 	},
				// 	fontSize:11,
				// 	background:'#FFFFFF',
				// 	pixelRatio:_self.pixelRatio,
				// 	animation: true,
				// 	// enableScroll: true,
				// 	categories: chartData.categories,
				// 	series: chartData.series,
					
				// 	xAxis: {
				// 		disableGrid:true,
				// 	},
				// 	yAxis: {
				// 		data:[{
				// 			min:0,
				// 			position:'right',
				// 			axisLine:false,	
				// 			format:(val)=>{return val.toFixed(0)},
				// 		}]
				// 	},
				// 	dataLabel: true,
				// 	width: _self.columnChartWidth*_self.pixelRatio,
				// 	height: _self.columnChartHeight*_self.pixelRatio,
				// 	extra: {
				// 		column: {
				// 			type:'group',
				// 			width: _self.columnChartWidth*_self.pixelRatio*0.45/chartData.categories.length
				// 		}
				// 	  }
				// });
			},
		}
	}
</script>
