<style lang='scss' scoped>
.temperatureAlarm{
	width: 100%;
	background-color: #F9F9F9;
	&-chart-ctn{
		padding: $paddingTB $paddingLR;
	}
	&-chart{
		padding: 20rpx 0;
		background-color: #fff;
		&-title{
			text-align: center;
		}
	}
}
/* 列表 */
.temperatureAlarm{
	&-info-list{
		background-color: #F9F9F9;
		padding: 30rpx $paddingLR;
	}
	&-info-box{
		width: 100%;
		border-radius: $uni-border-radius-lg;
		background-color: #fff;
		box-shadow: $box-shadow;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		&:last-child{
			margin-bottom: 0;
		}
		&-msg{
			padding: 20rpx;
			/* border-bottom: 2px dotted #A1A1A1; */
			border-bottom: 1px dashed #A1A1A1;
			position: relative;
		}
		.box-checkbox{
			position: absolute;
			right: -16rpx;
			top: 14rpx;
		}
		.box-dealwith{
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
		}
		.box-left-line{
			width: 8rpx;
			height: 180rpx;
			background: #93CDFC;
			position: absolute;
			z-index: 1;
			left: 20rpx;
			top: 4rpx;
			// left: 40rpx;
			// top: 20rpx;
		}
		&-msg-row{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.msg-row-icon{
				border-radius: $uni-border-radius-circle;
				/* padding: 10rpx; */
				width: 50rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: $main-color;
				z-index: 10;
			}
			.msg-row-text{
				color: #000;
				width: 480rpx;
			}	
		}
		&-bottom{
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
		}
	}
	&-info-box-msg-row-ctn{
		position: relative;
	}
	&-info-box-msg-content{
		display: flex;
	}
	&-info-box-msg-warning{
		width: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FF3F3F;
		font-size: 32rpx;
	}
}
</style>
<template>
	<view class="temperatureAlarm">
		<headerSelect @onDateChangeFn="hello" :defaultDate="dateVal"></headerSelect>
		<view class="temperatureAlarm-chart-ctn">
			<view class="temperatureAlarm-chart">
				<view class="temperatureAlarm-chart-title">24小时温度报警情况</view>
				<lineScroll :chartData="chartData" width="670" height="400"></lineScroll>
			</view>
		</view>
		<bottomSelect :alarmValue="alarmValue" :stateValue="stateValue" @onStateConfirm="onStateConfirmFn" @onAlarmConfirm="onAlarmConfirmFn"></bottomSelect>
		<mescroll-body top="0" ref="mescrollRef" height="860rpx" bottom="80" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="temperatureAlarm-info-list">
				<view class="temperatureAlarm-info-box" v-for="(item,index) in tempAlarmList" :key="index">
					<view class="temperatureAlarm-info-box-msg">
						<!-- <u-checkbox class="box-checkbox" v-if="checkboxShowFlag" v-model="item.checkedFlag"></u-checkbox> -->
						<tuiIcon class="box-dealwith" :name="item.processState==2?'yichuli':'weichuli'" size="80" @click="openDealwithFn(item)" :color="item.totalLineFlag?'#71B943':'#BE2D08'"></tuiIcon>
						<view class="temperatureAlarm-info-box-msg-content">
							<view class="temperatureAlarm-info-box-msg-warning">{{item.alarmDivide=='ALARM'?"报警":"预警"}}</view>
							<view class="temperatureAlarm-info-box-msg-row-ctn">
								<view class="box-left-line"></view>
								<view class="temperatureAlarm-info-box-msg-row">
									<view class="msg-row-icon">
										<tui-icon color="#fff" name="xiangmu" size="26"></tui-icon>
									</view>
									<view class="msg-row-text pl20">项目：{{item.projectName}}</view>
								</view>
								<view class="temperatureAlarm-info-box-msg-row">
									<view class="msg-row-icon">
										<tui-icon color="#fff" name="ditu2" size="26"></tui-icon>
									</view>
									<view class="msg-row-text pl20">地点：{{item.projectAddress}}</view>
								</view>
								<view class="temperatureAlarm-info-box-msg-row">
									<view class="msg-row-icon">
										<tui-icon color="#fff" name="xinpian" size="26"></tui-icon>
									</view>
									<view class="msg-row-text pl20">线路：总线已通</view>
								</view>
							</view>
						</view>
					</view>
					<view class="temperatureAlarm-info-box-bottom">
						<text>时间：{{item.alarmTime}}</text>
						<text>报警类型：{{item.typeName}}</text>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>
<script>
	import headerSelect from "@/components/electricalSafe/headerSelect.vue";
	import bottomSelect from "@/components/electricalSafe/bottomSelect.vue";
	import lineScroll from "@/components/uchartComponents/line-scroll.vue";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	let _self;
	export default {
		data() {
			return {
				dateVal:null, 
				chartData:null,
				alarmValue:"ALARM",
				stateValue:"",
				projectId:"",
				tempAlarmList:[]
			}
		},
		components:{headerSelect,bottomSelect,lineScroll},
		mixins:[MescrollMixin],
		onLoad(e) {
			this.projectId = e.projectId;
			this.dateVal = this.$u.timeFormat(new Date().getTime(),'yyyy-mm');
			this.getServerData();
			_self = this;
		},
		methods: {
			onStateConfirmFn(e){
				this.stateValue = e;
			},
			onAlarmConfirmFn(e){
				this.alarmValue = e;
			},
			hello(e){
				this.dateVal = e;
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				console.log(this.dateVal,"this.dateVal");
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let obj = {
					pageSize:pageSize,
					pageNum:pageNum,
					alarmDivide:this.alarmValue,
					 createDate:this.dateVal,
					projectId:this.projectId,
					// typeCode:"a00007"
				}
				this.$get("/app/alarm/table",obj).then((res)=>{
					console.log(res,"ressssssssssss");
					if (res.rows && res.rows.length>0) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows; 
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length; 
						//设置列表数据
						if(pageNum == 1) this.tempAlarmList = []; //如果是第一页需手动置空列表
						this.tempAlarmList = this.tempAlarmList.concat(curPageData); //追加新数据
						this.mescroll.endBySize(curPageLen, res.total); // 推荐
						// this.mescroll.endByPage(curPageLen, res.data.total)
						// this.mescroll.endSuccess(curPageData.length);
					} else{
						this.tempAlarmList = [];
						this.mescroll.endErr();
						this.mescroll.showEmpty();
						// this.mescroll.endUpScroll(true);
					}
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			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.chartData = LineA;
						// _self.textarea = JSON.stringify(res.data.data.LineA);
						// _self.showLineA("canvasLineA",LineA);
						
						
					},
					fail: () => {
						// _self.tips="网络错误，小程序端请检查合法域名";
					},
				});
			},
		}
	}
</script>
