<!-- 预警历史记录 -->
<template>
  <div class="innerMargin">
    <div class="box-card">
		<div class="seaarchBox">
			<div class="searchLeft">
				<span class="title">设备ID：</span>
				<el-input size="small" placeholder="请输入设备ID" @change="imgListData()" clearable v-model="queryInfo.equipId" class="input-with-select">
					<!-- <el-button size="small" @click="imgListData()" slot="append" icon="el-icon-search"></el-button> -->
				</el-input>
				<span class="title">时间选择：</span>
				<el-date-picker
					size="small"
					v-model="queryInfo.time"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
          @change="DateChange">
				</el-date-picker>
			</div>
			<div class="exportRight">
				<!-- <el-button size="small" class="blueBtn" type="primary">导　出</el-button> -->
			</div>
		</div>
       <template>
        <el-table :data="userList" stripe style="width: 100%">
			<el-table-column
				type="selection"
				width="55">
			</el-table-column>
			<el-table-column prop="device_id"   fixed label="设备号"></el-table-column>
			<el-table-column prop="device_name" label="设备名称"></el-table-column>
			<el-table-column prop="warning_info" width="400px" label="预警信息"></el-table-column>
			<el-table-column prop="action" label="干预措施"></el-table-column>
			<el-table-column prop="warning_time" label="预警时间"></el-table-column>
			<el-table-column label="图片">
				<template slot-scope="scope">
					<el-button @click="amplificationA(scope.row)" type="text" size="small">查看图片</el-button>
				</template>
			</el-table-column>
        </el-table>
      </template>
      <el-pagination
        background
        :page-size="8"
        layout="prev, pager, next, jumper"
        :current-page="page"
        :total="totalNum"
        @current-change="changePage"
      ></el-pagination>
    </div>
	    <!-- 查看大图 -->
      <viewer
        v-show="false"
        :images="recognitionImage"
        ref="viewer"
        @inited="inited"
        :index="3"
      >
        <img v-for="(src, index) in recognitionImage" :src="src" :key="index" />
      </viewer>
      <!-- 查看大图 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Vue from "vue";
import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";
Vue.use(Viewer);
export default {
  //import引入的组件需要注入到对象中才能使用
  data() {
	  //这里存放数据
    return {
      queryInfo:{
        equipId:'',
        time:'',
        start_time:'',
        end_time:'',
      },
      username: "",
      userList: [],
      page: 1,
      totalNum: 0,
      recognitionImage:[],

    };
  },
  //监听属性 类似于data概念
  computed: {
    //获取用户类型
		userType: function () {
			return this.$store.state.myuser_type
		}
  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.imgListData();
  },
  //方法集合
  methods: {
    imgListData() {
        let that = this;
        let postData = that.qs.stringify({
          device_id: this.queryInfo.equipId,
          page_size: 10,
          page: this.queryInfo.page,
          start_time:  this.queryInfo.start_time, //开始时间（时间戳）
          end_time: this.queryInfo.end_time, //结束时间（时间戳）
        });
        that
          .$axios({
            method: "post",
            url: "/api/api_gateway?method=weather.weather.warning_info", //forecast.forecast_system.equip_photo
            data: postData,
          })
          .then((res) => {
            if(res.data.message == ""){
              that.userList = res.data.data.data
              that.totalNum = res.data.data.nums;
            }

          })
          .catch((err) => {
            console.log(err);
          });
      },
      handleClick(tab, event) {
          console.log(tab, event);
      },
      changePage(value) {
      this.page = value
    },
    // 配置查看大图插件
    inited(viewer) {
      this.$viewer = viewer;
      this.$viewer.view();
    },
    amplificationA(data) {
		  this.recognitionImage = [data.warning_pic]
      this.$viewer.view();
    },
    DateChange(val){
      if(this.queryInfo.time){
        this.queryInfo.start_time = parseInt(
          new Date(this.queryInfo.time[0]).getTime() / 1000
        )
        this.queryInfo.end_time = parseInt(
          new Date(this.queryInfo.time[1]).getTime() / 1000
        )
      }else{
        this.queryInfo.start_time = '';
        this.queryInfo.end_time = '';
      }
      this.imgListData();
    },
    
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.seaarchBox{
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	.searchLeft{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.el-input{
			width: 200px;
		}
		/deep/.el-input-group__append{
			border-color: #43cdf6;
		}
		.title{
			margin: 0 5px 0 15px;
		}
		.el-button{
			background: #43cdf6;
			color: #fff;
    		border-color: #43cdf6;
		}
	}
	.exportRight{
		.renBtn{
			background: #ff6262;
			border-color: #ff6262;
		}
		.darkblueBtn{
			background: #3762ff;
			border-color: #3762ff;
		}
		.blueBtn{
			background: #43cdf6;
			border-color: #43cdf6;
		}
	}
}
.search-box {
  text-align: right;
  .el-input {
    width: 200px;
    vertical-align: middle;
  }
  .el-select {
    vertical-align: middle;
  }
}
/deep/.el-table th, /deep/.el-table td{
    text-align: center;
}
/deep/.el-table th{
    background-color: #43cdf6;
}
/deep/.el-table thead{
    color: #fff;
}
/deep/.el-table__body tr.hover-row > td{
	background-color: rgba(67,205,246,.22);
}
// 分页为蓝色调
/deep/.el-pagination .el-pager li.active{
  background-color: #0295ff!important;  
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover{
  color: #0295ff;
}
/deep/.el-input__inner:focus{
  outline: none;
  border-color: #0295ff;
}
// table复选框
/deep/.el-checkbox__input.is-checked .el-checkbox__inner{
	background-color: #3762ff;
    border-color: #3762ff;
}
</style>