<template>
  <div :style="{ background: 'var(--color-fill-2)' }">
    <a-page-header
      :style="{ background: 'var(--color-bg-2)' }"
      :title="title"
      :subtitle="subtitle"
      :show-back="showBack"
      @back="goBack()"
    >
      <template #title>
        <slot name="title"></slot>
      </template>
      <template #breadcrumb>
        <a-breadcrumb v-if="items.length > 0" class="container-breadcrumb">
          <a-breadcrumb-item> 首页 </a-breadcrumb-item>
          <a-breadcrumb-item v-for="item in items" :key="item">
            {{ item }}
          </a-breadcrumb-item>
        </a-breadcrumb>
      </template>
      <template #extra>
        <slot name="extra"></slot>
      </template>
      <slot></slot>
    </a-page-header>
  </div>
</template>

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

const router = useRouter()
defineProps({
  items: {
    type: Array as PropType<string[]>,
    default() {
      return []
    }
  },
  title: {
    type: String
  },
  subtitle: {
    type: String,
    required: false
  },
  showBack: {
    type: Boolean,
    default() {
      return false
    }
  }
})

const goBack = () => {
  router.go(-1)
}
</script>

<style scoped lang="less">
.container-breadcrumb {
  margin: 10px 0;
  :deep(.arco-breadcrumb-item) {
    color: rgb(var(--gray-6));
    &:last-child {
      color: rgb(var(--gray-8));
    }
  }
}
:deep(.arco-page-header-with-breadcrumb) {
  padding: 12px 0 0 0;
}
:deep(.arco-page-header-content) {
  padding: 0;
  border: none;
  .arco-tabs {
    padding-top: 10px;
    padding-left: 5px;

    .arco-tabs-nav-type-line .arco-tabs-tab {
      margin: 0 20px;
    }
  }
}
:deep(.arco-page-header-title) {
  font-size: 18px;
}
</style>
