<template>
  <div class="block">
    <h1>概述</h1>
    <p>显示一个全局“加载中”的状态</p>
  </div>
  
  <div class="block">
    <h1>代码示例</h1>
    <RunCase label="任务未开始" file="./task-status/None.vue">
      <template #component>
        <None />
      </template>
      <template #description>
        <p><code>status</code>等于<code>none</code>时表示任务未开始</p>
      </template>
    </RunCase>

    <RunCase label="正在上传照片" file="./task-status/Uploading.vue">
      <template #component>
        <Uploading />
      </template>
      <template #description>
        <p><code>status</code>等于<code>uploading</code>时表示正在上传照片，此时需要提供<code>upload</code>属性来表示上传的进度信息</p>
      </template>
    </RunCase>

    <RunCase label="任务正在排队" file="./task-status/Waiting.vue">
      <template #component>
        <Waiting />
      </template>
      <template #description>
        <p><code>status</code>等于<code>waiting</code>时表示正在排队等待处理，此时需要提供<code>waitingNumber</code>属性来表示排队序号</p>
      </template>
    </RunCase>

    <RunCase label="任务正在处理" file="./task-status/Processing.vue">
      <template #component>
        <Processing />
      </template>
      <template #description>
        <p><code>status</code>等于<code>processing</code>时表示任务正在处理，此时需要提供<code>logs</code>属性，程序会从logs中解析任务的进度</p>
      </template>
    </RunCase>

    <RunCase label="任务被终止" file="./task-status/Stop.vue">
      <template #component>
        <Stop />
      </template>
      <template #description>
        <p><code>status</code>等于<code>stop</code>时表示任务被终止</p>
      </template>
    </RunCase>

    <RunCase label="任务出错" file="./task-status/Error.vue">
      <template #component>
        <Error />
      </template>
      <template #description>
        <p><code>status</code>等于<code>error</code>时表示任务出错</p>
      </template>
    </RunCase>
  </div>

  <div class="block">
    <h1>API</h1>
    <h2>props</h2>
    <PropsTable type="task-status"/>
    <h2>events</h2>
    <EventsTable type="task-status"/>
  </div>
  
</template>

<script setup>
import None from '../components/task-status/None.vue'
import Uploading from '../components/task-status/Uploading.vue'
import Waiting from '../components/task-status/Waiting.vue'
import Processing from '../components/task-status/Processing.vue'
import Error from '../components/task-status/Error.vue'
import Stop from '../components/task-status/Stop.vue'

</script>