<template>
  <div class="header-container">
    <el-menu
      mode="horizontal"
      :default-active="'/user'"
      background-color="#fccc0a"
      text-color="#000"
      active-text-color="#654321"
      router
      class="custom-menu"
      :ellipsis="false"
    >
      <!-- 左侧菜单 -->
      <el-menu-item index="/user">
        <el-icon><HomeFilled /></el-icon>
        <span class="menu-text">首页</span>
      </el-menu-item>
      <el-menu-item index="/user/search">
        <el-icon><ShoppingBag /></el-icon>
        <span class="menu-text">搜索商品</span>
      </el-menu-item>
      <el-menu-item index="/user/location">
        <el-icon><Shop /></el-icon>
        <span class="menu-text">选择门店</span>
      </el-menu-item>
      <!-- 显示当前选择的门店名称 -->
      <span class="selected-store-name">{{ selectedStoreName || '未选择门店' }}</span>
      <!-- 分隔元素，将右侧菜单推到最右边 -->
      <el-menu-item style="margin-right: auto; visibility: hidden">
        <span class="menu-text"></span>
      </el-menu-item>

      <!-- 非二级菜单的右侧按钮 -->
      <el-menu-item index="/login">
        <el-icon><User /></el-icon>
        <span class="menu-text">登录</span>
      </el-menu-item>
      <el-menu-item index="/register">
        <el-icon><Edit /></el-icon>
        <span class="menu-text">注册</span>
      </el-menu-item>
      <el-menu-item index="/user/shopping">
        <el-icon><ShoppingCart /></el-icon>
        <span class="menu-text">购物车</span>
      </el-menu-item>

      <el-sub-menu index="sub1">
        <template #title>
          <el-icon><Menu /></el-icon>
          <span class="menu-text">更多</span>
        </template>
        <el-menu-item index="/user/orders">
          <el-icon><Document /></el-icon>
          <span class="menu-text">订单查询</span>
        </el-menu-item>
        <!-- 个人主页 -->
        <el-menu-item index="/user/profile">
          <el-icon><User /></el-icon>
          <span class="menu-text">个人主页</span>
        </el-menu-item>
        <!-- 花费图表 -->
        <el-menu-item index="/user/charts">
          <el-icon><PieChart /></el-icon>
          <span class="menu-text">花费图表</span>
        </el-menu-item>
        <el-menu-item>
          <router-link
            to="#"
            @click="handleContactClick"
            style="display: flex; align-items: center; text-decoration: none; cursor: pointer"
          >
            <el-icon><Phone /></el-icon>
            <span class="menu-text">联系客服</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="/user/about">
          <el-icon><InfoFilled /></el-icon>
          <span class="menu-text">关于我们</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useStoreStore } from '@/userStores/store'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/userStores/user'

const userStore = useUserStore()
const userId = userStore.getUserId
const storeId = localStorage.getItem('selectedStoreId') || ''
const store = useStoreStore()
const { selectedStoreName } = storeToRefs(store)
import { ElMessage } from 'element-plus'
onMounted(() => {
  store.loadStoreFromLocal()
})

const handleContactClick = () => {
  const userId = userStore.getUserId
  const storeId = localStorage.getItem('selectedStoreId')

  if (!userId) {
    ElMessage.error('用户ID不存在,请先登录')
    return
  }

  if (!storeId) {
    ElMessage.error('店铺ID不存在,请先选择店铺')
    return
  }

  // 使用window.open替代router，因为目标URL是外部站点
  window.open(`http://47.106.81.108:3000/?userId=${userId}&storeId=${storeId}`, '_blank')
}
</script>

<style scoped>
.header-container {
  display: flex;
  background-color: #fccc0a;
  height: 80px;
  padding: 0 20px;
  min-width: 1400px;
}

.custom-menu {
  display: flex;
  align-items: center;
  height: 80px;
  line-height: 80px;
  font-size: 16px;
  background-color: transparent;
  width: 100%;
}

.custom-menu .el-menu-item {
  height: 80px;
  line-height: 80px;
  font-size: 16px;
}

.menu-text {
  margin-left: 5px;
}

/* 确保二级菜单正确显示 */
.el-sub-menu .el-menu {
  min-width: 180px;
}

/* 优化显示门店名称的样式 */
.selected-store-name {
  color: #654321;
  margin-left: 10px;
  font-size: 20px;
}
</style>