<template>
  <div class="full nav-page">
    <div class="flex flex-wrap">
      <div class="radius-base m-b-base m-r-base nav-card">评阅试卷</div>
      <router-link v-show="hasPermissions('/marking/mark')" to="/marking/mark">
        <div class="radius-base fill-blank m-b-base m-r-base nav-item">
          <div class="full-w">
            <img class="nav-img" src="@img/正常评卷.png" alt="" />
            <div class="m-t-extra-base nav-title">正常评卷</div>
          </div>
        </div>
      </router-link>
      <router-link v-show="hasPermissions('/marking/training-record')" to="/marking/training-record">
        <div class="radius-base fill-blank m-b-base m-r-base nav-item">
          <div class="full-w">
            <img class="nav-img" src="@img/查看培训记录.png " alt="" />
            <div class="m-t-extra-base nav-title">查看培训记录</div>
          </div>
        </div>
      </router-link>
      <router-link v-show="hasPermissions('/marking/statistics')" to="/marking/statistics">
        <div class="radius-base fill-blank m-b-base m-r-base nav-item">
          <div class="full-w">
            <img class="nav-img" src="@img/个人统计.png" alt="" />
            <div class="m-t-extra-base nav-title">个人统计</div>
          </div>
        </div>
      </router-link>
      <router-link v-show="hasPermissions('/marking/arbitration')" to="/marking/arbitration">
        <div class="radius-base fill-blank m-b-base m-r-base nav-item">
          <div class="full-w">
            <img class="nav-img" src="@img/仲裁卷.png" alt="" />
            <div class="m-t-extra-base nav-title">仲裁卷</div>
          </div>
        </div>
      </router-link>
      <router-link v-show="hasPermissions('/marking/problem')" to="/marking/problem">
        <div class="radius-base fill-blank m-b-base m-r-base nav-item">
          <div class="full-w">
            <img class="nav-img" src="@img/问题卷.png" alt="" />
            <div class="m-t-extra-base nav-title">问题卷</div>
          </div>
        </div>
      </router-link>
      <router-link v-show="hasPermissions('/marking/similar')" to="/marking/similar">
        <div class="radius-base fill-blank m-b-base m-r-base nav-item">
          <div class="full-w">
            <img class="nav-img" src="@img/雷同卷.png" alt="" />
            <div class="m-t-extra-base nav-title">雷同卷</div>
          </div>
        </div>
      </router-link>
      <router-link v-show="hasPermissions('/marking/repeat')" to="/marking/repeat">
        <div class="radius-base fill-blank m-b-base m-r-base nav-item">
          <div class="full-w">
            <img class="nav-img" src="@img/重评卷.png" alt="" />
            <div class="m-t-extra-base nav-title">重评卷</div>
          </div>
        </div>
      </router-link>
      <router-link v-show="hasPermissions('/marking/assess')" to="/marking/assess">
        <div class="radius-base fill-blank m-b-base m-r-base nav-item">
          <div class="full-w">
            <img class="nav-img" src="@img/强制考核分发.png" alt="" />
            <div class="m-t-extra-base nav-title">强制考核分发</div>
          </div>
        </div>
      </router-link>
      <router-link v-show="hasPermissions('/marking/inquiry')" to="/marking/inquiry">
        <div class="radius-base fill-blank m-b-base m-r-base nav-item">
          <div class="full-w">
            <img class="nav-img" src="@img/自定义查询.png" alt="" />
            <div class="m-t-extra-base nav-title">自定义查询</div>
          </div>
        </div>
      </router-link>
      <router-link v-show="hasPermissions('/system-check')" to="/system-check">
        <div class="radius-base fill-blank m-b-base nav-item">
          <div class="full-w">
            <img class="nav-img" src="@img/自定义查询.png" alt="" />
            <div class="m-t-extra-base nav-title">系统抽查卷</div>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts" name="MarkingNav">
/** 评阅试卷导航页 */
import useNavPermissions from '@/hooks/useNavPermissions'

const { hasPermissions } = useNavPermissions()
</script>

<style scoped lang="scss">
.nav-page {
  padding: 160px;
  .nav-card {
    width: 420px;
    height: 180px;
    background: url(@img/nav-page-card.png) no-repeat center center / cover;
    padding: 32px;
    font-size: 22px;
    color: $color--white;
  }
  .nav-item {
    width: 200px;
    height: 180px;
    text-align: center;
    display: flex;
    place-items: center;
    cursor: pointer;
    &:hover {
      box-shadow: 0px 0px 8px $ShadowColor;
    }
    .nav-img {
      width: 64px;
      height: 64px;
    }
    .nav-title {
      color: $PrimaryPlusFontColor;
      font-size: $MediumFont;
    }
  }
}
</style>
