<template>
  <a-card class="markdown-body">
    <h3>1. 预约列表</h3>
    <p><img
      src='./img/预约管理0.png'
      alt='预约管理0' referrerPolicy='no-referrer'/></p>
    <p>该页面显示所有的预约记录</p>
    <ol start=''>
      <li><p>筛选</p>
        <ol start=''>
          <li>按照日期筛选<img
            src='./img/预约管理1.png'
            alt='预约管理1' referrerPolicy='no-referrer'/></li>
          <li>按照预约开始结束时间筛选<img
            src='./img/预约管理2.png'
            alt='预约管理2' referrerPolicy='no-referrer'/></li>
          <li>按照房间筛选<img
            src='./img/预约管理3.png'
            alt='预约管理3' referrerPolicy='no-referrer'/></li>
          <li>按照状态筛选<img
            src='./img/预约管理4.png'
            alt='预约管理4' referrerPolicy='no-referrer'/></li>

        </ol>
      </li>
      <li><p>排序<img
        src='./img/预约管理5.png'
        alt='预约管理5' referrerPolicy='no-referrer'/></p>
      </li>
      <li><p>按照预约ID、用户名、房间名、日期模糊搜索。</p>
      </li>
      <li><p>点击<code>重置</code>将所有筛选、排序、搜索条件清空。</p>
      </li>
      <li><p>点击<code>新建预约</code>，跳转到新建预约界面。</p>
      </li>
      <li><p>点击列表中<code>编辑</code>，跳转到该条预约的详情页面。</p>
      </li>

    </ol>
    <h3>2. 预约详情</h3>
    <p><img
      src='./img/预约管理6.png'
      alt='预约管理6' referrerPolicy='no-referrer'/></p>
    <p><img
      src='./img/预约管理7.png'
      alt='预约管理7' referrerPolicy='no-referrer'/></p>
    <ol start=''>
      <li><p>预约信息</p>
        <p>显示该条预约的详细信息。</p>
        <blockquote><p>预约状态</p>
          <ol start=''>
            <li>正在申请</li>

          </ol>
          <p>预约申请已经提交到系统，但是系统还未确定是否有效。</p>
          <ol start='2'>
            <li>申请成功</li>

          </ol>
          <p>预约申请有效。</p>
          <ol start='3'>
            <li>申请失败</li>

          </ol>
          <p>预约申请与其他申请在时间上冲突，系统判定无效。（有消息队列确保申请顺序，<a href=''>FIFO</a>）</p>
          <ol start='4'>
            <li>被取消</li>

          </ol>
          <p>该预约申请被人为取消。</p>
        </blockquote>
      </li>
      <li><p>取消预约</p>
      </li>

    </ol>
    <p>填写取消原因，点击<code>取消预约</code>即可。</p>
    <p><code>取消人</code>是当前登录用户。</p>
    <p>该过程不可逆！！！</p>
    <p><img
      src='./img/预约管理8.png'
      alt='预约管理8' referrerPolicy='no-referrer'/></p>
    <h3>3. 新建预约</h3>
    <p><img
      src='./img/预约管理9.png'
      alt='预约管理9' referrerPolicy='no-referrer'/></p>
    <p>该界面主要用于教师选择多个座位给自己的学生。该座位可以由教师或者其学生签到签离。</p>
    <ol start=''>
      <li><p>房间</p>
        <p>选择指定的房间。</p>
      </li>
      <li><p>日期</p>
        <p>选择预约日期。受到设置中<code>提前预约时间</code>的限制。</p>
      </li>
      <li><p>开始时间</p>
        <p>选择开始时间。受到设置中<code>开始时间</code>的限制。</p>
      </li>
      <li><p>结束时间</p>
        <p>选择结束时间。受到设置中<code>结束时间</code>的限制。</p>
      </li>
      <li><p>座位</p>
        <p>选择房间、日期、开始时间、结束时间后，会自动显示对应的座位状态。</p>
        <p>白色方框是可选座位；红色方框是改时间端这个座位有占用的情况，所以不可选；蓝色方框是已选则的座位。</p>
        <p>可以多选。</p>
      </li>
      <li><p>预约人</p>
        <p>可以通过搜索关键字选择用户，但用户角色只能是教师。<img
          src='./img/预约管理10.png'
          alt='预约管理10' referrerPolicy='no-referrer'/></p>
      </li>
    </ol>
  </a-card>
</template>

<script>
export default {
  name: 'Booking'
}
</script>

<style scoped>
  @import "css/markdown.css";
</style>