<template>
  <el-dialog title="采集井状态" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
    <!-- <el-card class="box-card"> -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline" label-width="60px" :label-position="'left'">
      <el-row :gutter="1">
        <el-col :span="8">
          <el-form-item label="井号：">
            <el-input v-model="searchForm.jh" placeholder="井号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态：">
            <!-- <el-input v-model="searchForm.status" placeholder="状态"></el-input> -->
            <el-select v-model="searchForm.statu" placeholder="请选择状态">
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="loadData">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- </el-card> -->
    <el-row>
      <el-col :span="24">
        <el-table v-loading="loading" :data="data" row-key="deptId" default-expand-all>
          <el-table-column prop="jh" label="井号" width="200"></el-table-column>
          <el-table-column prop="status" label="状态" width="200"></el-table-column>
          <el-table-column prop="realTime" label="采集时间" width="250"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="250" align="center"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination
          background
          style="padding: 19px 12px 0px 12px"
          @size-change="showSizeChange"
          @current-change="change"
          :current-page="params.pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="params.pageSize"
          layout="->, total, sizes, prev, pager, next,jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">关闭</el-button>
      <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
    </span>
  </el-dialog>
</template>

<script>
import realTimeLogApi from '@/api/warningThreshold/realTimeLogApi'
export default {
  name: 'RealTimeLog',
  data() {
    return {
      dialogVisible: false,
      searchForm: {
        jh: '',
        status: '',
      },
      total: 0,
      params: {
        jh: '',
        status: '',
        pageNo: 1,
        pageSize: 10
      },
      loading: false,
      data: [],

      statusOptions: [
        {
          value: '在线',
          label: '在线'
        },
        {
          value: '离线',
          label: '离线'
        }
      ]
    }
  },
  created() { },
  mounted() { },
  methods: {
    open() {
      this.dialogVisible = true
      this.loadData()
    },
    loadData() {
      realTimeLogApi.page(this.params).then(res => {
        console.log('获取的实时分页数据:', res)
        var result = res.result
        this.data = result.records
        this.params.pageNo = result.current
        this.params.pageSize = result.size
        this.total = result.total
      })
    },
    showSizeChange(val) {
      this.params.pageSize = val
      this.params.pageNo = 1
      this.loadData()
    },
    change(val) {
      this.params.pageNo = val
      this.loadData()
    },
    handleClose() {
      this.dialogVisible = false
      this.params = {
        jh: '',
        status: '',
        pageNo: 1,
        pageSize: 10
      }
    },
  }
}
</script>

<style>
</style>