<template><!--预警设备-列表-->
	<div class="page-box">
		<ButtonGroup class="tab-state">
      <Button type="primary" :ghost="type==1 ? false : true" @click="changeTab('1')">未处理</Button>
      <Button type="primary" :ghost="type==2 ? false : true" @click="changeTab('2')">已处理</Button>
    </ButtonGroup>

    <div v-for="(item,index) in dataList" :key="index" class="list-box">
    	<div v-if="item.notifyState == 0" class="list-state"><Button type="primary" @click="takeOrder(item)" size="small">下单</Button></div>
    	<div v-if="item.notifyState == 1" class="list-state state-orange">处理中</div>
    	<div v-if="item.notifyState == 2" class="list-state state-green">已完成</div>
    	<div v-if="item.notifyState == 3" class="list-state state-grey">已关闭</div>
    	<dl>
    		<span class="list-title">预警时间</span>
    		<span class="list-text">{{item.startDate}}</span>
    	</dl>
    	<dl v-if="type==2">
    		<span class="list-title">完成时间</span>
    		<span class="list-text">{{item.completeDate}}</span>
    	</dl>
    	<dl v-if="type==2">
    		<span class="list-title">完成人</span>
    		<span class="list-text">{{item.transactorName}}</span>
    	</dl>
    	<dl v-if="type==2">
    		<span class="list-title">联系电话</span>
    		<span class="list-text">{{item.transactorTel}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">设备编码</span>
    		<span class="list-text">{{item.deviceCode}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">所属机房</span>
    		<span class="list-text">{{item.addressName}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">设备地址</span>
    		<span class="list-text">{{item.deviceAddress}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">预警详情</span>
    		<span class="list-text">{{item.messageContent}}</span>
    	</dl>
    </div>
	</div>
</template>

<script>
	import {
		getWarningList
	} from './service/getData.js';
	export default {
		name: '',
		data () {
	    return {
	    	type: 1, //1.未处理；2.已处理
	    	searchForm: {
	    		companyId: localStorage.companyId || '',
	    		areaId: '',
	    		projectId: localStorage.projectId || '',
	    		notifyStates: '0,1,2', //预警状态0:待处理（下单），1：处理中，2：已完成，3：关闭，多个状态逗号分隔
	    		pageIndex: 1, //当前页码
	    		pageSize: 1000, //每页展示数
	    	},
	    	dataList: [], //数据列表
	    }
	  },
	  created: function() {
	  	this.getWarningData();
	  },
	  methods: {
	  	changeTab(type) {
	  		this.type = type;
	  		if(type == '1') {
	  			this.searchForm.notifyStates = '0,1,2';
	  		}
	  		else {
	  			this.searchForm.notifyStates = '3';
	  		}
	  		this.getWarningData();
	  	},
	  	getWarningData() {
	  		var self = this;
	  		self.dataList = [];
	  		self.$Spin.show();
	  		getWarningList(self.searchForm).then(res => {
	  			self.$Spin.hide();
	  			if(res.status == 200) {
	  				self.dataList = res.data.records;
	  			}
	  		})
	  	},
		takeOrder(item) { //下单
			EbeiPlugins.openNativePage(item.deviceId,item.deviceCode,(res)=>{

      },()=>{

      });
	  	},
	  }
	}
</script>

<style scoped="scoped">
	@import url("./assets/css/list.css");
</style>

