<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">
    <span slot="gateType" slot-scope="text">
      <span v-if="text.gateType == '1'">分(泄)洪闸</span>
      <span v-else-if="text.gateType == '2'">节制闸</span>
      <span v-else-if="text.gateType == '3'">排(退)水闸</span>
      <span v-else-if="text.gateType == '4'">引(进)水闸</span>
      <span v-else-if="text.gateType == '5'">挡潮闸</span>
      <span v-else-if="text.gateType == '6'">船闸</span>
      <span v-else-if="text.gateType == '9'">其它</span>
      <span v-else></span>
    </span>
    <span slot="engScal" slot-scope="text">
      <span v-if="text.engScal == '1'">大型</span>
      <span v-else-if="text.engScal == '2'">中型</span>
      <span v-else-if="text.engScal == '3'">小型</span>
      <span v-else></span>
    </span>
    <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: 'gateName',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
        },
        {
          title: '水闸类型',
          dataIndex: 'gateType',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
        },
        {
          title: '工程规模',
          dataIndex: 'engScal',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
        },
        {
          title: '所在位置',
          dataIndex: 'locationXiang',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
        },
        {
          title: '归口管理部门',
          dataIndex: 'gateAdmName',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
        },
        {
          title: '所在分组',
          dataIndex: 'pnm',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
        },
        {
          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>