<template>
  <a-table
    ref="table"
    rowKey="name"
    size="middle"
    :row-selection="rowSelection"
    :columns="props.tableData.columns"
    :data-source="data"
    :pagination="pagination"
    :customRow="rowClick"
    :rowClassName="setRowClassName"
    :scroll="{ y: scrollY }"
    @change="tableChange"
  >
    <template #action="{ record }">
      <span style="margin-right: 20px" v-if="record">
        <a>详情</a>
      </span>
      <span>
        <a>修改</a>
      </span>
    </template>
  </a-table>
</template>
<script setup lang="ts">
  import { computed, ref, unref, onMounted } from 'vue';
  import { Table } from 'ant-design-vue';

  const props = defineProps({
    tableData: {
      type: Object,
      default: () => {},
    },
  });
  let scrollY = ref();
  onMounted(() => {
    scrollY.value = document.querySelector('.ant-table-wrapper')!.clientHeight - 135;
    console.log(scrollY, 123);
  });
  // console.log(scrollY)
  // const columns = [
  //   {
  //     title: '序号',
  //     width: '100px',
  //     dataIndex: 'index',
  //     key: 'index',
  //     customRender: (text, record, index, column) => {
  //       return text.index + 1;
  //     },
  //   },
  //   {
  //     title: 'Name',
  //     dataIndex: 'name',
  //   },
  //   {
  //     title: 'Age',
  //     dataIndex: 'age',
  //   },
  //   {
  //     title: 'Address',
  //     dataIndex: 'address',
  //   },
  // ];
  interface DataItem {
    key: string;
    name: string;
    age: number;
    address: string;
    ellipsis: boolean;
  }
  const data: DataItem[] = [];
  for (let i = 0; i < 46; i++) {
    data.push({
      key: i.toString(),
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park ${i}`,
      ellipsis: true,
    });
  }
  const pagination = {
    current: 1,
    pageSize: 10,
    defaultPageSize: 10,
    showTotal: (total) => `共 ${total} 条数据`,
    showSizeChanger: true, // 可以改变每页个数
    pageSizeOptions: ['10', '20', '30', '40'],
    // onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize),
    // // 改变页数时时触发函数
    // onChange: (current) => {
    //   // this.currentPage = current;
    // },
  };
  function tableChange(e) {
    console.log(e); // 分页、排序、筛选变化时的数据
  }
  // 点击表格行，执行操作（双击也可以在这里写）
  let currentRow = ref([]);
  function rowClick(record) {
    // console.log(33);
    return {
      on: {
        click: () => {
          // console.log(record);
          currentRow.value = record; //自己定义个变量，用于保存点击行的数据
        },
      },
    };
  }
  // 行样式设置
  function setRowClassName(record, index) {
    let rowColor = index % 2 === 0 ? 'evenRowStyl' : ''; //判断单双行，赋予不同样式
    return record === currentRow.value ? 'clickRowStyl' : rowColor; //赋予点击行样式
  }

  // 表格方法
  const selectedRowKeys = ref([]); // Check here to configure the default column

  const onSelectChange = (changableRowKeys) => {
    console.log('selectedRowKeys changed: ', changableRowKeys);
    selectedRowKeys.value = changableRowKeys;
  };
  const rowSelection = computed(() => {
    return {
      selectedRowKeys: unref(selectedRowKeys),
      onChange: onSelectChange,
      hideDefaultSelections: true,
      selections: [
        Table.SELECTION_ALL,
        Table.SELECTION_INVERT,
        Table.SELECTION_NONE,
        {
          key: 'odd',
          text: 'Select Odd Row',
          onSelect: (changableRowKeys) => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
              if (index % 2 !== 0) {
                return false;
              }
              return true;
            });
            selectedRowKeys.value = newSelectedRowKeys;
          },
        },
        {
          key: 'even',
          text: 'Select Even Row',
          onSelect: (changableRowKeys) => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
              if (index % 2 !== 0) {
                return true;
              }
              return false;
            });
            selectedRowKeys.value = newSelectedRowKeys;
          },
        },
      ],
    };
  });
  //
</script>
<style lang="less" scoped>
  .ant-table-wrapper {
    height: 100%;
  }

  :deep(.ant-table-pagination.ant-pagination) {
    float: right;
    margin: 0;
    background: #fff;
    width: 100%;
    height: 50px;
    line-height: 50px;
  }

  /* 表格斑马样式 **/
  :deep(.ant-table-tbody tr:nth-child(2n)) {
    background-color: #f5f5f5;
  }

  :deep(.ant-table-tbody tr:nth-child(n):hover > td) {
    background-color: #eaf1fd;
    color: #e7a26e;
  }

  // :deep(.ant-table-thead > tr > th) {
  //   background: #d5e3fa;
  // }

  :deep(.ant-table-tbody) {
    overflow: auto;
  }
  // 选择行高亮
  // :deep(.ant-table-tbody > tr.ant-table-row-selected td) {
  //   background-color: #e6f7ff !important;
  // }
  //点击行的样式
  .clickRowStyl {
    background-color: #1919bd !important;
  }

  .editable-row-operations a {
    margin-right: 8px;
  }
</style>
