<template>
  <div>
    <!-- 状态栏占位区域（仅在APP中显示） -->
    <div v-if="isInAppEnvironment" style="height: 30px"></div>

    <!-- header内容 -->
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        height: 60px;
      "
    >
      <!-- 返回键 -->
      <div style="width: 10%; display: flex; align-items: center">
        <button v-if="showBack" class="back-btn" @click="handleBack">
          <img :src="backImg" alt="" style="width: 100%; aspect-ratio: 1/1; display: block" />
        </button>
      </div>
      <h1
        style="
          font-size: 1.2em;
          font-weight: 600;
          margin: 0;
          text-align: center;
          flex: 1;
          letter-spacing: 0.3px;
        "
        :style="{ color }"
      >
        {{ title }}
      </h1>
      <button class="help-btn" style="width: 10%" @click="$emit('help')">
        <img
          v-if="showHelp"
          src="../assets/icon/helpWhite.png"
          alt=""
          style="width: 100%; display: block"
        />
      </button>
      <slot name="extraFunction"></slot>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { computed, ref, onMounted } from 'vue'
import { closePage, isInApp } from '../utils/appBridge.js'

// 定义props
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  showBack: {
    type: Boolean,
    default: true,
  },
  showHelp: {
    type: Boolean,
    default: false,
  },
  isHomePage: {
    type: Boolean,
    default: false,
  },

  color: {
    type: String,
    default: '#fff',
  },

  backImg: {
    type: String,
    default: '/src/assets/icon/arrowBack.png',
  },
})

// 定义emits
defineEmits(['help'])

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

// 检测是否在APP环境中
const isInAppEnvironment = ref(false)

// 定义首页路由列表
const homeRoutes = ['/host-center', '/agency-center', '/coin-seller', '/']

// 计算是否为首页
const isCurrentlyHomePage = computed(() => {
  // 1. 首先检查 props
  const propsHomePage = props.isHomePage === true || props.isHomePage === 'true'

  // 2. 然后检查路由
  const routeHomePage = homeRoutes.includes(route.path)

  // 3. 两者任一为true即为首页
  return propsHomePage || routeHomePage
})

const handleBack = () => {
  if (isCurrentlyHomePage.value && isInApp()) {
    // 首页且在APP中：关闭页面
    console.log('home back')
    closePage()
  } else {
    // 非首页或浏览器环境：正常返回
    router.go(-1)
  }
}

// 组件挂载时检测环境
onMounted(() => {
  isInAppEnvironment.value = isInApp()
})
</script>

<style scoped>
* {
  font-family: 'SF Pro Text';
}

.back-btn,
.help-btn {
  border: none;
  background: transparent;
  transition: all 0.2s ease;
}

.back-btn:active,
.help-btn:active {
  transform: scale(0.9);
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 16px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}
</style>
