<template>
  <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="推送状态:">
        <el-select v-model="formInline.result" placeholder="请选择推送状态">
          <el-option
            v-for="item in teriminaloption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="筛选数据:">
        <el-input
          v-model="formInline.searchValue"
          placeholder="请输入要筛选的字段"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <Timeinterval ref="Timeinterval" :interval="2"></Timeinterval
      ></el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryData" icon="el-icon-search"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <el-row>
      <el-table
        stripe
        header-cell-class-name="table_header"
        :data="tableData"
        border
        style="width: 100%"
        highlight-current-row
        :height="vh + 'px'"
      
      >
        <!-- <el-table-column
          align="center"
          prop="xh"
          label="序号"
           width="80"
        ></el-table-column> -->
        <el-table-column
          align="center"
          prop="time"
          label="暂降时间"
          width="220"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="powerCompany"
          label="供电公司"
          width="220"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="substation"
          label="变电站名称"
          width="220"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="line"
          label="监测点名称"
          width="220"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="eventValue"
          label="特征幅值(%)"
          width="220"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="persistTime"
          label="持续时间(s)"
          width="220"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="creatTime"
          label="首次推送时间"
          width="220"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="creatTimed"
          label="推送成功时间"
          width="220"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="pushFailed"
          label="推送失败次数"
          width="220"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="result"
          label="推送结果"
          width="220"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="updateTime"
          label="人工推送时间"
          width="220"
        ></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.state !== '成功'"
              type="primary"
              size="mini"
              >推送</el-button
            >
            <el-button
              v-if="scope.row.state == '成功'"
              type="primary"
              disabled
              size="mini"
              >已推送</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="mt10"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.pageNum"
        :page-sizes="[20, 30, 40, 50, 100]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>
<script>
import Timeinterval from "@/views/components/TimePicker/index4";
import api from "@/api/device/log";
export default {
  name: "suspensionlog",
  components: {
    Timeinterval,
  },
  data() {
    return {
      loading: true,
      teriminaloption: [
        {
          name: "全部",
          id: null,
        },
        {
          name: "成功",
          id: 1,
        },
        {
          name: "失败",
          id: 0,
        },
      ],
      vh: undefined,
      formInline: {
        searchValue: "",
        result: '',
        pageNum: 1,
        pageSize: 20,
      },
      total: null,
      height: "",
      tableData: [],
    };
  },
  created() {},
  mounted() {
    this.queryData();
  
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 96;
          
        },
    //查询列表
    queryData() {
      if(this.formInline.result !== '' || this.formInline.searchValue !== ''){
        this.formInline.pageNum = 1
      }
      this.loading = true;
      this.formInline.searchBeginTime = this.$refs.Timeinterval.timeValue[0];
      this.formInline.searchEndTime = this.$refs.Timeinterval.timeValue[1];
      api.getEventList(this.formInline).then((res) => {
        if (res.code == "A0000") {
          this.total = res.data.total;
          this.tableData = res.data.records;
          this.loading = false;
        } else if ((res.data = null)) {
          this.loading = false;
        }
      });
    },
    //分页查询用
    queryData1() {
      this.loading = true;
      this.formInline.searchBeginTime = this.$refs.Timeinterval.timeValue[0];
      this.formInline.searchEndTime = this.$refs.Timeinterval.timeValue[1];
      api.getEventList(this.formInline).then((res) => {
        if (res.code == "A0000") {
          this.total = res.data.total;
          this.tableData = res.data.records;
          this.loading = false;
        } else if ((res.data = null)) {
          this.loading = false;
        }
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.queryData1();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.queryData1();
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
  height: 32px;
}
// ::v-deep .table_header {
//   height: 35px !important;
// }
</style>
