<template>
  <header class="sub-page-header">
    <!-- 左区域：默认返回按钮，可自定义 -->
    <div class="sph-left">
      <slot name="left">
        <button class="back-btn" @click="handleBack">
          <svg class="back-icon" viewBox="0 0 32 52" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M24 4L6 26L24 48"
              stroke="#333"
              stroke-width="4.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
      </slot>
    </div>

    <!-- 中间区域：自定义 -->
    <div class="sph-center">
      <slot name="center" />
    </div>

    <!-- 右侧区域：自定义 -->
    <div class="sph-right">
      <slot name="right" />
    </div>
  </header>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const handleBack = () => {
  router.back()
}
</script>

<style scoped lang="scss">
.sub-page-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 64px;
  min-height: 88px;
  flex-shrink: 0;
}

.sph-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sph-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sph-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;

  &:hover {
    background: rgba(0, 0, 0, 0.06);
  }
}

.back-icon {
  width: 28px;
  height: 44px;
}
</style>
