<template>
  <a-page-header
    v-if="pageHeaderConfig.title"
    :title="pageHeaderConfig.title"
    :subtitle="pageHeaderConfig.subtitle"
    :ghost="pageHeaderConfig.ghost"
    class="page-header"
  >
    <template #extra>
      <slot name="extra"></slot>
      <div v-if="hasDefaultActions" class="header-actions">
        <a-button 
          v-if="showBackButton" 
          type="default" 
          @click="handleBack"
          icon="back"
        >
          返回
        </a-button>
        <a-button 
          v-if="showRefreshButton" 
          type="default" 
          @click="handleRefresh"
          icon="reload"
        >
          刷新
        </a-button>
        <a-button 
          v-if="showExportButton" 
          type="default" 
          @click="handleExport"
          icon="download"
        >
          导出
        </a-button>
        <a-button 
          v-if="showAddButton && hasPermission('create')" 
          type="primary" 
          @click="handleAdd"
          icon="plus"
        >
          新增
        </a-button>
      </div>
    </template>
    <template #tags>
      <slot name="tags"></slot>
      <a-tag 
        v-for="tag in pageHeaderConfig.tags" 
        :key="tag.key"
        :color="tag.color || 'blue'"
        :closable="tag.closable || false"
        @close="handleTagClose(tag.key)"
      >
        {{ tag.text }}
      </a-tag>
    </template>
    <template #avatar>
      <slot name="avatar"></slot>
      <a-avatar v-if="pageHeaderConfig.avatar" :src="pageHeaderConfig.avatar"></a-avatar>
    </template>
    <template #footer>
      <slot name="footer"></slot>
      <div v-if="pageHeaderConfig.footer" class="header-footer">
        {{ pageHeaderConfig.footer }}
      </div>
    </template>
  </a-page-header>
</template>

<script setup lang="js">
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { message } from 'ant-design-vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

// 组件属性
const props = defineProps({
  showBackButton: {
    type: Boolean,
    default: false
  },
  showRefreshButton: {
    type: Boolean,
    default: false
  },
  showExportButton: {
    type: Boolean,
    default: false
  },
  showAddButton: {
    type: Boolean,
    default: false
  }
})

// 页面头部配置
const pageHeaderConfig = computed(() => {
  // 从路由元数据中获取页面标题配置
  const meta = route.meta
  
  return {
    title: meta.title || '',
    subtitle: meta.subtitle || '',
    ghost: meta.ghost || false,
    tags: meta.tags || [],
    avatar: meta.avatar || '',
    footer: meta.footer || ''
  }
})

// 是否有默认操作按钮
const hasDefaultActions = computed(() => {
  return props.showBackButton || props.showRefreshButton || props.showExportButton || props.showAddButton
})

// 检查是否有权限
const hasPermission = (permission) => {
  return authStore.hasPermission([permission])
}

// 处理返回
const handleBack = () => {
  router.back()
}

// 处理刷新
const handleRefresh = () => {
  // 触发父组件的刷新事件
  const event = new CustomEvent('refresh-page')
  window.dispatchEvent(event)
  message.success('页面已刷新')
}

// 处理导出
const handleExport = () => {
  // 触发父组件的导出事件
  const event = new CustomEvent('export-data')
  window.dispatchEvent(event)
  message.info('开始导出数据...')
}

// 处理新增
const handleAdd = () => {
  // 获取新增路由
  const addRoute = getAddRoute()
  if (addRoute) {
    router.push(addRoute)
  } else {
    // 触发父组件的新增事件
    const event = new CustomEvent('add-data')
    window.dispatchEvent(event)
  }
}

// 处理标签关闭
const handleTagClose = (key) => {
  // 触发父组件的标签关闭事件
  const event = new CustomEvent('tag-close', { detail: { key } })
  window.dispatchEvent(event)
}

// 获取新增路由
const getAddRoute = () => {
  const currentPath = route.path
  const routeMap = {
    '/supervision/list': '/supervision/add',
    '/inspection/list': '/inspection/add',
    '/violation/list': '/violation/add',
    '/epidemic/list': '/epidemic/add',
    '/approval/list': '/approval/add',
    '/personnel/list': '/personnel/add'
  }
  
  return routeMap[currentPath] || ''
}
</script>

<style scoped>
.page-header {
  margin-bottom: 24px;
  padding: 0;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.header-footer {
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .page-header {
    margin-bottom: 16px;
  }
  
  .header-actions {
    flex-wrap: wrap;
  }
  
  .header-actions .ant-btn {
    font-size: 12px;
    padding: 4px 8px;
  }
}
</style>