<script setup lang="tsx">
  import SuperTable from '~/components/SuperTable.vue';
  import type { TableProps } from 'tdesign-vue-next';

  const pagination = ref<TableProps['pagination']>({
    defaultPageSize: 10,
    total: 100,
    defaultCurrent: 1,
  });
  const columns = ref<TableProps['columns']>([
    {
      colKey: 'index',
      title: '序号',
    },
    {
      colKey: 'date',
      title: '日期',
    },
    {
      colKey: 'name',
      title: '姓名',
    },
    {
      colKey: 'province',
      title: '省份',
    },
    {
      colKey: 'city',
      title: '市区',
    },
    {
      colKey: 'address',
      title: '地址',
    },
    {
      colKey: '',
      title: '邮编',
    },
    {
      colKey: 'operator',
      title: '操作',
      cell: (_, { row }) => (
        <div>
          <t-button onClick={() => editUser(row)}>编辑</t-button>
          <t-button onClick={() => deleteUser(row)}>删除</t-button>
        </div>
      ),
    },
  ]);
  const data = ref([]);
  for (let i = 0; i < 30; i++) {
    data.value.push({
      index: i + 1,
      date: '2023-10-01',
      name: 'John Doe',
      province: 'Province A',
      city: 'City A',
      address: 'Address A',
      postalCode: '123456',
    } as never);
  }

  function editUser(row: never) {}

  function deleteUser(row: never) {}
</script>

<template>
  <div class="p-6">
    <div class="flex justify-between p-4">
      <t-button>新增</t-button>
      <t-input placeholder="搜索" clearable class="max-w-60">
        <template #suffixIcon>
          <search-icon :style="{ cursor: 'pointer' }" />
        </template>
      </t-input>
    </div>
    <super-table
      :data="data"
      :columns="columns"
      :loading="false"
      :pagination="pagination"
    ></super-table>
  </div>
</template>

<style scoped lang="less"></style>
