<style lang='scss' scoped>
.overload{
	width: 100%;
	background-color: #F9F9F9;
	&-chart-ctn{
		padding: $paddingTB $paddingLR;
	}
	&-chart{
		padding: 20rpx;
		background-color: #fff;
		&-swtich{
			display: flex;
			justify-content: space-between;
			&-current,&-overload{
				width: 50%;
				text-align: center;
				padding-bottom: 16rpx;
				border-bottom: 1px solid #eee;
			}
		}
	}
}
/* 列表 */
.overload{
	&-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;
	}
	.tab-active {
		border-color: #1C9AFF;
		color: #1C9AFF;
	}
}
.alarmInfo-content{
	padding: 70rpx $paddingLR;
	padding-bottom: 40rpx;
	&-row{
		padding-bottom: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	&-bottom-btn{
		padding: 0 30rpx;
		padding-top: 20rpx;
	}
}
</style>
<template>
	<view class="overload">
		<headerSelect @onDateChangeFn="hello" @onDateTypeChangeFn="dateTypeChange" :defaultDate="dateVal"></headerSelect>
		<view class="overload-chart-ctn">
			<view class="overload-chart">
				<view class="overload-chart-swtich" v-if="showType.length > 1">
					<!-- <view class="overload-chart-swtich-current" :style="{borderColor: true?'#1C9AFF':'#eee',color:true?'#1C9AFF':'#eee'}">电流情况</view>
					<view class="overload-chart-swtich-overload">负载情况</view> -->
					<view
						:class="['overload-chart-swtich-overload', tabActive === index ? 'tab-active' : '']"
						v-for="(item, index) in showType"
						:key="index"
						@click="changeTab(item, index)"
					>
						{{ item.typeName }}
					</view>
				</view>
				<areaScroll :chartData="chartData" width="630" height="400"></areaScroll>
			</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="overload-info-list">
				<view class="overload-info-box" v-for="(item,index) in tempAlarmList" :key="index">
					<view class="overload-info-box-msg" @click="openDealwithFn(item)">
						<!-- <u-checkbox class="box-checkbox" v-if="checkboxShowFlag" v-model="item.checkedFlag"></u-checkbox> -->
						<tuiIcon class="box-dealwith" :name="item.processStatus=='PROCESSED'?'yichuli':'weichuli'" size="80" :color="item.processStatus=='PROCESSED'?'#71B943':'#BE2D08'"></tuiIcon>
						<view class="overload-info-box-msg-content">
							<view class="overload-info-box-msg-warning">{{item.alarmDivide=='ALARM'?"报警":"预警"}}</view>
							<view class="overload-info-box-msg-row-ctn">
								<view class="box-left-line"></view>
								<view class="overload-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="overload-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="overload-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">线路：{{item.deviceName}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="overload-info-box-bottom">
						<text>时间：{{item.alarmTime}}</text>
						<text>报警类型：{{item.typeName}}</text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<u-popup v-model="alarmShowFlag" mode="center" :closeable="true" width="80%">
			<view class="alarmInfo-content">
				<view class="alarmInfo-content-row">项目：{{currentPickInfoData.projectName}}</view>
				<view class="alarmInfo-content-row">地址：{{currentPickInfoData.projectAddress}}</view>
				<view class="alarmInfo-content-row">线路：{{currentPickInfoData.deviceName}}</view>
				<view class="alarmInfo-content-row">报警类型：{{currentPickInfoData.typeName}}</view>
				<view class="alarmInfo-content-row">报警时间：{{currentPickInfoData.alarmTime}}</view>
				<view class="alarmInfo-content-bottom-btn">
					<u-button type="primary" shape="circle" @click="projectHandleNowFn(currentPickInfoData)">立即处理</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import headerSelect from "@/components/electricalSafe/headerSelect.vue";
	import bottomSelect from "@/components/electricalSafe/bottomSelect.vue";
	import areaScroll from "@/components/uchartComponents/area-scroll.vue";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	let _self;
	const typeArr = [
		{
			typeCode: 'a1',
			typeName: '短路'
		},
		{
			typeCode: 'a2',
			typeName: '漏电'
		},
		{
			typeCode: 'a5',
			typeName: '过压'
		},
		{
			typeCode: 'a6',
			typeName: '欠压'
		},
		{
			typeCode: 'a11',
			typeName: '电弧'
		},
		{
			typeCode: 'a17',
			typeName: '缺相'
		},
		{
			typeCode: 'a18',
			typeName: '三相负载不平衡'
		},
		{
			typeCode: 'a19',
			typeName: '三相相序'
		},
		{
			typeCode: 'a23',
			typeName: '分闸'
		},
		{
			typeCode: 'a24',
			typeName: '合闸'
		},
	]
	export default {
		data() {
			return {
				dateVal:null, 
				chartData:null,
				alarmValue:"ALARM",
				stateValue:"",
				projectId:"",
				tempAlarmList:[],
				typeCode: "",
				typeArr,
				showType: [],
				tabActive: Number,
				alarmShowFlag: false,
				currentPickInfoData: {},
			}
		},
		components:{headerSelect,bottomSelect,areaScroll},
		mixins:[MescrollMixin],
		onLoad(e) {
			this.projectId = e.projectId;
			this.typeCode = e.typeCode;
			this.showType = this.getTypeNameArr(e.typeCode);
			this.tabActive = 0
			uni.setNavigationBarTitle({
			    title: e.typeName
			});
			this.dateVal = this.$u.timeFormat(new Date(),'yyyy-mm');
			console.log(this.$u)
			// this.dateVal = "2020-12"
			this.getServerData();
			_self = this;
		},
		methods: {
			onStateConfirmFn(e){
				this.stateValue = e;
				this.mescroll.resetUpScroll();
			},
			onAlarmConfirmFn(e){
				this.alarmValue = e;
				this.mescroll.resetUpScroll();
			},
			hello(e){
				console.log(e)
				this.dateVal = e;
				this.mescroll.resetUpScroll();
				this.getServerData(this.tabActive);
			},
			dateTypeChange(e) {
				if (e) {
					let date = new Date(this.dateVal.replace(/\-/g, '/'));
					if (e === 1) {
						this.dateVal = this.$u.timeFormat(date, 'yyyy-mm-dd');
					} else {
						this.dateVal = this.$u.timeFormat(date, 'yyyy-mm');
					}
					this.mescroll.resetUpScroll();
					this.getServerData(this.tabActive);
				}
			},
			/*上拉加载的回调*/
			upCallback(page) {
				
				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,
					typeCodes: this.typeCode,
					processStatus: this.stateValue,
				};
				let url = "/app/alarm/table"
				this.$get(url, obj).then((res)=>{
					// console.log(res,"ressssssssssss");
					// console.log(res.rows && res.rows.length>0,"res.rows && res.rows.length>0");
					if (res.rows && res.rows.length>0) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows; 
						// console.log(curPageData,"curPageData");
						// 接口返回的当前页数据长度 (如列表有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(index = 0){
				// 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;
				// 		console.log(_self.chartData,"chartDatachartData");
				// 		// _self.textarea = JSON.stringify(res.data.data.LineA);
				// 		// _self.showLineA("canvasLineA",LineA);
						
						
				// 	},
				// 	fail: () => {
				// 		// _self.tips="网络错误，小程序端请检查合法域名";
				// 	},
				// });
				let typeCodeList = this.typeCode.split(',');
				let obj = {
					alarmDate: this.dateVal,
					projectId: Number(this.projectId),
					typeCodes: typeCodeList[index]
				}
				console.log('图表参数：', obj)
				this.$get('/app/alarm/chart-data', obj).then((res) => {
					console.log('图表数据：', res)
					if (res.code === 200 && res.data) {
						let list = res.data;
						let line = {
							categories: [],
							series: []
						}
						for (let key in list) {
							if (key === 'name') {
								line.categories = list[key];
							} else {
								let seriesObj = {
									name: key,
									data: list[key]
								};
								line.series.push(seriesObj);
							}
						}
						this.chartData = line
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			// 获取typeCode的中文名称
			getTypeNameArr(typeCode) {
				let codeArr = typeCode.split(',');
				let list = this.typeArr.filter((item) => {
					console.log(codeArr.indexOf(item.typeCode))
					return codeArr.indexOf(item.typeCode) !== -1
				});
				console.log('list', list)
				return list
			},
			// 切换tab标签
			changeTab(item, index) {
				console.log(item, index)
				this.tabActive = index
				this.getServerData(index)
			},
			// 处理告警信息
			openDealwithFn(item){
				console.log(item,"item");
				if(item.processStatus == 'UNPROCESS'){
					this.alarmShowFlag = true;
					this.currentPickInfoData = item;
				}
			},
			projectHandleNowFn(data) {
				this.$post('/app/alarm/batch-update', {recordIds: [data.recordId]}).then(res => {
					if(res.code == 200) {
						this.$tui.toast('处理成功', 3000, true);
						this.mescroll.resetUpScroll();
						this.alarmShowFlag = false;
					}
				})
			},
		}
	}
</script>
