import { List } from "@queenjs/ui";
import { Empty, Pagination, Spin } from "ant-design-vue";
import { defineUI } from "queenjs";
import { any, number, string } from "vue-types";

export default defineUI({
  props: {
    columns: number().def(5),
    gap: string().def("15px"),
    item: any().isRequired,
    control: any().isRequired,
  },
  setup(props) {
    return () => {
      const { control, columns, gap } = props;
      const loading = control.state.loading;

      return (
        <div>
          {loading && (
            <div class="h-200px flex items-center justify-center">
              <Spin spinning tip="加载中"></Spin>
            </div>
          )}
          {!loading && (
            <>
              <List gap={gap} columns={columns} data={control.state.list}>
                {{
                  item: (record: any) => props.item?.(record),
                  empty: () => <Empty class="py-50px" description="暂无数据" />,
                }}
              </List>
              <div class="text-center my-50px">
                <Pagination
                  size="default"
                  hideOnSinglePage
                  showSizeChanger={false}
                  pageSize={control.state.size}
                  total={control.state.total}
                  current={control.state.page}
                  onChange={(p) => control.loadPage(p)}
                />
              </div>
            </>
          )}
        </div>
      );
    };
  },
});