<script lang="ts" setup>
  import { ReloadOutlined } from '@ant-design/icons-vue';
  import { Button, List, Space, Tooltip } from 'ant-design-vue';
  import { reactive } from 'vue';
  import { ref } from 'vue';
  import { BasicForm, useForm } from '../../Form';
  import { basicListProps } from './props';
  import { ExtractPropTypes } from 'vue';
  defineProps<ExtractPropTypes<typeof basicListProps>>();

  const [registerForm] = useForm({
    schemas: [
      {
        field: '123',
        label: 'test',
        component: 'Input',
      },
    ],
    labelWidth: 100,
    layout: 'inline',
    baseColProps: { span: 8 },
    showAdvancedButton: true,
    compact: true,
  });

  const listElRef = ref<Nullable<ComponentElRef>>(null);

  const pagination = reactive({ size: 'small' });

  const loading = ref(false);

  const dataSource = ref([]);

  const getDataSource = () => {};
</script>

<template>
  <section class="basic-list-container">
    <section class="mb-4 bg-light-50 p-2 x dark:text-gray-300 dark:bg-dark-900">
      <BasicForm @register="registerForm" />
    </section>
    <section class="bg-light-50 p-2 x dark:text-gray-300 dark:bg-dark-900">
      <List
        ref="listElRef"
        :dataSource="dataSource"
        :pagination="pagination"
        :grid="{ gutter: 16, xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 3, column: 3 }"
        :loading="loading"
      >
        <template #header>
          <section class="flex px-5 justify-between gap-4 min-h-12 items-center">
            <div class="text-lg font-semibold">
              <span>任务列表</span>
            </div>
            <Space>
              <slot name="toolbar"></slot>
              <Tooltip title="刷新">
                <Button type="primary" @click="getDataSource">
                  <ReloadOutlined :spin="loading" />
                </Button>
              </Tooltip>
            </Space>
          </section>
        </template>
        <template #renderItem="{ item }">
          <List.Item :key="item.id">
            <slot name="item" :item="item"></slot>
          </List.Item>
        </template>
      </List>
    </section>
  </section>
</template>

<style lang="less" scoped>
  .basic-list-container {
    :deep(.ant-list-header) {
      padding-top: 0;
      padding-bottom: 8px;
    }
  }
</style>