<script setup lang="ts">
  import { Button, List, Tooltip } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicForm, useForm } from '/@/components/Form';
  import { PermissionEnum, formSchemas } from './config';
  import { TaskCard } from './components/TaskCard';
  import { getTaskCenterList } from '/@/api/task';
  import { ref, unref } from 'vue';
  import { onMounted } from 'vue';
  import { DetailModal } from './components/DetailModal';
  import { useModal } from '/@/components/Modal';
  import { TaskRecordType } from '/@/api/task/model';
  import { reactive } from 'vue';
  import { ReloadOutlined } from '@ant-design/icons-vue';
  import { DataActionModeEnum } from '/@/enums/toolEnum';
  import { ModalParamsType } from '/#/utils';
  import { Authority } from '/@/components/Authority';
  import { getBoundingClientRect } from '/@/utils/domUtils';
  import { RunTaskModal } from './components/RunTaskModal';
  import { DetailDrawer } from './components/DetailDrawer';
  import { useDrawer } from '/@/components/Drawer';

  const [registerModal, { openModal }] = useModal();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerRunTaskModal, { openModal: openRunTaskModal }] = useModal();

  const [registerForm, { getFieldsValue }] = useForm({
    schemas: formSchemas,
    baseColProps: { span: 8 },
    compact: true,
    showAdvancedButton: true,
    labelWidth: 100,
    submitFunc: async () => {
      getDataSource();
    },
  });

  const pagination = reactive({
    total: 10,
    current: 1,
    showQuickJumper: true,
    size: 'small',
    showTotal: (total: number) => `共 ${total} 条数据`,
  });

  const dataSource = ref<TaskRecordType[]>([]);
  const loading = ref(false);
  const getDataSource = async () => {
    try {
      loading.value = true;
      const params = getFieldsValue();
      const { items } = await getTaskCenterList({ page: 1, pageSize: 10, ...params });
      dataSource.value = items;
    } catch (error) {
      throw error;
    } finally {
      loading.value = false;
    }
  };

  const handleEdit = (record: TaskRecordType) => {
    openModal(true, {
      record,
      mode: DataActionModeEnum.UPDATE,
    } as ModalParamsType);
  };

  const handleRunTask = (record: TaskRecordType) => {
    openRunTaskModal(true, record);
  };

  const handleDetail = (record: TaskRecordType) => {
    openDrawer(true, { mode: DataActionModeEnum.READ, record } as ModalParamsType);
  };

  const reload = () => getDataSource();

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

  const setListHeight = () => {
    const clientHeight = document.documentElement.clientHeight;
    const rect = getBoundingClientRect(unref(listElRef)!.$el!) as DOMRect;
    // margin-top 24 height 24
    const paginationHeight = 24 + 24 + 8;
    // list pading top 8 maring-top 8 extra slot 56
    const listContainerMarginBottom = 8 + 8 + 72;
    const listContainerHeight =
      clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
    const listContainerEl = (unref(listElRef)!.$el as HTMLElement).querySelector(
      '.ant-spin-container'
    ) as HTMLElement;
    listContainerEl &&
      (listContainerEl.style.height = listContainerHeight + 'px') &&
      (listContainerEl.style.overflowY = 'auto') &&
      (listContainerEl.style.overflowX = 'hidden');
  };

  onMounted(() => {
    setListHeight();
    getDataSource();
  });
</script>

<template>
  <PageWrapper class="task-center-container">
    <section
      class="bg-light-50 flex p-4 justify-between items-center x dark:text-gray-300 dark:bg-dark-900"
    >
      <div class="text-2xl">任务中心</div>
      <Authority :value="PermissionEnum.CREATE">
        <Button
          type="primary"
          @click="openModal(true, { mode: DataActionModeEnum.CREATE } as ModalParamsType)"
        >
          创建任务
        </Button>
      </Authority>
    </section>
    <section
      class="form-container bg-light-50 px-4 pt-4 mt-4 x dark:text-gray-300 dark:bg-dark-900"
    >
      <BasicForm @register="registerForm" />
    </section>
    <section class="bg-light-50 mt-4 p-4 dark:text-gray-300 dark:bg-dark-900">
      <List
        ref="listElRef"
        :dataSource="dataSource"
        :pagination="pagination"
        :grid="{ gutter: 16, xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 4, column: 4 }"
        :loading="loading"
      >
        <template #header>
          <section class="flex justify-between gap-4 min-h-12 items-center">
            <div>
              <span class="text-lg font-medium">任务列表</span>
            </div>
            <Tooltip v-if="dataSource.length" title="刷新">
              <Button type="primary" @click="getDataSource">
                <ReloadOutlined :spin="loading" />
              </Button>
            </Tooltip>
          </section>
        </template>
        <template #renderItem="{ item }">
          <List.Item :key="item.id">
            <TaskCard
              :record="item"
              :reload="reload"
              @runTask="handleRunTask"
              @detail="handleDetail"
              @edit="handleEdit"
            />
          </List.Item>
        </template>
      </List>
    </section>
    <DetailDrawer @register="registerDrawer" />
    <DetailModal @register="registerModal" :reload="reload" />
    <RunTaskModal :reload="reload" @register="registerRunTaskModal" />
  </PageWrapper>
</template>

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

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