<template>
  <a-table :columns="columns" :data-source="tableData" @change="handleCurrentChange" :loading="loading" rowKey="index" :pagination="{total, defaultPageSize: pageSize, showTotal: total => `共${total}条`}" style="width: 100%;" :style="{height: tableHeight + 'px'}" ref="dcryTable">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'action'">
        <a v-if="ownPriv('manage')" @click="deleteHandler(record)">删除</a>
      </template>
    </template>
  </a-table>
</template>

<script>
export default {
  name: 'xiaoshuiku',
  props: ['tableData', 'pageIndex', 'pageSize', 'total', 'loading'],
  data() {
    return {
      tableHeight: window.innerHeight - 280,
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '50px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '50px',
              },
            };
          },
        },
        {
          title: '水库名称',
          dataIndex: 'rsName',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
        },
        {
          title: '水库管理单位',
          dataIndex: 'rsAdmName',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
        },
        {
          title: '位置',
          dataIndex: 'location',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          customCell: () => {
            return {
              style: {
                'min-width': '140px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '140px',
              },
            };
          },
        },
      ],
    };
  },
  methods: {
    handleCurrentChange(item) {
      this.$emit('handleCurrentChange', item.current);
    },
    deleteHandler(row) {
      this.$emit('deleteHandler', row);
    },
  },
};
</script>

<style lang='less' scoped>
/deep/ .ant-table-pagination {
  float: left;
}
/deep/ .ant-table-thead > tr > th, /deep/ .ant-table-tbody > tr > td {
  padding: 0;
  height: 50px;
}
</style>