<template>

  <header class="app-header h-60 flex px-24 fs-16 bg-brand-hover" v-if="routeStore.activeMainRoute">
    <div class="title flex">
      <SvgIcon name="logo" :size="24" color="#fff" />
      <!--todo 切换医院功能 selectHospital -->
      <div class="flex"><span>康策CRM8.0</span><span class="mx-12 mb-2">|</span>
        <el-dropdown @command="selectHospital">
          <span class="fs-16" style="color:#fff;">
            <span>上海演示医院</span>
            <el-icon style="margin-left:10px" :size="12">
              <ArrowDownBold />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu class="fs-16">
              <el-dropdown-item command="password">上海演示医院1</el-dropdown-item>
              <el-dropdown-item command="logout" divided>上海演示医院2</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="menus flex">
      <NavBar class="head-menu" :isNested="false" @collapse="onCollapse" mode="horizontal"
        :routes="routeStore.mainRoutes" :isIcon="false" :activeMenu="routeStore.activeMainRoute?.path">
        <template #moretitle>
          <el-sub-menu class="more-menu" index="__more__" v-if="routeStore.moreMainRoutes.length > 0"
            :class="{ 'is-active': isMoreActive }" :expand-close-icon="ArrowDownBold" :expand-open-icon="ArrowDownBold"
            :show-timeout="200" :hide-timeout="200">
            <template #title>
              <span class="lh-ra-1">更多</span>
            </template>
            <NavBarMenuItem :items="routeStore.moreMainRoutes" :isNested="true"
              :activeMenu="routeStore.activeMainRoute?.path" :isIcon="false" />
          </el-sub-menu>
        </template>
      </NavBar>
      <SvgIcon name="apps" :size="40" color="#fff" style="cursor:pointer" class="mt-2" />
    </div>

    <div class="status flex gap-6 h-28 radius-14 py-0 px-12 fs-14" :class="{ 'is-busy': statusText === '忙碌' }">
      <div class="status-item phone flex gap-3 color-brand" v-if="statusText === '空闲'">
        <SvgIcon name="phone" :size="14" style="cursor:pointer" />
        <span>8866</span>
      </div>

      <div class="status-item phone flex gap-3" style="color:#ffa938;" v-if="statusText === '忙碌'">
        <SvgIcon name="phone" :size="14" style="cursor:pointer" />
        <span style="color:#fff;">8866</span>
      </div>

      <el-dropdown class="status-item center h-ra-100 fs-14 px-10 radius-14 color-brand" trigger="click"
        @command="handleStatusCommand">
        <div class="flex gap-4 color-brand" v-if="statusText === '空闲'" role="button">
          <SvgIcon name="coffee" :size="16" style="cursor:pointer" />
          <span>{{ statusText }}</span>
          <el-icon class="status-arrow color-brand" :size="12">
            <ArrowDownBold />
          </el-icon>
        </div>
        <div class="flex gap-4" v-else role="button" style="color:#ffa938;">
          <SvgIcon name="busy" :size="16" style="cursor:pointer" />
          <span>{{ statusText }}</span>
          <el-icon class="status-arrow" :size="12" color="#ffa938">
            <ArrowDownBold />
          </el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="busy">忙碌</el-dropdown-item>
            <el-dropdown-item command="free">空闲</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <div class="status-item flex">
        <span>{{ currentTime }}</span>
      </div>
    </div>
    <div class="actions flex gap-12 p-0">
      <div class="search-expand" tabindex="0">
        <SvgIcon name="search" :size="22" class="search-icon" />
        <input v-model="searchQuery" class="search-input" type="text" placeholder="请输入内容" @keydown.enter="onSearch" />
      </div>
      <!-- <el-tooltip content="提示内容" placement="bottom">
        <SvgIcon name="question" :size="22" color="#fff" style="cursor:pointer" />
      </el-tooltip> -->
      <el-badge :is-dot="hasUnreadMessage" class="message-badge">
        <SvgIcon name="wechat" :size="22" style="cursor:pointer" @click="goMessage" />
      </el-badge>
      <el-badge :is-dot="hasWechatUnread" class="message-badge">
        <SvgIcon name="bell-filled" :size="22" class="wechat-icon" style="cursor:pointer" @click="goWechat" />
      </el-badge>
      <!-- <FullScreenToggle /> -->
      <!-- <el-button @click="switchThem" type="primary">切换主题</el-button> -->
      <!-- <el-button @click="switchFontSize" type="primary">字体大小</el-button> -->
      <!-- <I18nSwitcher /> -->
      <el-dropdown @command="handleCommand" popper-class="user-dropdown-popper" trigger="hover">
        <span class="user-dropdown ml-12 flex">
          <el-avatar :size="26">管</el-avatar>
          <span class="fs-14 mx-8">{{ userStore.userData.EmployeeName || '管理员' }}</span>
          <SvgIcon name="more" :size="16" color="#fff" class="mt-2" />
        </span>
        <template #dropdown>
          <el-dropdown-menu class="user-dropdown-menu">
            <el-dropdown-item command="password">修改密码</el-dropdown-item>
            <el-dropdown-item command="notice" class="dropdown-arrow-item">
              <span>提示设置</span>
              <el-icon>
                <ArrowRight />
              </el-icon>
            </el-dropdown-item>
            <el-dropdown-item class="dropdown-arrow-item lang-item" style="overflow: visible; position: relative;">
              <span>语言切换</span>
              <el-icon>
                <ArrowRight />
              </el-icon>

              <!-- 子菜单 -->
              <div class="lang-sub-menu">
                <div class="lang-sub-menu-item" :class="{ 'is-active': currentLangKey === 'zhCN' }"
                  @click="changeLang('zhCN')">中文</div>
                <div class="lang-sub-menu-item" :class="{ 'is-active': currentLangKey === 'zhTW' }"
                  @click="changeLang('zhTW')">中文繁体字</div>
                <div class="lang-sub-menu-item" :class="{ 'is-active': currentLangKey === 'enUS' }"
                  @click="changeLang('enUS')">英文</div>
              </div>
            </el-dropdown-item>
            <el-dropdown-item command="theme" class="dropdown-arrow-item">
              <span>皮肤选择</span>
              <el-icon>
                <ArrowRight />
              </el-icon>
            </el-dropdown-item>
            <el-dropdown-item command="logout" divided>安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

  </header>

  <!-- 主题色切换弹窗 -->
  <ThemeSwitch ref="themeDialog"></ThemeSwitch>
  <!-- 字体大小切换弹窗 -->
  <FontSizeSwitch ref="fontDialog"></FontSizeSwitch>
</template>


<script setup>
import { computed, ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/api/user'
import ThemeSwitch from '@/components/themeSwitch/index.vue'
import FontSizeSwitch from '@/components/fontSizeSwitch/index.vue'
import { ArrowDownBold, ArrowRight } from '@element-plus/icons-vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import NavBar from '@/components/navBar/NavBar.vue'
import NavBarMenuItem from '@/components/navBar/NavBarMenuItem.vue'
import { useRouteSync } from '@/composables/useRouteSync'
import { useLanguage } from '@/composables/useLanguage'
const routeStore = useRouteSync()
const router = useRouter()
const userStore = useUserStore()
const { currentLangKey, changeLang } = useLanguage()

const emit = defineEmits(['toggle-sidebar'])

const themeDialog = ref(null)
const fontDialog = ref(null)
const statusText = ref('空闲')
const currentTime = ref('')
const hasUnreadMessage = ref(true)
const hasWechatUnread = ref(true)
let timer = null

const isMoreActive = computed(() =>
  routeStore.moreMainRoutes.some((route) => route.path === routeStore.activeMainRoute?.path),
)

const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false })
}

onMounted(() => {
  updateTime()
  timer = window.setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timer) window.clearInterval(timer)
})

const switchThem = () => { themeDialog.value?.open() }
const switchFontSize = () => { fontDialog.value?.open() }

const handleStatusCommand = (cmd) => {
  const statusMap = {
    busy: '忙碌',
    free: '空闲',
  }

  statusText.value = statusMap[cmd] || '空闲'
}

const goMessage = () => {
  router.push('/message/notification')
}

const goWechat = () => {
  // 先预留跳转位置，后续可替换成真实微信客服/企微入口
  console.log('go wechat')
}

// 搜索输入状态与处理
const searchQuery = ref('')
const onSearch = () => {
  const q = searchQuery.value && searchQuery.value.trim()
  if (!q) return
  // 临时行为：打印查询，可以替换为路由跳转或搜索方法
  console.log('search:', q)
  // 示例：路由跳转到 /search?q=...
  // router.push({ path: '/search', query: { q } })
}



const handleCommand = (cmd) => {
  if (cmd === 'password') {
    router.push('/password')
    return
  }

  if (cmd === 'notice') {
    fontDialog.value?.open()
    return
  }

  if (cmd === 'theme') {
    themeDialog.value?.open()
    return
  }

  if (cmd === 'logout') {
    router.push('/login')
  }
}


</script>

<style scoped lang="scss">
.app-header {
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;


  .title {
    gap: 10px;
  }


  .status {
    background: rgba(255, 255, 255, 0.24);

    &.is-busy {
      background: #ffa938;
    }

    .status-item {
      height: 100%;
      cursor: pointer;



      &.center {
        background: #fff;
      }
    }



    .status-icon {
      font-size: 15px;
      line-height: 1;
    }

    .status-arrow {
      margin-left: 2px;
    }
  }

  .actions {

    .el-icon {
      font-size: 22px;
      color: #fff;
      cursor: pointer;
    }
  }

  /* search-expand: hover 或 focus-within 时向左展开为输入框 */
  .search-expand {
    display: inline-flex;
    align-items: center;
    position: relative;
  }

  .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    pointer-events: none;
  }

  .search-input {
    width: 0;
    opacity: 0;
    padding: 0;
    margin-left: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    transition: width 0.28s ease, opacity 0.18s ease, margin-left 0.18s ease, padding 0.18s ease, background 0.18s ease;
    /* 为图标留出空间 */
    padding-left: 36px;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    border-radius: 3px;
  }

  .search-expand:hover .search-input,
  .search-expand:focus-within .search-input {
    width: 240px;
    opacity: 1;
    margin-left: 0;
    padding-right: 12px;
    background: rgba(255, 255, 255, 0.26);
    color: #fff;
    border-radius: 3px;
  }

  .search-input::placeholder {
    color: rgba(255, 255, 255, 0.85);
  }

  .message-badge {
    display: inline-flex;
    align-items: center;
  }

  .message-icon {
    width: 22px;
    height: 22px;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
  }

  .wechat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #fff;
  }

  .iconBox {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    cursor: pointer;
  }

  .iconBox:hover {
    background: var(--bg-color-container-active);
  }

  .iconBox:nth-of-type(1) {
    border-right: 1px solid #ebeef5;
  }


  .header-actions {
    display: flex;
    align-items: center;
  }

}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
}

:deep(.user-dropdown-popper) {
  padding: 0;
}

:deep(.user-dropdown-menu) {
  overflow: visible;
  min-width: 176px;
  padding: 8px 0;

  .el-dropdown-menu__item {
    height: 40px;
    padding: 0 16px;
    font-size: 16px;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .dropdown-arrow-item {
    position: relative;

    .el-icon {
      margin-left: 16px;
      color: #999;
      font-size: 14px;
    }
  }
}

.navigation {
  height: 3rem;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  border-bottom: 1px solid #ebeef5;
  background: #fff;
  flex-shrink: 0;
}

.head-menu {
  // background-color: red;
  color: #fff;

  --el-menu-active-color: #fff;
  --el-menu-text-color: #fff;
  --el-menu-hover-bg-color: transparent;
  --el-menu-horizontal-height: 60px;
  // --el-menu-horizontal-height: auto;
  --el-menu-item-font-size: 16px;
  --el-menu-item-height: 1;
  padding-top: 6px;
  --el-menu-border-color: transparent;

  // :deep(.el-menu-item) {
  //   padding-top: 6px;
  // }

  :deep(.el-sub-menu .el-sub-menu__title) {
    color: #fff !important;
  }

  :deep(.more-menu .el-sub-menu__icon-arrow) {
    transition: transform 0.2s ease !important;
    transition-delay: 0.2s !important;
  }

  :deep(.more-menu:hover .el-sub-menu__icon-arrow) {
    transform: rotate(180deg) !important;
  }
}
</style>

<style lang="scss">
/* Element Plus 的 dropdown 默认会被 el-scrollbar 包裹并隐藏溢出，
   且因为弹窗挂载在 body 上，所以必须使用非 scoped 或者全局样式覆盖才能生效 */
.user-dropdown-popper {

  .el-scrollbar,
  .el-scrollbar__wrap,
  .el-scrollbar__view,
  .el-dropdown-menu {
    overflow: visible !important;
  }

  .lang-item {
    position: relative;
    overflow: visible !important;
  }
}

.lang-item {
  .lang-sub-menu {
    display: none;
    position: absolute;
    right: calc(100% + 0px);
    top: 100%;
    transform: translateY(-50%);
    // min-width: 120px;
    z-index: 10000;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 10px 0;
    white-space: nowrap;
  }

  &:hover,
  &:focus-within {
    .lang-sub-menu {
      display: block;
    }
  }

  .lang-sub-menu-item {
    padding: 5px 16px;
    line-height: 22px;
    cursor: pointer;
    color: var(--el-text-color-regular);
    font-size: var(--el-font-size-base);

    &:hover,
    &.is-active {
      background-color: var(--el-dropdown-menuItem-hover-fill);
      color: var(--el-dropdown-menuItem-hover-color);
    }
  }
}
</style>
