<template>
  <div>
    <header class="zui-header">
      <logo type="xiaoyanyun" href="/"></logo>
      <h4 class="zui-logo-text">
        <a class="zui-nav-link" :href="currentLinks.accounting" target="_blank">&nbsp;&nbsp;记账平台</a>
        <a class="zui-nav-link" :href="currentLinks.health" target="_blank">&nbsp;&nbsp;健康档案</a>
        <a class="zui-nav-link" :href="currentLinks.imaotai" target="_blank">&nbsp;&nbsp;茅台预约</a>
         <a class="zui-nav-link" :href="currentLinks.imaotai" target="_blank">&nbsp;&nbsp;智聪物联</a>
      </h4>
      <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
      <div v-show="webShow">
        <slot name="buttons"></slot>
      </div>
    </header>
    
    <!-- 移动端抽屉菜单（移到header外面） -->
    <div v-show="drawerVisible" class="zui-drawer-overlay" @click="closeMenu"></div>
    <div v-show="drawerVisible" class="zui-drawer">
      <div class="zui-drawer__header">菜单</div>
      <ul class="zui-drawer__list">
        <li @click="navigateTo('/')">首页</li>
        <li @click="navigateTo('/resource')">资料下载</li>
        <li @click="navigateTo('/callus')">联系我们</li>
      </ul>
    </div>
  </div>
</template>
<script>
  import './less/header.less'
  import Logo from './Logo'
  import Util from '../Util'
  
  export default {
    props: {
      logoType: {
        default: 'zhichou'
      }
    },
    components: {Logo},
    data() {
      return {
        // 统一管理的导航链接
        navLinks: {
          // Web端链接
          web: {
            accounting: 'http://invest.qdintc.com',
            health: 'http://health.qdintc.com',
            imaotai: 'http://imaotai.qdintc.com'
          },
          // 移动端H5链接
          mobile: {
            accounting: 'http://investh5.qdintc.com',
            health: 'http://healthh5.qdintc.com',
            imaotai: 'http://imaotaih5.qdintc.com'
          }
        },
        mobileShow: false,
        webShow: true,
        drawerVisible: false,
        isMobile: false
      }
    },
    created() {
      this.init()
    },
    computed: {
      // 根据设备类型返回对应的链接
      currentLinks() {
        return this.isMobile ? this.navLinks.mobile : this.navLinks.web
      }
    },
    methods: {
      init() {
        // 检测是否为移动端
        this.isMobile = Util.os.android || Util.os.iPhone || Util.os.mobile || Util.os.isapp || Util.os.harmonyOS
        
        if (this.isMobile) {
          this.webShow = false
          this.mobileShow = true
        } else {
          this.webShow = true
          this.mobileShow = false
        }
      },
      openMenu() {
        this.drawerVisible = true
        this.$emit('menu-open')
      },
      closeMenu() {
        this.drawerVisible = false
        this.$emit('menu-close')
      },
      navigateTo(path) {
        // 使用 Vue Router 的全局路由实例
        if (this.$router) {
          this.$router.push({path})
        } else {
          // 如果路由不可用，使用原生跳转
          window.location.href = path
        }
        this.closeMenu()
      }
    }
  }
</script>
