<template>
  <div style="padding: 0.5% 0.5%">
    <el-row>
      <el-col :span="8">
        <span style="font-weight: ; font-size: 14px">日志类型:</span>
        <el-select v-model="teriminal" placeholder="请选择日志类型">
          <el-option
            v-for="item in teriminaloption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <span style="font-weight: ; font-size: 14px">筛选数据:</span>
        <el-input
          v-model="input"
          style="width: 40%"
          placeholder="请输入要筛选的字段"
        ></el-input>
      </el-col>
      <el-col :span="16">
        <timepicker
          @querfromdata="querfromdata"
          :interval="interval"
          :falg="falg"
        ></timepicker>
      </el-col>
    </el-row>
    <el-row>
      <el-table
        stripe
        stripe
        :data="tableData"
        border
        style="width: 100%"
        highlight-current-row
        :height="height"
        :header-cell-style="{
          height: '25px',
          top: '0px',
          padding: '0px',
        }"
        :row-style="{ height: '25px' }"
        :cell-style="{ padding: '0px' }"
      >
        <el-table-column
          align="center"
          prop="xh"
          label="序号"
          width="180"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="名称"
          width="220"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="rzlx"
          label="日志类型"
          width="180"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="xgry"
          label="更改人员"
          width="200"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="ggsj"
          label="更改时间"
          width="180"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="ms"
          label="描述"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
      <el-pagination
        style="float: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="pageData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>
<script>
import { tableheight } from "@/assets/commjs/common";
import timepicker from "../../components/TimePicker/index4";
export default {
  components: {
    timepicker,
  },
  data() {
    return {
      height: "",
      tableData: [
        {
          xh: "1",
          name: "pqs_882b2_4",
          rzlx: "终端状态日志",
          xgry: "njcnsers",
          ggsj: "2022-05-09 14:03:26",
          ms: "审核专用将常熟市常熟长春化工_6600106544下的pqs_882b2_4(00-B7-8D-00-AE-1C)由投运状态更改到...",
        },
        {
          xh: "2",
          name: "pqs_882b2_45",
          rzlx: "终端状态日志",
          xgry: "njcnsers",
          ggsj: "2022-05-09 14:03:26",
          ms: "审核专用将常熟市常熟长春化工_6600106544下的pqs_882b2_4(00-B7-8D-00-AE-1C)由投运状态更改到...",
        },
      ],
      //分页
      pageData: {
        currentPage: 1,
        pagesize: 100,
        total: 200,
      },
    };
  },
  created() {},
  mounted() {
    this.height = tableheight() + "px";
  },
  methods: {
    handleCurrentChange() {},
    handleCurrentChange() {},
  },
};
</script>