<template>
  <a-layout-header class="top-nav-header">
    <div class="nav-container">
      <LeftOutlined v-if="visible" class="menu-trigger" @click="showMenu(false)" />
      <RightOutlined v-else class="menu-trigger" @click="showMenu(true)" />

      <!-- 桌面端导航项 -->
      <a-space v-if="!isMobile" :size="16" align="center" class="desktop-nav">
        <LoginNotice />
        <TopNavDownload />
        <TopNavVideoCallCenter />
        <TopNavMessage :login-info="loginInfo" />
        <TopNavRoleSelect />
        <TopNavClientSelect :login-info="loginInfo" />
        <TopNavUserInfo :login-info="loginInfo" />
      </a-space>

      <!-- 移动端下拉菜单 -->
      <a-space v-else>
        <a-dropdown v-model:open="isMenuOpen" :trigger="['click']">
          <menu-outlined class="mobile-menu-btn" />
          <template #overlay>
            <a-menu class="mobile-nav-menu">
              <a-menu-item>
                <LoginNotice />
              </a-menu-item>
              <a-menu-item>
                <TopNavDownload />
              </a-menu-item>
              <a-menu-item>
                <TopNavVideoCallCenter />
              </a-menu-item>
              <a-menu-item>
                <TopNavMessage :login-info="loginInfo" />
              </a-menu-item>
              <a-menu-item>
                <TopNavRoleSelect />
              </a-menu-item>
              <a-menu-item>
                <TopNavClientSelect :login-info="loginInfo" />
              </a-menu-item>
              <a-menu-item>
                <TopNavUserInfo :login-info="loginInfo" />
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-space>
    </div>
  </a-layout-header>
</template>
<script>
import Common from '../common/Common.js';
import TopNavClientSelect from './top-nav-client-select.vue';
import TopNavUserInfo from './top-nav-user-info.vue';
import TopNavMessage from './top-nav-message.vue';
import TopNavVideoCallCenter from './top-nav-video-call-center.vue';
import TopNavDownload from './top-nav-download.vue';
import TopNavRoleSelect from './top-nav-role-select.vue';
import LoginNotice from './LoginNotice.vue';
import {
  LeftOutlined,
  RightOutlined,
  MenuOutlined,
} from '@ant-design/icons-vue';

export default {
  components: {
    TopNavClientSelect,
    TopNavUserInfo,
    TopNavMessage,
    TopNavVideoCallCenter,
    TopNavDownload,
    LoginNotice,
    TopNavRoleSelect,
    RightOutlined,
    LeftOutlined,
    MenuOutlined,
  },
  emits: ['menuVisibleChanged'],
  data: function () {
    this.Common = Common;
    return {
      loginInfo: null,
      visible: true,
      isMobile: false,
      isMenuOpen: false,
    };
  },

  watch: {},

  mounted: function () {
    this.getLocalStorage();
    this.checkMobile();
    window.addEventListener('resize', this.checkMobile);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.checkMobile);
  },
  methods: {
    // 获取localStorage
    getLocalStorage: function () {
      var json = localStorage.getItem('#LoginInfo');
      this.loginInfo = JSON.parse(json);
      if (this.loginInfo && this.loginInfo.userImageUrl) {
        this.$store.commit('updateImageSrc', this.loginInfo.userImageUrl);
      }
    },
    showMenu: function (isShow) {
      this.visible = isShow;
      this.$emit('menuVisibleChanged',isShow, this.isMobile);
    },
    checkMobile() {
      this.isMobile = window.innerWidth <= 860;
      if (!this.isMobile) {
        this.isMobile = false;
        this.visible = true;
        this.$emit('menuVisibleChanged',this.visible,this.isMobile);
      } else {
        this.isMobile = true;
        this.visible = false;
        this.$emit('menuVisibleChanged',this.visible,this.isMobile);
      }
    },
  },
};
</script>

<style scoped>
.top-nav-header {
  background: #fff;
  padding: 0 12px;
  height: 40px;
  line-height: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-trigger {
  font-size: 20px;
}

.trigger-icon {
  font-size: 18px;
}

@media (max-width: 860px) {
  .top-nav-header {
    padding: 0 12px;
  }
}
/* 新增移动端样式 */
.mobile-menu-btn {
  font-size: 20px;
  margin-left: 12px;
}

.mobile-nav-menu {
  width: 160px;
}

@media (max-width: 860px) {
  .desktop-nav {
    display: none;
  }

  .mobile-nav-menu {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
  }

  .mobile-nav-menu ::v-deep(.ant-menu-item) {
    height: auto;
    line-height: 1.5;
    padding: 8px 16px;
  }
}

@media (min-width: 861px) {
  .mobile-menu-btn {
    display: none;
  }
}
</style>