<template>
  <div class="table-card">
    <table class="student-table">
      <thead>
        <tr>
          <th class="select-col">
            <span class="fake-checkbox header-check"></span>
          </th>
          <th>姓名</th>
          <th>
            <button class="sort-btn" type="button" @click="toggleSort('account')">
              账号
              <span class="sort-icon" :class="{ active: sortKey === 'account' }">
                {{ getSortIcon('account') }}
              </span>
            </button>
          </th>
          <th>
            <button class="sort-btn" type="button" @click="toggleSort('coins')">
              乐贝
              <span class="sort-icon" :class="{ active: sortKey === 'coins' }">
                {{ getSortIcon('coins') }}
              </span>
            </button>
          </th>
          <th>
            <button class="sort-btn" type="button" @click="toggleSort('diamonds')">
              钻石
              <span class="sort-icon" :class="{ active: sortKey === 'diamonds' }">
                {{ getSortIcon('diamonds') }}
              </span>
            </button>
          </th>
          <th>
            <button class="sort-btn" type="button" @click="toggleSort('checkInDays')">
              累计签到(天)
              <span class="sort-icon" :class="{ active: sortKey === 'checkInDays' }">
                {{ getSortIcon('checkInDays') }}
              </span>
            </button>
          </th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="student in sortedStudents" :key="student.id">
          <td class="select-col">
            <span class="fake-checkbox"></span>
          </td>
          <td>
            <div class="student-info">
              <img class="student-avatar" :src="student.avatar" :alt="student.name" />
              <span class="student-name">{{ student.name }}</span>
              <span class="gender-icon" :class="student.gender">
                {{ student.gender === 'boy' ? '♂' : '♀' }}
              </span>
            </div>
          </td>
          <td>{{ student.account }}</td>
          <td>{{ student.coins }}</td>
          <td>{{ student.diamonds }}</td>
          <td>{{ student.checkInDays }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

type Gender = 'boy' | 'girl'

type Student = {
  id: number
  name: string
  gender: Gender
  avatar: string
  account: string
  coins: number
  diamonds: number
  checkInDays: number
}

type SortKey = 'account' | 'coins' | 'diamonds' | 'checkInDays'
type SortOrder = 'asc' | 'desc'

const props = defineProps<{
  students: Student[]
}>()

const sortKey = ref<SortKey>('account')
const sortOrder = ref<SortOrder>('asc')

const sortedStudents = computed(() => {
  const orderFactor = sortOrder.value === 'asc' ? 1 : -1

  return [...props.students].sort((a, b) => {
    return compareStudents(a, b, sortKey.value) * orderFactor
  })
})

function compareStudents(a: Student, b: Student, key: SortKey) {
  if (key === 'account') return a.account.localeCompare(b.account, 'zh-CN')
  return a[key] - b[key]
}

function toggleSort(key: SortKey) {
  if (sortKey.value === key) {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
    return
  }

  sortKey.value = key
  sortOrder.value = 'asc'
}

function getSortIcon(key: SortKey) {
  if (sortKey.value !== key) return '◆'
  return sortOrder.value === 'asc' ? '▲' : '▼'
}
</script>

<style scoped lang="scss">
.table-card {
  height: 100%;
  overflow: auto;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.student-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;

  th,
  td {
    height: 90px;
    border-bottom: 1px solid rgba(225, 230, 239, 0.52);
    color: #1f2937;
    font-size: 26px;
    font-weight: 400;
    text-align: left;
    vertical-align: middle;
  }

  th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 70px;
    color: #7d8796;
    font-size: 22px;
    background: rgba(247, 249, 253, 0.72);
  }

  tr:last-child td {
    border-bottom: none;
  }

  th:nth-child(2),
  td:nth-child(2) {
    width: 26%;
  }

  th:nth-child(3),
  td:nth-child(3),
  th:nth-child(4),
  td:nth-child(4),
  th:nth-child(5),
  td:nth-child(5),
  th:nth-child(6),
  td:nth-child(6) {
    width: 18.5%;
  }
}

.select-col {
  width: 88px;
  padding-left: 34px;
}

.fake-checkbox {
  display: inline-block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 2px solid rgba(218, 226, 238, 0.72);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.6);
}

.header-check {
  background: rgba(242, 245, 249, 0.92);
}

.sort-btn {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.sort-icon {
  margin-left: 6px;
  color: #c6ccd6;
  font-size: 13px;
  vertical-align: middle;

  &.active {
    color: #7d8796;
  }
}

.student-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.student-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.student-name {
  color: #172033;
}

.gender-icon {
  font-size: 22px;
  font-weight: 600;

  &.boy {
    color: #27a9e8;
  }

  &.girl {
    color: #ef7aa9;
  }
}
</style>
