<template>
	<view class="bg-page">
		<u-navbar v-if="showAppbar" title="预警列表" :background="background" :custom-back="goback"
		 :title-color="titleColor" :back-icon-color="titleColor">
		 </u-navbar>
		<view class="secreen-section" style="background-color: #fff;">
			<view class="quick_times">
				<u-subsection :list="sublist" :animation="true"
				:current="currentIndex" @change="subChange1"></u-subsection>
			</view>
			
		</view>

		<view v-if="title" class="top-title-box u-padding-20 u-margin-top-15"
		style="background-color: #fff;font-size: 30rpx;font-weight: bold;">
		{{title}}</view>
		<view class="content-box">
			<u-swipe-action class="tb_swipe_list" 
				 v-for="(item, index) in list" 
				 :show="item.show" :index="index" :key="item.id" 
				@click="click"
				@open="open"
				:options="options"
				>
				<view class="tb_body" @click="showInfo(index)">
					<view class="row_box">
						<view class="text">基地：{{ item.base_name }}</view>
					</view>
					<view class="row_box">
						<view class="text">监控点：{{ item.point_name }}</view>
					</view>
					<view class="row_box">
						<view class="text">等级：{{lvname[item.lv]}}</view>
					</view>
					<view class="row_box">
						<view class="text">状态：
						<u-tag v-if="item.status==1" text="已处理" type="success" size="mini"/>
						<u-tag v-if="item.status==0" text="未处理" type="error" size="mini"/>
						<u-tag v-if="item.status==2" text="已忽略" type="info" size="mini"/>
					</view>
					</view>
					<view class="row_box">
						<view class="text">设备类型：{{devicetypename[item.device_type]}}</view>
					</view>
					<view class="row_box">
						<view class="text">开始时间：{{item.created_at|timeFormat}}</view>
					</view>
					
				</view>
			</u-swipe-action>
			<u-loadmore :status="loading" margin-top="60"/>
		</view>
		<u-popup v-model="popupShow" mode="bottom" border-radius="28" z-index="900">
			<view class="popup-form-info">
				<view class="top_box u-border-bottom">
					
				</view>
				<view class="section_c">
					<view class="plist u-border-bottom">
						<view class="label_t">ID</view>
						<view class="flex-1">{{formInfo.id}}</view>
					</view>
					<view class="plist u-border-bottom">
						<view class="label_t">基地</view>
						<view class="flex-1">{{formInfo.base_name}}</view>
					</view>
					<view class="plist u-border-bottom">
						<view class="label_t">监控点</view>
						<view class="flex-1">{{formInfo.point_name}}</view>
					</view>
					<view class="plist u-border-bottom">
						<view class="label_t">等级</view>
						<view class="flex-1">{{lvname[formInfo.lv]}}</view>
					</view>
					<view class="plist u-border-bottom">
						<view class="label_t">状态</view>
						<view class="flex-1">
							<u-tag v-if="formInfo.status==1" text="已处理" type="success" size="mini"/>
							<u-tag v-if="formInfo.status==0" text="未处理" type="error" size="mini"/>
							<u-tag v-if="formInfo.status==2" text="已忽略" type="info" size="mini"/>
						</view>
					</view>
					<view class="plist u-border-bottom">
						<view class="label_t">设备类型</view>
						<view class="flex-1">{{devicetypename[formInfo.device_type]}}</view>
					</view>
					
					<view class="plist u-border-bottom">
						<view class="label_t">创建时间</view>
						<view class="flex-1">{{formInfo.created_at|timeFormat}}</view>
					</view>
					<view class="plist u-border-bottom">
						<view class="label_t">内容</view>
						<view class="flex-1">{{formInfo.content}}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {formatDate,navigateBack,showLoading,hideLoading} from '@/com/utils.js'
	export default {
		data() {
			return {
				background: {
					backgroundColor:'#2a7dc9',
				},
				titleColor:"#ffffff",
				per_page:10,
				page:1,
				list:[],
				loading:'loadmore',
				currentIndex:0,
				sublist:[
					{
						name: '未处理',
						value:0
					},
					 {
					 	name: '已处理',
						value:1
					 }, 
					 {
					 	name: '已忽略',
						value:2
					 }, 
				],
				options: [
					// {
					// 	text: '标记',
					// 	style: {
					// 		backgroundColor: '#007aff'
					// 	}
					// }
				],
				popupShow:false,
				cindex:-1,//操作的索引
				formInfo:{},
				getParams:{},
				title:'',
				statusValue:0,
				lvname:{
					1:'Ⅰ级预警',
					2:'Ⅱ级预警',
					3:'Ⅲ级预警',
					4:'Ⅳ级预警'
				},
				devicetypename:{
					1:'监控设备',
					2:'土壤设备',
					3:'水质设备',
					4:'气象设备'
				},
			};
		},
		filters:{
			timeFormat(val){
				return formatDate(val*1000, 'yyyy-MM-dd hh:mm');
			},
		},
		onLoad(e) {
			console.log(e);
			this.getParams = e;
			if(e.title){
				this.title = `${e.title}-预警`
			}
			this.queryDataList();
		},
		methods: {
			subChange1(index){
				console.log(index);
				this.statusValue = this.sublist[index].value;
				this.queryDataList(true)
			},
			showInfo(index){
				this.cindex = index;
				let _id = this.list[index].id;
				this.formInfo = this.list[index];
				this.popupShow = true;
				
			},
			open(index){
				this.list[index].show = true;
			},
			click(index, index1) {
				console.log(index,index1,this.list[index])
				if(index1 == 1) {
					this.cindex = index;
					let _id = this.list[index].id;
					this.deleteInfoId(_id);
				} else {//编辑
					
					
				}
			},
			queryDataList(refresh){
				if(refresh){
					this.loading = 'loadmore';
					this.page = 1;
					this.list = [];
				}
				if(this.loading=='nomore'){//超出最大页
					return false;
				}
				let params = {
					per_page:this.per_page,
					page: this.page ++,
					status:this.statusValue,
					_t: new Date().getTime()
				}
				params = Object.assign(params,this.getParams);
				this.loading = 'loading';
				this.$http.get('/api/device-warning-logs',{params:params}).then(({data})=>{
					console.log(data)
					this.loading = 'loadmore';
					if(data.code==200){
						let _list = data.data|| [];
						for(let item of _list){
							item.show = false;
						}
						this.list = this.list.concat(_list);
						console.log(this.list);
						if(this.list.length>= data.meta.total){
							this.loading ='nomore';
						}
					}
				}).catch(()=>{
					this.loading = 'loadmore';
				})
			},
			//标记Id
			warningmarkId(id){
				uni.showModal({
					title: '提示',
					content: '是否确定标记？',
					success:  (res)=> {
						if (res.confirm) {
							console.log('用户点击确定');
							showLoading('请稍等...');
							this.$http.delete(`/api/device-warning-mark/${id}`).then(({data})=>{
								hideLoading();
								if(data.code==200){
									this.formInfo = {};//重置
									this.popupShow = false;
									this.queryDataList(true);
								}
								uni.showToast({ title: data.message, icon: 'none' });
							}).catch(()=>{
								hideLoading();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			goback(){
				navigateBack()
			}
		},
		//触底加载
		onReachBottom() {
			if(this.loading=='loadmore'){
				this.queryDataList();
			}
		},
	}
</script>

<style lang="scss" scoped>
.content-box{
	padding: 30rpx;
}

</style>
