<template>
	<view class="bg-page">
		<u-sticky z-index="99" :h5NavHeight="h5NavHeightP">
		<view class="secreen-section" style="background-color: #fff;">
			<u-dropdown class="dropdown-box" :class="[!dropDownShow?'downClose':'']" ref="uDropdown"
			 @close="dropdownClose" @open="dropdownOpen">
				<u-dropdown-item v-model="lvvalue" title="预警等级" 
				:options="lvList" @change="change1"></u-dropdown-item>
				<u-dropdown-item v-model="typevalue" title="设备类型"
				:options="typeList" @change="change2"></u-dropdown-item>
				<u-dropdown-item v-model="statusvalue" title="状态"
				:options="statusList" @change="change3"></u-dropdown-item>
			</u-dropdown>
		</view>
		</u-sticky>

		<view class="content-box" style="padding-bottom: 60rpx;">
			<view class="tb_swipe_list" 
				 v-for="(item, index) in loglist" 
				 :show="item.show" :index="index":key="item.id" 
				>
				<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">设备类型：{{ item.device_type }}</view>
					</view> -->
					<view class="row_box">
						<view class="text">等级：{{ lvname[item.lv] }}</view>
					</view>
					<view class="row_box">
						<view class="text">状态：{{ statusname[item.status] }}</view>
					</view>
					<view class="row_box">
						<view class="text">时间：{{ item.created_at|timeFormat}}</view>
					</view>
				</view>
			</view>
			<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 class="title">警报明细</view>
				</view>
				<view class="section_c">
					
					<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">{{devicetypename[formInfo.device_type]}}</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">{{statusname[formInfo.status]}}</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 {showLoading,toast,formatDate} from '@/com/utils.js'
	export default {
		data() {
			return {
				dropDownShow:false,
				per_page:15,
				page:1,
				loglist:[],
				loading:'loadmore',
				lvList:[
					{
						label: '全部',
						value: 0,
					},
					{
						label: 'Ⅰ级预警',
						value: 1,
					},
					{
						label: 'Ⅱ级预警',
						value: 2,
					},
					{
						label: 'Ⅲ级预警',
						value: 3,
					},
					{
						label: 'Ⅳ级预警',
						value: 4,
					},
				],
				lvvalue:'',
				typeList:[
					{
						label: '全部',
						value: '',
					},
					{
						label: '监控设备',
						value: 1,
					},
					{
						label: '土壤设备',
						value: 2,
					},
					{
						label: '水质设备',
						value: 3,
					},
					{
						label: '气象设备',
						value: 4,
					}
				],
				typevalue:'',
				statusList:[
					{
						label: '全部',
						value: -1,
					},
					{
						label: '未处理',
						value: 0,
					},
					{
						label: '已处理',
						value: 1,
					},
					{
						label: '已忽略',
						value: 2,
					},
				],
				statusvalue:-1,
				statusname:{
					0:'未处理',
					1:'已处理',
					2:'已忽略'
				},
				lvname:{
					1:'Ⅰ级预警',
					2:'Ⅱ级预警',
					3:'Ⅲ级预警',
					4:'Ⅳ级预警'
				},
				devicetypename:{
					1:'监控设备',
					2:'土壤设备',
					3:'水质设备',
					4:'气象设备'
				},
				popupShow:false,
				formInfo:{},
			};
		},
		filters:{
			timeFormat(val){
				return formatDate(val*1000, 'yyyy-MM-dd hh:mm');
			},
			typename(val){
				let keys = {
					delete:'删除',
					create:'创建',
					update:'修改'
				}
				let name = keys[val]?keys[val]:'其它'
				return name;
			},
			
		},
		onLoad() {
			this.queryloglist();
			
		},
		methods: {
			showInfo(index){
				this.formInfo = this.loglist[index];
				this.popupShow = true;
				
			},
			change1(val){
				console.log(val);
				this.queryloglist(true);
			},
			change2(val){
				console.log(val);
				this.queryloglist(true);
			},
			change3(val){
				console.log(val);
				this.queryloglist(true);
			},
			dropdownClose(){
				this.dropDownShow = false;
			},
			dropdownOpen(){
				this.dropDownShow = true;
			},
			queryloglist(refresh){
				if(refresh){
					this.loading = 'loadmore';
					this.loglist = [];
					this.page = 1;
				}
				if(this.loading=='nomore'){//超出最大页
					return false;
				}
				let params = {
					per_page:this.per_page,
					page: this.page ++,
					_t: new Date().getTime()
				}
				if(this.lvvalue){
					params['lv'] = this.lvvalue;
				}
				if(this.typevalue){
					params['device'] = this.typevalue;
				}
				if(this.statusvalue>-1){
					params['status'] = this.statusvalue;
				}
				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|| [];
						let {current_page,per_page,last_page} = data.meta;
						
						this.loglist = this.loglist.concat(_list);
						console.log(this.loglist);
						if(current_page >= last_page){
							this.loading ='nomore';
						}
						
					}
				}).catch(()=>{
					this.loading = 'loadmore';
				})
			},
		},
		//触底加载
		onReachBottom() {
			if(this.loading=='loadmore'){
				this.queryloglist();
			}
		},
	}
</script>

<style lang="scss" scoped>
.content-box{
	padding: 30rpx 30rpx 60rpx 30rpx;
}
.row_box{
	.text{
		word-break: break-all;
	}
}

</style>
