<script lang="ts" setup>
  import { TaskCard } from '/@/views/task/center/components/TaskCard';
  import { formSchemas } from '/@/views/task/center/config';
  import { getTaskCenterList } from '/@/api/task';
  import { TaskRecordType } from '/@/api/task/model';
  import { RunTaskModal } from '/@/views/task/center/components/RunTaskModal';
  import { useModal } from '/@/components/Modal';
  import { useCardList, BasicCardList } from '/@/components/CardList';

  const props = defineProps<{
    tbDeviceId: string;
  }>();

  const [registerRunTaskModal, { openModal }] = useModal();

  const [registerCardList, { reload }] = useCardList({
    title: '任务列表',
    api: getTaskCenterList,
    baseLayout: { col: 3, row: 2 },
    useSearchForm: true,
    formConfig: {
      schemas: formSchemas,
      labelWidth: 100,
      baseColProps: { span: 8 },
    },
    offsetHeight: 16,
    beforeFetch: async (params: Recordable) => {
      return { ...params, tbDeviceId: props.tbDeviceId };
    },
  });

  const handleRunTask = (record: TaskRecordType) => {
    openModal(true, record);
  };
</script>

<template>
  <!-- <PageWrapper
    class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700 device-task-list-container"
  > -->
  <section class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700 device-task-list-container">
    <BasicCardList class="flex-auto w-full" @register="registerCardList">
      <template #renderItem="{ item }">
        <TaskCard
          :record="item"
          :reload="reload"
          :tbDeviceId="tbDeviceId"
          :deviceTaskCardMode="true"
          @runTask="handleRunTask"
        />
      </template>
    </BasicCardList>
    <RunTaskModal :reload="reload" @register="registerRunTaskModal" />
  </section>
  <!-- </PageWrapper> -->
</template>

<style lang="less" scoped>
  .device-task-list-container {
    :deep(.ant-list-header) {
      border: none;
    }

    // :deep(.ant-card-body) {
    //   padding: 16px 24px;
    // }
  }
</style>