<template>
  <a-modal
    v-model:visible="visible"
    :width="320"
    :mask-closable="false"
    :esc-to-close="false"
    :closable="false"
    :footer="false"
    hide-title
    @before-open="modalBeforeOpen"
  >
    <div style="text-align: center">
      <a-spin :tip="taskTips" />
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import useTimeout from '@/hooks/timout';
  import useModal from '@/hooks/modal';

  defineOptions({
    name: 'TaskDetailBuildProgess',
  });

  /* modal */
  const { visible, open, close } = useModal();
  defineExpose({ open, close });

  const props = defineProps<{
    taskId: number;
    taskStop: boolean;
  }>();

  const taskTips = ref('');

  const { addSetTimeout, clearSetTimeout } = useTimeout();

  async function getTaskDetailCount() {
    clearSetTimeout('count');
    const trackTaskDetailCount = await window.db.getTrackTaskDetailCount({
      trackTaskId: props.taskId,
    });
    taskTips.value = `正在构建下载任务，数量${trackTaskDetailCount}`;

    if (props.taskStop) {
      taskTips.value = '';
      close();
      return;
    }
    addSetTimeout('count', getTaskDetailCount, 1 * 1000);
  }

  function modalBeforeOpen() {
    getTaskDetailCount();
  }
</script>
