<script lang="ts" setup>
  import { ref } from 'vue';
  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';
  import { useI18n } from '/@/hooks/web/useI18n';

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

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

  const [registerCardList, { reload }] = useCardList({
    title: t('deviceManagement.device.taskListText'),
    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 fromDeviceDetail = ref(true);

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

<template>
  <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
      :tbDeviceId="tbDeviceId"
      :fromOrigin="fromDeviceDetail"
      :reload="reload"
      @register="registerRunTaskModal"
    />
  </section>
</template>

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