<template>
	<view class="realTime">
		<view class="realTime-header" :style="{height:isShowDropdown?'100%':''}">
			<u-dropdown ref="uDropdown" @open="isShowDropdown = true" @close="isShowDropdown = false" >
				<u-dropdown-item title="筛选" v-model="value1">
					<view class="slot-content">
						<u-cell-group>
							<u-cell-item :arrow="false" title="包含预警">
								<u-switch v-model="switchYj"></u-switch>
							</u-cell-item>
							<u-cell-item :arrow="false" title="只显示未处理">
								<u-switch v-model="switchWcl"></u-switch>
							</u-cell-item>
						</u-cell-group>
						<view class="slot-content-btn">
							<u-button type="primary" @click="filterCommit">确定</u-button>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
			<u-search :show-action="false" class="realTime-header-input" height="60" placeholder="请输入设备名" v-model="searchVal" @search="searchFn" @change="changeFn"></u-search>
			<!-- <u-input  class="realTime-header-input" :border="true" /> -->
		</view>
		<u-tabs :list="tabList" :is-scroll="false" bg-color="transparent" active-color="#1c9aff" :current="tabCurrent" @change="changeTab"></u-tabs>
		<view class="realTime-info-list">
			<mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback" >
				<!-- 报警列表 -->
				<view v-if="tabCurrent==0" class="realTime-info-box" v-for="(item,index) in lineRoadList" :key="index">
					<view class="realTime-info-box-msg">
						<!-- <u-checkbox class="box-checkbox" v-if="checkboxShowFlag" v-model="item.checkedFlag"></u-checkbox> -->
						<!-- <view class="box-dealwith" @click="openDealwithFn(item)"> -->
						<view class="box-dealwith" @click="openDealwithFn(item)">
							<tuiIcon :name="item.processStatus == 'UNPROCESS'? 'weichuli':'yichuli'" size="80" :color="item.processStatus == 'UNPROCESS'? '#BE2D08': '#71B943'"></tuiIcon>
						</view>
						<u-button v-if="item.processStatus == 'UNPROCESS'" size="mini" type="primary"  class="deal-with-btn"  @click="openDealwithFn(item)">立即处理</u-button>
						<view class="realTime-info-box-msg-content">
							<view class="realTime-info-box-msg-warning">{{item.alarmDivide | alarmType}}</view>
							<view class="realTime-info-box-msg-row-ctn">
								<view class="box-left-line"></view>
								<view class="realTime-info-box-msg-row">
									<view class="msg-row-icon">
										<tui-icon color="#fff" name="xiangmu" size="26"></tui-icon>
									</view>
									<text class="msg-row-text pl20 pr128">项目：{{item.projectName}}</text>
								</view>
								<view class="realTime-info-box-msg-row">
									<view class="msg-row-icon">
										<tui-icon color="#fff" name="ditu2" size="26"></tui-icon>
									</view>
									<text class="msg-row-text pl20">地点：{{item.projectAddress}}</text>
								</view>
								<view class="realTime-info-box-msg-row">
									<view class="msg-row-icon">
										<tui-icon color="#fff" name="xinpian" size="26"></tui-icon>
									</view>
									<text class="msg-row-text pl20">设备名：{{item.deviceName}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="realTime-info-box-bottom">
						<text>时间：{{item.alarmTime}}</text>
						<text>报警类型：{{item.typeName}}</text>
					</view>
				</view>
				<!-- 我的工单 -->
				<view v-if="tabCurrent == 1" class="realTime-info-box" v-for="(item,index) in workWrderList" :key="index">
					<view class="realTime-info-box-msg">
						<!-- <u-checkbox class="box-checkbox" v-if="checkboxShowFlag" v-model="item.checkedFlag"></u-checkbox> -->
						<view class="box-dealwith" @click="openworkWrderFn(item)">
							<tuiIcon v-if="item.maintenanceStatus==0" name="weiqueren" size="80" color="grey"></tuiIcon>
							<tuiIcon v-if="item.maintenanceStatus==1" name="yibohui" size="80" color="#ff522a"></tuiIcon>
							<tuiIcon v-if="item.maintenanceStatus==2" name="weichuli" size="80" color="red"></tuiIcon>
							<tuiIcon v-if="item.maintenanceStatus==6" name="zanhuan" size="80" color="orange"></tuiIcon>
							<tuiIcon v-if="item.maintenanceStatus==3" name="yichuli" size="80" color="#1c9aff"></tuiIcon>
							<tuiIcon v-if="item.maintenanceStatus==4" name="shenhebohui" size="80" color="purple"></tuiIcon>
							<tuiIcon v-if="item.maintenanceStatus==5" name="shenhetongguo" size="80" color="green"></tuiIcon>
						</view>
						<view class="realTime-info-box-msg-content">
							<view class="realTime-info-box-msg-warning" v-if="tabCurrent==1">工单</view>
							<view class="realTime-info-box-msg-row-ctn">
								<view class="box-left-line"></view>
								<view class="realTime-info-box-msg-row">
									<view class="msg-row-icon">
										<tui-icon color="#fff" name="xiangmu" size="26"></tui-icon>
									</view>
									<text class="msg-row-text pl20">项目：{{item.projectName}}</text>
								</view>
								<view class="realTime-info-box-msg-row">
									<view class="msg-row-icon">
										<tui-icon color="#fff" name="ditu2" size="26"></tui-icon>
									</view>
									<text class="msg-row-text pl20">地点：{{item.projectAddress}}</text>
								</view>
								<view class="realTime-info-box-msg-row">
									<view class="msg-row-icon">
										<tui-icon color="#fff" name="xinpian" size="26"></tui-icon>
									</view>
									<text class="msg-row-text pl20">设备名：{{item.deviceName}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="realTime-info-box-bottom">
						<text>时间：{{item.createTime}}</text>
						<text>工单类型：{{item.faultTypeName}}</text>
					</view>
				</view>
			</mescroll-body>
		</view>
		<!-- 报警处理 -->
		<u-popup v-model="alarmListShowFlag" mode="center" :closeable="true" width="80%">
			<view class="alarmListInfo-content">
				<view class="alarmListInfo-content-row">项目：{{currentPickInfoData.projectName}}</view>
				<view class="alarmListInfo-content-row">地址：{{currentPickInfoData.projectAddress}}</view>
				<view class="alarmListInfo-content-row">设备名：{{currentPickInfoData.deviceName}}</view>
				<view class="alarmListInfo-content-row">报警类型：{{currentPickInfoData.typeName}}</view>
				<view class="alarmListInfo-content-row">报警时间：{{currentPickInfoData.alarmTime}}</view>
				<!-- <view class="alarmListInfo-content-row">联系人：{{}}</view>
				<view class="alarmListInfo-content-row">联系电话：{{}}</view> -->
				<view class="alarmListInfo-content-bottom-btn">
					<u-button type="primary" shape="circle" @click="projectHandleNowFn(currentPickInfoData)">立即处理</u-button>
					<!-- <view class="pt20"></view>
					<u-button type="primary" shape="circle" @click="fiilMaintenanceFn">填写维保</u-button> -->
				</view>
			</view>
		</u-popup>
		<!-- 工单确认 -->
		<u-popup v-model="workWrderShow" mode="center" :closeable="true" width="80%">
			<view class="alarmInfo-title flex-center">{{workWrderSelectData.maintenanceStatus==0?'工单确认':'驳回工单'}}</view>
			<view class="alarmInfo-content">
				<view class="alarmInfo-content-row">项目：{{workWrderSelectData.projectName}}</view>
				<view class="alarmInfo-content-row">地址：{{workWrderSelectData.projectAddress}}</view>
				<view class="alarmInfo-content-row">设备名：{{workWrderSelectData.deviceName}}</view>
				<view class="alarmInfo-content-row">工单类型：{{workWrderSelectData.faultTypeName}}</view>
				<view class="alarmInfo-content-row">工单时间：{{workWrderSelectData.createTime}}</view>
				<view class="alarmInfo-content-row">工单内容：{{workWrderSelectData.maintenanceContext}}</view>
				<view class="alarmInfo-content-row">工单反馈：{{workWrderSelectData.feedbackInformation}}</view>
				<view class="alarmInfo-content-row">工单建议：{{workWrderSelectData.advice}}</view>
				<view class="alarmInfo-content-title flex-center" v-if="workWrderSelectData.maintenanceStatus==0">反馈</view>
				<u-input v-model="feedbackInformation"  cursor-spacing="60" :fixed="true"  v-if="workWrderSelectData.maintenanceStatus==0" type="textarea" border="true" height="100" auto-height="true" placeholder="请输入反馈"/>
				<view class="alarmInfo-content-bottom-btn" v-if="workWrderSelectData.maintenanceStatus==0">
					<u-button type="error" @click="workWrderBtn('1')">驳回</u-button>
					<u-button type="primary" @click="workWrderBtn('2')">确认</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 工单处理 -->
		<u-popup v-model="alarmShowFlag" mode="center" :closeable="true" width="80%">
			<view class="alarmInfo-title flex-center" v-if="workWrderSelectData.maintenanceStatus==2">工单处理</view>
			<view class="alarmInfo-title flex-center" v-if="workWrderSelectData.maintenanceStatus==6">工单暂缓</view>
			<view class="alarmInfo-title flex-center" v-if="workWrderSelectData.maintenanceStatus==3">工单已处理</view>
			<view class="alarmInfo-title flex-center" v-if="workWrderSelectData.maintenanceStatus==4">工单审核驳回</view>
			<view class="alarmInfo-title flex-center" v-if="workWrderSelectData.maintenanceStatus==5">工单审核通过</view>
			<view class="alarmInfo-content">
				<view class="alarmInfo-content-row">项目：{{workWrderSelectData.projectName}}</view>
				<view class="alarmInfo-content-row">地址：{{workWrderSelectData.projectAddress}}</view>
				<view class="alarmInfo-content-row">设备名：{{workWrderSelectData.deviceName}}</view>
				<view class="alarmInfo-content-row">工单时间：{{workWrderSelectData.createTime}}</view>
				<view class="alarmInfo-content-row">工单内容：{{workWrderSelectData.maintenanceContext}}</view>
				<view class="alarmInfo-content-row">工单反馈：{{workWrderSelectData.feedbackInformation}}</view>
				<view class="alarmInfo-content-row">工单建议：{{workWrderSelectData.advice}}</view>
				<view class="alarmInfo-content-row" v-if="workWrderSelectData.maintenanceStatus==4||workWrderSelectData.maintenanceStatus==5">审核意见：{{checkOpinion}}</view>
				<view class="alarmInfo-content-title flex-center" v-if="workWrderSelectData.maintenanceStatus!=3&&workWrderSelectData.maintenanceStatus!=5">反馈</view>
				<u-input v-model="feedbackInformation" cursor-spacing="60" :fixed="true" type="textarea" v-if="workWrderSelectData.maintenanceStatus!=3&&workWrderSelectData.maintenanceStatus!=5" border="true" height="100" auto-height="true" placeholder="请输入反馈"/>
				<view class="alarmInfo-content-title flex-center" v-if="workWrderSelectData.maintenanceStatus!=3&&workWrderSelectData.maintenanceStatus!=5">建议</view>
				<u-input v-model="advice" cursor-spacing="60" :fixed="true" v-if="workWrderSelectData.maintenanceStatus!=3&&workWrderSelectData.maintenanceStatus!=5" type="textarea" border="true" height="100" auto-height="true" placeholder="请输入建议"/>
				<view class="alarmInfo-content-bottom-btn" v-if="workWrderSelectData.maintenanceStatus!=3&&workWrderSelectData.maintenanceStatus!=5">
					<u-button type="error" @click="workWrderBtn('6')">暂缓修复</u-button>
					<u-button type="primary" @click="workWrderBtn('3')">已修复</u-button>
					<!-- <u-button type="primary" shape="circle" @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 {
				alarmListShowFlag:false,
				alarmShowFlag:false,
				checkboxShowFlag:false,
				value1:"",
				value2:1,
				options2:[{
					label:"全部",
					value:1,
				},{
					label:"已处理",
					value:2,
				},{
					label:"未处理",
					value:3,
				}],
				switchYj:false,
				switchWcl: false,
				isShowDropdown:false,
				showFlag:false,
				searchVal:"",
				params:{
					year: true,
					month: true,
					day: true,
					timestamp: true, // 1.3.7版本提供
				},
				beginDatePickerShow:false,
				endDatePickerShow:false,
				beginDate:"",
				endDate:"",
				lineRoadList:[],
				currentPickInfoData: {},
				where: {
					alarmDivide: 'ALARM'
				},
				workWrderList:[], //工单列表
				workWrderSelectData:{}, //点击工单
				// 标签类型列表
				tabList: [{
					name: '报警列表',
				}, {
					name: '我的工单'
				}],
				tabCurrent: 0,
				// 反馈
				feedbackInformation:null,
				// 建议
				advice:null,
				// 工单弹窗状态
				workWrderShow:false,
				//审核意见
				checkOpinion:null,
			}
		},
		mixins:[MescrollMixin],
		onLoad() {
			this.beginDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
			this.endDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
		},
		methods: {
			// tab切换
			changeTab(index){
				console.log("当前点击tab",index)
				this.tabCurrent = index;
				if(index == 0){
					this.lineRoadList = [];
				}else{
					this.workWrderList = [];
				}
				// 重置列表为第一页 (常用于列表筛选条件变化或切换菜单时重新刷新列表数据)
				this.mescroll.resetUpScroll( false );
			},
			upCallback(page) {
				const _this = this;
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				this.where['pageNum'] = pageNum;
				this.where['pageSize'] = pageSize;
				if(this.tabCurrent == 0){
					this.$get('/app/alarm/table', this.where).then(res => {
						if(res.code === 200){
							if(res.rows && res.rows.length > 0){
								let curPageData = res.rows;
								let curPageLen = curPageData.length;
								let totalSize = res.total;
								 
								_this.$nextTick(()=>{
								 	// 隐藏下拉刷新和上拉加载的状态;
									_this.mescroll.endBySize(curPageLen, totalSize);
								})
								if(pageNum == 1) this.lineRoadList = []; //如果是第一页需手动置空列表
								_this.lineRoadList = this.lineRoadList.concat(curPageData); //追加新数据
								_this.mescroll.endBySize(curPageLen, totalSize); // 推荐
							} else {
								_this.lineRoadList = [];
								_this.mescroll.endErr();
								_this.mescroll.showEmpty();
							}
						}
					})
				}else{
					this.$get('/app/maintenance/my-list', {pageNum:page.num,pageSize:page.size}).then(res => {
						console.log("获取我的工单列表",res);
						if(res.code === 200){
							if(res.rows && res.rows.length > 0){
								let curPageData = res.rows;
								let curPageLen = curPageData.length;
								let totalSize = res.total;
								 
								_this.$nextTick(()=>{
								 	// 隐藏下拉刷新和上拉加载的状态;
									_this.mescroll.endBySize(curPageLen, totalSize);
								})
								if(pageNum == 1) this.workWrderList = []; //如果是第一页需手动置空列表
								_this.workWrderList = this.workWrderList.concat(curPageData); //追加新数据
								_this.mescroll.endBySize(curPageLen, totalSize); // 推荐
							} else {
								_this.workWrderList = [];
								_this.mescroll.endErr();
								_this.mescroll.showEmpty();
							}
						}
					})
				}
			},
			switchYjFn(flag) {
				if(flag){
					this.switchBj = false;
				}
			},
			switchBjFn(flag) {
				if(flag){
					this.switchYj = false;
				}
			},
			filterCommit() {
				if(this.switchYj && !this.switchWcl) { //包含预警
					this.where = {};
				} else if (!this.switchYj && this.switchWcl) { //只显示未处理
					this.where = {
						alarmDivide: 'ALARM',
						processStatus: 'UNPROCESS'
					};
				} else if (this.switchYj && this.switchWcl) {
					this.where = {
						processStatus: 'UNPROCESS'
					};
				} else {
					this.where = {
						alarmDivide: 'ALARM'
					}
				}
				this.mescroll.resetUpScroll();
				this.$refs.uDropdown.close();
			},
			searchFn(value) {
				this.where = {
					deviceName: value
				}
				this.mescroll.resetUpScroll();
			},
			changeFn(value) {
				if(value == '') {
					this.where = {
						alarmDivide: 'ALARM'
					}
					this.mescroll.resetUpScroll();
				}
			},
			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(item.processStatus == 'UNPROCESS'){
					this.alarmListShowFlag = true;
					this.currentPickInfoData = item;
				}
			},
			/*
				maintenanceStatus 维保状态
				-1=告警生成维保,0=上报人创建维保,
				1=驳回上报人维保,2=处理人确认维保,
				3=处理人完成维保,4=驳回处理人维保,
				5=领导审批通过流程结束,6=暂缓处理
			*/
			openworkWrderFn(item){
				console.log(item,"item");
				this.workWrderSelectData = item;
				this.feedbackInformation = null;
				this.advice = null;
				if(item.maintenanceStatus==0){
					console.log("当前工单为未确认")
					this.workWrderShow = true;
				}else if(item.maintenanceStatus==1){
					this.workWrderShow = true;
					console.log("当前工单为驳回")
				}else if(item.maintenanceStatus==2){
					this.alarmShowFlag = true;
					console.log("当前工单为未处理")
				}else if(item.maintenanceStatus==6){
					this.alarmShowFlag = true;
					console.log("当前工单为暂缓")
				}else if(item.maintenanceStatus==3){
					this.alarmShowFlag = true;
					console.log("当前工单为已处理")
				}else if(item.maintenanceStatus==4){
					this.getCheckDetail()
					console.log("当前工单为审核驳回")
				}else if(item.maintenanceStatus==5){
					this.getCheckDetail()
					console.log("当前工单为审核通过")
				}
			},
			// 获取审核详情
			getCheckDetail(){
				this.$get('/app/maintenance/'+this.workWrderSelectData.maintenanceId, {}).then(res => {
					console.log("获取审核详情",res)
					if(res.code === 200){
						this.checkOpinion = res.data.maintenanceNodeList[res.data.maintenanceNodeList.length-1].auditOpinion;
						console.log("审核意见",this.checkOpinion);
						this.alarmShowFlag = true;
					}else{
						this.$u.toast("获取审核详情失败")
					}
				})
			},
			headerBtnHandleFn(){
				if (this.checkboxShowFlag) {
					let falseChecked = this.lineRoadList.filter((o)=>{
						return o.checkedFlag == false;
					})
					console.log(falseChecked,"falseChecked");
					if(falseChecked.length === 0){
						this.lineRoadList.forEach((item)=>{
							item.checkedFlag = false;
						})
					} else{
						this.lineRoadList.forEach((item)=>{
							item.checkedFlag = true;
						})
					}
				} else{
					this.checkboxShowFlag = true
				}
				
			},
			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')
			},
			endDateConfirmFn(e){
				console.log(e,"e")
				this.endDate = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd')
			},
			// 工单处理
			workWrderBtn(status){
				if(status==6&&this.feedbackInformation==null){
					this.$u.toast("请输入反馈");
					return;
				}
				let params={
				  "maintenanceId": this.workWrderSelectData.maintenanceId,
				  "maintenanceStatus": status,
				  "feedbackInformation": this.feedbackInformation,
				  "advice": this.advice,
				  "scenePictures": ""
				}
				this.$put('/app/maintenance', params).then(res => {
					console.log("工单处理",res)
					if(res.code === 200){
						// 关闭弹窗
						this.workWrderShow = false;
						this.alarmShowFlag = false;
						this.mescroll.resetUpScroll( false );
						this.$u.toast(res.msg)
					}else{
						this.$u.toast(res.msg)
					}
				})
			},
			projectHandleNowFn(status) {
				if(status){
					this.$post('/app/alarm/batch-update', {recordIds: [this.currentPickInfoData.recordId]}).then(res => {
						if(res.code == 200) {
							this.$tui.toast('处理成功', 3000, true);
							this.updateState(this.currentPickInfoData.recordId);
							this.alarmListShowFlag = false;
						}
					})
				}else{
					if(!this.receipt){
						this.$tui.toast("请输入回执");
					}else{
						console.log("工单处理数据",this.currentPickInfoData,this.receipt)
					}
				}
				
			},
			updateState(id) {
				this.lineRoadList.forEach(item => {
					if(item.recordId == id) {
						item.processStatus = 'PROCESSED';
					}
				})
			}
		},
		filters: {
			alarmType(val) {
				if(val == 'ALARM'){
					return '报警';
				} else if (val == 'WARNING') {
					return '预警';
				} else {
					return '异常';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.realTime{
	width: 100%;
	:not(not) {
		box-sizing: border-box;
	}
	&-header{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 $paddingLR; 
		&-screening{
			width: 140rpx;
			text-align: center;
		}
		&-input{
			width: calc(100% - 140rpx);
		}
		.slot-content{
			background-color: #FFFFFF;
			padding: 0 30rpx 20rpx;
			&-btn{margin-top: 20rpx;}
		}
	}
	&-info-list{
		padding: $paddingTB $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: 1px dashed #A1A1A1;
			position: relative;
		}
		.box-checkbox{
			position: absolute;
			right: -16rpx;
			top: 14rpx;
		}
		.box-dealwith{
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			z-index: 1;
			padding-left: 50rpx;
			padding-top: 50rpx;
		}
		.pr128{
			padding-right: 128rpx;
		}
		.deal-with-btn{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			z-index: 1;
			// width: 128rpx;
		}
		
		.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;
				flex: 1;
			}	
		}
		&-bottom{
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
		}
	}
	&-info-box-msg-row-ctn{
		position: relative;
	}
	&-info-box-msg-content{
		display: flex;
		.realTime-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-around;
		.bottom-btn{
			width: 50%;
		}
	}
	.alarmInfo-title{
		color: white;
		height: 90rpx;
		background-color: #2979ff;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	
	.alarmListInfo-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;
		}
	}
	
	.alarmInfo-content{
		padding: 20rpx $paddingLR;
		padding-bottom: 40rpx;
		
		&-row{
			padding-bottom: 10rpx;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// white-space: nowrap;
		}
		&-bottom-btn{
			display: flex;
			justify-content: space-around;
			// padding: 0 30rpx;
			padding-top: 20rpx;
		}
		&-title{
			font-size: 28rpx;
			font-weight: bold;
			height: 40rpx;
			margin-bottom: 10rpx;
		}
	}
}

// 改变下拉菜单的内容
::v-deep .u-dropdown__content {
		width: 100vw !important;    //  将下拉菜单的内容宽度等效于屏宽
		left: -40rpx !important;         //   调整cell,使得文字显示偏左
}

</style>