<script setup lang="ts">
import MessageNotification from '@af-mobile-client-vue3/components/core/MessageNotification/MessageNotification.vue'
import { useSettingStore } from '@af-mobile-client-vue3/stores/modules/setting'
import { Icon } from '@iconify/vue'
import { computed, ref } from 'vue'

interface NavigationStyle {
  bgColor?: string
  titleColor?: string
  iconColor?: string
}

interface Props {
  title?: string
  showBack?: boolean
  showMessage?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  showBack: true,
  showMessage: true,
})

const emit = defineEmits<{
  back: []
}>()

// 从 settingStore 获取导航样式配置
const settingStore = useSettingStore()
const navigationStyle = computed<NavigationStyle>(() => {
  const config = (settingStore.getSetting() as any)?.navigationStyle
  return {
    bgColor: config?.bgColor || '#fff',
    titleColor: config?.titleColor || '#000',
    iconColor: config?.iconColor || '#666',
  }
})

const headerRef = ref<HTMLElement>()

function onBack() {
  emit('back')
}

defineExpose({
  getHeaderHeight: () => {
    if (headerRef.value) {
      const rect = headerRef.value.getBoundingClientRect()
      const height = rect.height
      if (height > 0) {
        document.documentElement.style.setProperty('--system-header-height', `${height}px`)
      }
      return height
    }
    return 0
  },
})
</script>

<template>
  <div ref="headerRef" class="app-header" :style="{ backgroundColor: navigationStyle.bgColor }">
    <Icon
      v-if="props.showBack"
      icon="mdi:arrow-left"
      :width="24"
      :height="24"
      size="1.15em"
      :style="{ color: navigationStyle.iconColor }"
      @click="onBack"
    />
    <span class="app-header-title" :style="{ color: navigationStyle.titleColor }">{{ props.title }}</span>
    <div v-if="props.showMessage" class="app-header-action">
      <MessageNotification :icon-color="navigationStyle.iconColor" />
    </div>
    <div v-else class="app-header-action-placeholder" />
  </div>
</template>

<style lang="less" scoped>
.app-header {
  position: sticky;
  top: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  height: 56px;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid #ebedf0;
}

.app-header-title {
  padding-left: 10px;
  font-size: 1.15rem;
  font-weight: 600;
}

.app-header-action {
  margin-left: auto;
}

.app-header-action-placeholder {
  margin-left: auto;
  width: 36px;
}
</style>
