<style lang="scss" scoped>
.alarmRecord{
	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: center;
		align-items: center;
		border-bottom: 1px solid #eee;
		background-color: #fff;
	}
	&-info-list{
		background-color: #F9F9F9;
		padding: $paddingTB $paddingLR;
		margin-top: 72rpx;
	}
	.scrollbtm{
		margin-bottom: 110rpx;
	}
	&-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;
			left: 14rpx;
			top: 14rpx;
			z-index: 1;
		}
		.box-dealwith{
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			z-index: 1;
			padding-left: 50rpx;
			padding-top: 50rpx;
		}
		.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: calc(100% - 50rpx);
			}	
		}
		&-bottom{
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
		}
	}
	&-info-box-msg-row-ctn{
		position: relative;
	}
	&-info-box-msg-content{
		display: flex;
		.alarmRecord-info-box-msg-warning{
			width: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FF3F3F;
			font-size: 36rpx;
		}
	}
	.bottom-btn-ctn{
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		box-shadow: $box-shadow;
		// .bottom-btn{
		// 	width: 50%;
		// }
		&-lf{
			display: flex;
			align-items: center;
		}
	}
	.alarmInfo-content{
		padding: 70rpx $paddingLR;
		padding-bottom: 40rpx;
		&-row{
			padding-bottom: 10rpx;
		}
		&-bottom-btn{
			padding: 0 30rpx;
			padding-top: 20rpx;
		}
	}
}
</style>
<template>
	<view class="alarmRecord">
		<view class="alarmRecord-header">
			<u-input :disabled="true" style="width: 240rpx;" input-align="center" v-model="beginDate" @click="beginDatePickerShow = true" />
			<view class="">至</view>
			<u-input :disabled="true" style="width: 240rpx;" input-align="center" v-model="endDate" @click="endDatePickerShow = true" />
			<u-button type="primary" size="mini" :ripple="true" :disabled="toalLen === 0" @click="headerBtnHandleFn">{{checkboxShowFlag | checkBtnName}}</u-button>
		</view>
		<view class="alarmRecord-info-list" :class="{'scrollbtm': checkboxShowFlag}">
			<mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<checkbox-group @change="checkboxChange">
					<view class="alarmRecord-info-box" v-for="(item,index) in lineRoadList" :key="index">
						<view class="alarmRecord-info-box-msg">
							<!-- <u-checkbox class="box-checkbox" v-if="checkboxShowFlag && item.processStatus == 'UNPROCESS'" @change="checkboxChange($event, item.projectId)"></u-checkbox> -->
							<view class="box-checkbox" v-if="checkboxShowFlag && item.processStatus == 'UNPROCESS'">
								<checkbox :value="item.recordId" :checked="selCheck.includes(item.recordId)" color="#1C9AFF"/>
							</view>
							<view class="box-dealwith" @click="openDealwithFn(item)">
								<tuiIcon :name="item.processStatus== 'UNPROCESS'?'weichuli':'yichuli'" size="80" :color="item.processStatus== 'UNPROCESS'?'#BE2D08':'#71B943'"></tuiIcon>
							</view>
							<view class="alarmRecord-info-box-msg-content">
								<view class="alarmRecord-info-box-msg-warning">{{item.alarmDivide=='ALARM'?"报警":"预警"}}</view>
								<view class="alarmRecord-info-box-msg-row-ctn">
									<view class="box-left-line"></view>
									<view class="alarmRecord-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="alarmRecord-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="alarmRecord-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="alarmRecord-info-box-bottom">
							<text>时间：{{item.alarmTime}}</text>
							<text>报警类型：{{item.typeName}}</text>
						</view>
					</view>
				</checkbox-group>
			</mescroll-body>
		</view>
		<view class="bottom-btn-ctn" v-if="checkboxShowFlag">
			<!-- <u-button type="warning" class="bottom-btn" @click="cancelDealWithFn">取消</u-button> -->
			<view class="bottom-btn-ctn-lf">
				<checkbox color="#1C9AFF" :checked="checkedAll" @click="checkedAllClick"/>
				<text>全选</text>
				<text style="margin-left: 20rpx;">{{chckLen}}/{{toalLen}}</text>
			</view>
			<u-button type="primary" size="medium " :ripple="true" class="bottom-btn" @click="handleNowFn">立即处理</u-button>
		</view>
		<u-picker mode="time" :params="params" v-model="beginDatePickerShow" @confirm="beginDateConfirmFn"></u-picker>
		<u-picker mode="time" :params="params" v-model="endDatePickerShow" @confirm="endDateConfirmFn"></u-picker>
		<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-row">联系人：{{}}</view>
				<view class="alarmInfo-content-row">联系电话：{{}}</view> -->
				<view class="alarmInfo-content-bottom-btn">
					<u-button type="primary" shape="circle" :ripple="true"  @click="projectHandleNowFn(currentPickInfoData)">立即处理</u-button>
					<!-- <view class="pt20"></view> -->
					<!-- <u-button type="primary" shape="circle" @click="fiilMaintenanceFn">填写维保</u-button> -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		data() {
			return {
				checkboxShowFlag:false, // 按钮开关
				alarmShowFlag:false, // 报警信息弹框开关
				// currentPickInfoData:null, // 当前选择的报警信息
				params:{
					year: true,
					month: true,
					day: true,
					timestamp: true, // 1.3.7版本提供
				},
				beginDatePickerShow:false,
				endDatePickerShow:false,
				beginDate:"",
				endDate:"",
				deviceId:"",
				lineRoadList:[],
				currentPickInfoData: {},
				selCheck: [],
				checkedAll: false
			}
		},
		mixins:[MescrollMixin],
		onLoad(e) {
			this.beginDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
			this.endDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
			this.deviceId = e.deviceId;
		},
		methods: {
			subtractOneDay(dateStr) {
			    // 将字符串转换为Date对象
			    const date = new Date(dateStr);
			
			    // 减去一天
			    date.setDate(date.getDate() - 1);
			
			    // 格式化为yyyy-mm-dd
			    const year = date.getFullYear();
			    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以+1
			    const day = String(date.getDate()).padStart(2, '0');
			    
			    return `${year}-${month}-${day}`;
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let beginTime = this.subtractOneDay(this.beginDate);
				let obj = {
					pageSize:pageSize,
					pageNum:pageNum,
					deviceId:this.deviceId,
					beginTime:beginTime,
					endTime:this.endDate,
				}
				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.lineRoadList = []; //如果是第一页需手动置空列表
						this.lineRoadList = this.lineRoadList.concat(curPageData); //追加新数据
						this.handleCheck(curPageData);
						this.mescroll.endBySize(curPageLen, res.total); // 推荐
						// this.mescroll.endByPage(curPageLen, res.data.total)
						// this.mescroll.endSuccess(curPageData.length);
					} else{
						this.lineRoadList = [];
						this.mescroll.endErr();
						this.mescroll.showEmpty();
						// this.mescroll.endUpScroll(true);
					}
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			fiilMaintenanceFn(){
				let queryDataStr = JSON.stringify(this.currentPickInfoData);
				uni.navigateTo({
					url:`/pages/home/wisdomElectricity/wbjl/addRecord?alrmData=${queryDataStr}`,
					success: () => {
						this.alarmShowFlag = false;
					}
				})
			},
			openDealwithFn(item){
				// console.log(item,"item");
				if(this.checkboxShowFlag) {
					this.$tui.toast('当前为批处理，请先取消批处理', 3000);
					return false;
				}
				if(item.processStatus == 'UNPROCESS'){
					this.alarmShowFlag = true;
					this.currentPickInfoData = item;
				}
			},
			cancelDealWithFn(){
				this.lineRoadList.forEach((item)=>{
					item.checkedFlag = false;
				})
				this.checkboxShowFlag = false;
			},
			beginDateConfirmFn(e){
				console.log(e,"e")
				this.beginDate = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd')
				this.mescroll.resetUpScroll()
			},
			endDateConfirmFn(e){
				console.log(e,"e")
				this.endDate = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd')
				this.mescroll.resetUpScroll()
			},
			headerBtnHandleFn(){
				if (this.checkboxShowFlag) {
					this.checkboxShowFlag = false;
					this.selCheck = [];
					this.checkAll = false;
				} else{
					this.checkboxShowFlag = true;
				}
			},
			checkboxChange(e) {
				this.selCheck = e.detail.value;
			},
			checkedAllClick(){
				const _this = this;
				this.checkedAll = !this.checkedAll;
				if(this.checkedAll){
					this.selCheck = [];
					this.lineRoadList.forEach(item => {
						if(item.processStatus == 'UNPROCESS'){
							if(!_this.selCheck.includes(item.recordId)){
								_this.selCheck.push(item.recordId);
							}
						}
					})
				}else{
					this.selCheck = [];
				}
			},
			handleCheck(data) {
				if(this.checkedAll){
					data.forEach(item => {
						if(item.processStatus == 'UNPROCESS'){
							if(!this.selCheck.includes(item.recordId)){
								this.selCheck.push(item.recordId);
							}
						}
					})
				}
			},
			handleNowFn() {
				this.$post('/app/alarm/batch-update', {recordIds: this.selCheck}).then(res => {
					if(res.code == 200) {
						this.$tui.toast('处理成功', 3000, true);
						this.updateState(this.selCheck);
						this.selCheck = [];
						this.checkboxShowFlag = false;
					}
				})
			},
			projectHandleNowFn(data) {
				this.selCheck = [data.recordId];
				this.handleNowFn();
				this.alarmShowFlag = false;
			},
			updateState(selCheck) {
				this.lineRoadList.forEach(item => {
					if(selCheck.includes(item.recordId)) {
						item.processStatus = 'PROCESSED';
					}
				})
			}
		},
		computed: {
			checkAll() {
				return this.lineRoadList.every(item => {
					return item.processStatus == 'UNPROCESS' && this.selCheck.includes(item.recordId);
				});
			},
			toalLen() {
				return this.lineRoadList.length || 0;
			},
			chckLen() {
				return this.selCheck.length || 0;
			}
		},
		filters: {
			checkBtnName(flag) {
				if(flag) {
					return '取消批量处理';
				} else {
					return '批量处理';
				}
			}
		}
	}
</script>

