<template>
  <div class="L-app-container home" id="L-size-main">
    <div class="tabsBottom" :style="tabHeader">
      <div class="headerText">
        <div class="searchP">
          算法运行监测
          <span>算法运行：正常，数据获取：正常，数据推送：上一次时间 {{tableData[0].runningTime}}</span>
        </div>
      </div>
      <div class="arithmetic-query">
        <el-form :inline="true" :model="formInline" size="small" class="demo-form-inline">
          <el-form-item label="运行时间：">
            <el-date-picker
              v-model="formInline.time"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="请选择"
            >
            </el-date-picker>
          </el-form-item>
          
          <el-form-item>
            <el-button size="mini" @click="resetQuery('queryFrom')">重置</el-button>
            <el-button size="mini" type="primary" @click="handleQuery('queryFrom')">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <section class="table-box">
        <el-table v-loading="loading" :data="tableData" border>
          <el-table-column
            type="index"
            label="序号"
            width="55"
            align="center"
          />
          <el-table-column label="算法运行时间" align="center" prop="runningTime">
          </el-table-column>
          <el-table-column label="获取事件条数" align="center" prop="hqTotal">
          </el-table-column>
          <el-table-column label="推送驾驶舱条数" align="center" prop="tsTotal">
          </el-table-column>
        </el-table>
      </section>
    </div>
    <div class="my-pagination">
      <pagination
        id="L-pagination"
        :total="total"
        :page="pages.current"
        :limit="pages.size"
        @pagination="getPagination"
        :current-page.sync="pages.current"
      ></pagination>
    </div>
  </div>
</template>

<script>
// import tabContent from "./components/algorithmTime"
import { getEventLogs } from "@/api/platform/index"
export default {
  // components:{
  //   tabContent
  // },
  name: "Index",
  data() {
    return {
      pages: {
        current: 1,
        size: 10,
      },
      loading:false,
      tableData: [],
      total:0,
      tabHeader: {
        height: '',
      },
      formInline: {
        time: [],
      }
    };
  },
  mounted() {
    this.getList();
    this.cancalDebounce();
    window.addEventListener('resize', this.cancalDebounce);
  },
  destroyed() {
    window.removeEventListener('resize', this.cancalDebounce);
  },
  methods: {
    resetQuery(){
      this.formInline = {
        time:[],
      }
      this.pages = {
        current: 1,
        size: 10,
      }
      this.getList();
    },
    // 查询
    handleQuery(){
      if(this.formInline.time.length > 0) {
        this.formInline.startTime = this.formInline.time[0]
        this.formInline.endTime = this.formInline.time[1]
      }
      this.pages = {...this.pages,...this.formInline}
      this.getList();
    },
    // 获取列表
    getList(){
      this.loading = true;
      getEventLogs(this.pages).then(res=>{
        this.loading = false;
        this.total = res.data.total;
        this.tableData = res.data.records;
      })
    },
    // 页码获取
    getPagination(pages){
      this.pages.current = pages.page;
      this.pages.size = pages.limit;
      this.getList()
    },
    // 屏幕尺寸变化
    cancalDebounce(){
      const element = document.getElementById('L-size-main'); // 通过元素的 ID 获取元素
      const pagination = document.getElementById('L-pagination'); // 通过元素的 ID 获取元素
      const elementHeight = element.offsetHeight;
      const paginationtHeight = pagination.offsetHeight;
      this.tabHeader.height = (elementHeight - paginationtHeight - 100) + 'px';
    }
  }
};
</script>

<style scoped lang="scss">
</style>

