import { defineComponent, reactive } from "vue";
import { array, bool, object, string } from "vue-types";

import { List } from "ant-design-vue";
import { css } from "@linaria/core";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  props: {
    dataSource: array<any>().isRequired,
    loading: bool(),
    actions: object() as any,
  },
  setup(props, { slots }) {
    const state = reactive({
      loading: false,
    });
    const route = useRoute();
    const router = useRouter();
    return () => {
      const { dataSource, actions } = props;
      return (
        <div class={ListContent}>
          <List
            loading={state.loading}
            grid={{ gutter: 18, xs: 2, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }}
            dataSource={dataSource}
            rowKey={(item) => item._id}
            renderItem={({ item, index }) => {
              return <List.Item>{slots.item?.(item, index)}</List.Item>;
            }}
            pagination={{
              hideOnSinglePage: true,
              current: actions.state.page * 1,
              pageSize: actions.state.size,
              total: actions.state.total,
              onChange: (v) => {
                const query = { ...route.query, page: v };
                router.push({ path: route.path, query });
              },
            }}
          ></List>
        </div>
      );
    };
  },
});
const ListContent = css`
  .ant-list-pagination {
    text-align: center;
    .ant-pagination-item-active {
      background: var(--vt-c-primary);
      border-color: var(--vt-c-primary);
      a {
        color: #fff;
      }
    }
  }
`;
