<template>
  <div>
    <div class="search-form">
      <a-button type="error" style="font-size: 12px" @click="getlist"> 刷新 </a-button>
    </div>
    <div class="table">
      <a-table
        size="small"
        :scroll="{ y: 500 }"
        bordered
        :pagination="true"
        :columns="detailColumns"
        :dataSource="tableData"
        :loading="detailLoading"
      >
        <template slot="editRemark" slot-scope="text, record">
          <a-button type="link" size="small" @click="del(record)">删除</a-button>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import newWarnApi from '@/api/newWarnApi'
export default {
  data() {
    return {
      query: {
        pageSize: 100,
        pageNo: 1
      },
      detailLoading: false,
      tableData: [],
      detailColumns: [
        {
          title: '序号',
          key: 'rowIndex',
          dataIndex: '',
          width: 80,
          align: 'center',
          customRender: (t, r, i) => parseInt(i) + 1
        }, {
          title: '井号',
          key: 'jh',
          dataIndex: '',
          width: 80,
          align: 'center',
          dataIndex: 'jh'
        }, {
          title: '表名',
          key: 'jhTableName',
          dataIndex: '',
          width: 80,
          align: 'center',
          dataIndex: 'jhTableName'
        }, {
          title: '操作',
          key: 'opteration',
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'editRemark' }
        }
      ]
    }
  },
  created() {
    console.log('aa')
    this.getlist()
  },
  mounted() {
  },
  methods: {
    add() { },
    getlist() {
      this.detailLoading = true
      newWarnApi.getWarningJhPage(this.query).then(res => {
        console.log('井号数据表', res)
        this.detailLoading = false
        this.tableData = res.result.records
      })
    },
    del(record) {
      console.log(record)
      newWarnApi.delWarningJh({ id: record.id }).then(res => {
        console.log('删除结果', res)
        this.getlist()
      })
    }
  }
}
</script>

<style>
</style>
<style lang="less" scoped>
.search-form {
  width: 100%;
  height: 3rem;
}
.table-data {
  width: 100%;
  height: auto;
}
</style>