<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.type"
          placeholder="请选择日志类型"
          clearable
        >
          <el-option
            v-for="item in teriminaloption"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="筛选数据:">
        <el-input
          v-model="formInline.searchValue"
          placeholder="请输入筛选描述的字段"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <Timeinterval ref="Timeinterval" :interval="3"></Timeinterval
      ></el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="queryData"
          >查询</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'"
        :row-class-name="rowClassName"
     
      >
        <el-table-column align="center" prop="number" label="序号" width="80">
          <template scope="scope">
            <span>{{
              (formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1
            }}</span>
          </template></el-table-column
        >
        <el-table-column
          align="center"
          prop="type"
          label="日志类型"
          width="180"
        ></el-table-column>
        <!-- <el-table-column
          align="center"
          prop="updateBy"
          label="更新用户"
          width="200"
        ></el-table-column> -->
        <el-table-column
          align="center"
          prop="updateTime"
          label="更新时间"
          width="180"
        >
          <template slot-scope="scope">
            <span> {{ scope.row.updateTime.replace("T", " ") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="remark"
          label="描述"
          :show-overflow-tooltip="true"
        ></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 { dicData } from "@/assets/commjs/dictypeData";
import api from "@/api/device/log";
export default {
  name: "operationlogs",
  components: {
    Timeinterval,
  },
  data() {
    return {
      loading: true,
      teriminaloption: [],
      vh: undefined,
      height: "",
      formInline: {
        type: "",
        searchValue: "",
        searchBeginTime: "",
        searchEndTime: "",
        pageNum: 1,
        pageSize: 20,
      },
      total: null,
      tableData: [],
    };
  },
  created() {},
  mounted() {
    this.getDevLog();
    this.queryData();

    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 96;
          
        },
    //获取所有日志类型
    getDevLog() {
      let code = "Dev_Ops";
      this.teriminaloption = dicData(code, []);
    },
    //序号
    rowClassName({ row, rowIndex }) {
      row.number = rowIndex + 1;
    },
    //查询列表
    queryData() {
      if(this.formInline.type !== '' || 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.getListData(this.formInline).then((res) => {
        if (res.code === "A0000") {
          this.tableData = res.data;
          this.total = this.tableData.length;
          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.getListData(this.formInline).then((res) => {
        if (res.code === "A0000") {
          this.tableData = res.data;
          this.total = this.tableData.length;
          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>
