<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;padding: 20px" v-loading="isLoading">
    <div style="display: flex;flex-direction: row">
      <a-button   icon="arrow-left" size="large" @click="goBack"/>
      <el-input v-model="formData.jh" placeholder="请输入井号（模糊查询）"
                style="width: 280px;margin-right: 16px;margin-left: 16px" clearable></el-input>
      <el-button type="primary" @click="getData(1)">搜索</el-button>
    </div>
    <div style="flex: 1;overflow-y: scroll">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="jh"
          label="井号">
        </el-table-column>
        <el-table-column
          prop="approachingSurface"
          label="到达地面阈值">
        </el-table-column>
        <el-table-column
          prop="woh"
          label="坐卡阈值">
        </el-table-column>
        <el-table-column
          prop="onBottom"
          label="在井底阈值">
        </el-table-column>
        <el-table-column
          prop="isRotationOff"
          label="停转阈值">
        </el-table-column>
        <el-table-column
          prop="blockldle"
          label="游车静止阈值">
        </el-table-column>
        <el-table-column
          prop="noFlow"
          label="停泵阈值">
        </el-table-column>
        <el-table-column
          prop="pressureZero"
          label="立压为0阈值">
        </el-table-column>
        <el-table-column
          prop="bitMovingUp"
          label="钻头上行阈值">
        </el-table-column>
        <el-table-column
          prop="blockMovingUp"
          label="游车上行阈值">
        </el-table-column>
        <el-table-column
          prop="farBottom"
          label="离开井底阈值">
        </el-table-column>

      </el-table>
    </div>
    <el-pagination
      style="align-self: flex-end"
      background
      layout="prev, pager, next"
      :page-size="formData.pageSize"
      :total="totalNum"
      :current-page="formData.pageNo"
      @current-change="onPageChange">
    </el-pagination>
  </div>
</template>
<script>


import newWarnApi from '@api/newWarnApi'

export default {
  name: 'newWorkConditionParamPage',

  data() {
    return {
      isLoading: false,
      formData: {
        jh: '',
        pageNo: 1,
        pageSize: 15
      },
      tableData: [],
      totalNum: 0
    }
  },

  methods: {
    getData(page) {
      this.isLoading = true
      this.formData.pageNo = page
      console.log(page)
      newWarnApi.getOperatingConditionList(this.formData).then((res) => {
        this.totalNum = res.result.total
        this.tableData = res.result.records
      }).finally(() => {
        this.isLoading = false
      })

    },
    onPageChange(num) {
      this.getData(num)
    },
    goBack(){
      this.$router.go(-1)
    }
  },
  mounted() {

    this.getData(1)

  }
}
</script>


<style scoped lang="less">

</style>