<template>
  <div class="guard-list-page">
    <header class="page-header">
      <Icon icon="eva:arrow-ios-back-fill" class="back-icon" @click="goBack" />
      <h1 class="title">守护列表</h1>
    </header>

    <div class="table-wrap">
      <div class="table-head">
        <span class="col col-name">守护人</span>
        <span class="col col-major">届别&amp;专业/任教学院</span>
        <span class="col col-role">身份</span>
        <span class="col col-time">守护时间</span>
      </div>
      <div class="table-body">
        <div v-for="(item, index) in guardList" :key="`${item.name}-${index}`" class="table-row">
          <span class="col col-name">{{ item.name }}</span>
          <span class="col col-major">{{ item.major }}</span>
          <span class="col col-role">{{ item.identity }}</span>
          <span class="col col-time">{{ item.time }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { useRouter } from 'vue-router'
import { guardList } from '@/mock/guardList'

const router = useRouter()

function goBack() {
  router.back()
}
</script>

<style scoped lang="less">
.guard-list-page {
  min-height: calc(var(--vh, 1vh) * 100);
  background: #f5f5f5;

  .page-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44rem;
    background: #fff;

    .back-icon {
      position: absolute;
      left: 12rem;
      font-size: 22rem;
      color: #1d2129;
      cursor: pointer;
    }

    .title {
      margin: 0;
      font-size: 17rem;
      font-weight: 600;
      color: #1d2129;
    }
  }

  .table-wrap {
    margin: 12rem 10rem 0;
    background: #fff;
    border-radius: 8rem 8rem 0 0;
    overflow: hidden;

    .table-head,
    .table-row {
      display: grid;
      grid-template-columns: 1.1fr 1.6fr 1fr 1fr;
      align-items: center;
      text-align: center;
    }

    .table-head {
      min-height: 44rem;
      padding: 0 6rem;
      background: #ffb800;
      color: #fff;
      font-size: 12rem;
      font-weight: 500;
    }

    .table-body {
      .table-row {
        min-height: 44rem;
        padding: 10rem 6rem;
        font-size: 12rem;
        color: #1d2129;
        box-sizing: border-box;

        &+.table-row {
          border-top: 1px solid #f0f0f0;
        }
      }
    }
  }
}
</style>