<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="engScal" slot-scope="text">
      <span v-if="text.engScal == '1'">大（1）型</span>
      <span v-else-if="text.engScal == '2'">大（2）型</span>
      <span v-else-if="text.engScal == '3'">中型</span>
      <span v-else-if="text.engScal == '4'">小（1）型</span>
      <span v-else>小（2）型</span>
    </span>
    <span slot="rsAdmDep" slot-scope="text">
      <span v-if="text.rsAdmDep == 1">水利部门</span>
      <span v-else-if="text.rsAdmDep == 2">电力部门</span>
      <span v-else-if="text.rsAdmDep == 3">农业部门</span>
      <span v-else-if="text.rsAdmDep == 4">林业部门</span>
      <span v-else-if="text.rsAdmDep == 5">城建部门</span>
      <span v-else-if="text.rsAdmDep == 6">航运部门</span>
      <span v-else-if="text.rsAdmDep == 7">环保部门</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: 'rsName',
          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': '100px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
        },
        {
          title: '归口管理部门',
          dataIndex: 'rsAdmDep',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
        },
        {
          title: '所在位置',
          dataIndex: 'rsAdmName',
          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>