<!-- src/views/LedgerView.vue -->
<script setup lang="ts">
import { onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useGroupStore } from '@/stores/group'
import { useLedgerStore } from '@/stores/ledger'
import LedgerList from '@/components/ledger/LedgerList.vue'
import { ArrowLeft } from '@element-plus/icons-vue'

const route = useRoute()
const groupStore = useGroupStore()
const ledgerStore = useLedgerStore()
const groupId = route.params.groupId as string

const group = computed(() => groupStore.currentGroup)

onMounted(async () => {
  await groupStore.setCurrentGroup(groupId)
  await ledgerStore.loadLedgers(groupId)
})
</script>

<template>
  <div class="ledger-view">
    <!-- 页面头部 -->
    <section class="page-header">
      <router-link :to="`/group/${groupId}`" class="back-link">
        <el-icon><ArrowLeft /></el-icon> 返回群组
      </router-link>
      <div class="header-content">
        <h1 class="page-title">账目管理</h1>
        <span class="group-badge">{{ group?.name }}</span>
      </div>
    </section>

    <!-- 账目列表 -->
    <LedgerList />
  </div>
</template>

<style scoped>
.ledger-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-header {
  padding: 20px 24px;
  background: var(--gg-bg-card);
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-lg);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gg-gradient);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gg-text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
  margin-bottom: 12px;
}

.back-link:hover {
  color: var(--gg-primary);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--gg-text);
}

.group-badge {
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(5, 150, 105, 0.15);
  color: var(--gg-primary-light);
  font-weight: 500;
}
</style>
