<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-table
          class="tableClass"
          stripe
          border
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="520"
          max-height="520"
          size="small"
          :header-cell-style="{ background: '#EFEFEF', color: '#000000' }"
        >
          <el-table-column prop="jh" label="井号" width="300" align="center"> </el-table-column>
          <el-table-column prop="time" label="计算时间" width="200" align="center">
            <template slot-scope="scope"
              ><span :style="{ fontWeight: 'border', color: 'red' }">{{ scope.row.time }}</span></template
            >
          </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="query.pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="query.pageSize"
          layout="->, total, sizes, prev, pager, next,jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import newWarnApi from '@/api/newWarnApi'
import vue from 'vue'

export default {
  name: 'wellMathTime',
  mixins: [JeecgListMixin],
  //   props: {
  //     jh: {
  //       type: String,
  //       default: ''
  //     },
  //     date: {
  //       type: String,
  //       default: ''
  //     },
  //     startime: {
  //       type: String,
  //       default: ''
  //     },
  //     endTime: {
  //       type: String,
  //       default: ''
  //     },
  //   },
  data() {
    return {
      query: {
        jh: '',
        pageSize: 10,
        pageNo: 1
      },
      total: 0,
      tableData: [],
      /* table加载状态 */
      detailLoading: false,
      tabOption: []
    }
  },
  watch: {
  },
  created() {
    this.init()
  },
  mounted() {
    console.log('新模型')
  },
  methods: {
    init() {
      this.getWellMathTimePage()
      //this.getNewWarnHistoryPage()
    },
    getWellMathTimePage() {
      this.detailLoading = true
      newWarnApi.getWellMathTimePage(this.query).then(res => {
        console.log('预警实时计算时间', res)
        this.detailLoading = false
        this.total = res.result.total
        this.current = res.result.current
        this.tableData = res.result.records

      })
    },
    showSizeChange(val) {
      this.query.pageSize = val
      this.query.pageNo = 1
      this.getWellMathTimePage()
    },
    change(val) {
      this.query.pageNo = val
      this.getWellMathTimePage()
    }
  },
  beforeDestroy() {
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-body {
  padding: 7px;
}

.fixHeight {
  height: 100%;
  /deep/ .ant-spin-nested-loading {
    height: calc(100% - 35px);
    .ant-spin-container {
      height: 100%;
      .ant-table {
        height: 100%;
        .ant-table-content {
          height: 100%;
          .ant-table-scroll {
            height: 100%;
            overflow: hidden;
          }
        }
      }
    }
  }
}

/deep/ .high-light-row {
  background: yellow;
  td {
    color: red;
  }
}
.tableClass .cell {
  padding: 0 !important;
  height: 40px;
  line-height: 30px !important;
  text-align: center;
}
/deep/ .el-dialog__body {
  padding: 10px 30px;
}
/deep/ .el-form-item {
  margin-bottom: 0px;
}
</style>
