<template>
  <div class="side-nav" :class="{ 'side-nav--narrow': isNarrow }">
    <!-- 顶部 Logo -->
    <div class="side-nav__header">
      <!-- 窄版Logo（logo-min.png） -->
      <img v-if="isNarrow" src="@/assets/images/logo-min.png" alt="Offer派" class="side-nav__logo-img side-nav__logo-img--narrow" />
      <!-- 宽版Logo -->
      <img v-else src="@/assets/images/logo.png" alt="Offer派" class="side-nav__logo-img" />
    </div>

    <!-- 主导航 -->
    <nav class="side-nav__menu">
      <a
        v-for="(item, index) in mainMenus"
        :key="item.name"
        href="javascript:void(0)"
        class="side-nav__item"
        :class="{ 'side-nav__item--active': isActive(item.name) }"
        @click="handleNav(item)"
        @mouseenter="hoverIndex = index"
        @mouseleave="hoverIndex = -1"
      >
        <!-- SVG图标：hover/active 状态显示选中图标，否则显示默认图标 -->
        <span class="side-nav__item-icon" v-if="index==9">
          

        </span>
        <span v-else
          class="side-nav__item-icon"
          v-html="(isActive(item.name) || hoverIndex === index) && getActiveIcon(index) ? getActiveIcon(index) : item.iconImg"
        ></span>
        <span class="side-nav__item-label">{{ item.label }}</span>
        <!-- 索引0的时候显示"全网"小标签 -->
        <span v-if="index === 0" class="side-nav__tag-quanwang" :class="{ 'side-nav__tag-quanwang--corner': isNarrow, 'mt2 ml8': !isNarrow }">全网</span>

        <!-- 索引5的时候显示"公测群"/"加群"小标签 -->
        <span v-if="index === 5" class="side-nav__tag-quanwang" :class="{ 'side-nav__tag-quanwang--corner': isNarrow, 'mt2 ml8': !isNarrow }">{{ isNarrow ? '加群' : '公测群' }}</span>
        <!-- 索引5 hover时显示公测群二维码 -->
        <div v-if="index === 5 && hoverIndex === 5" class="side-nav__qrcode-popup">
          <img src="https://offerpie.oss-cn-guangzhou.aliyuncs.com/images/mobile-qcCode.png" alt="公测群二维码" class="side-nav__qrcode-img" />
        </div>

        <span v-if="item.badge" class="side-nav__badge">{{ item.badge }}</span>
      </a>
    </nav>

    
    <!-- 底部菜单 -->
    <div class="side-nav__footer">
      <!-- 宽版：邀请会员卡片 -->
      <div v-if="!isNarrow" class="side-nav__referral-card cursor-po" @click="showShareDialog = true">
        <!-- 顶部区域：标题 + 礼物图片 -->
        <div class="side-nav__referral-top">
          <div class="side-nav__referral-top-text">
            <div class="side-nav__referral-title">邀请好友<span class="side-nav__referral-title--accent">得会员</span></div>
            <div class="side-nav__referral-subtitle">邀1人得7天</div>
          </div>
          <img src="@/assets/images/nav/gift.png" alt="礼物" class="side-nav__referral-gift" />
        </div>
        <!-- 白色毛玻璃面板（遮住礼物底部） -->
        <div class="side-nav__referral-panel">
          <!-- 年卡进度行 -->
          <div class="side-nav__referral-row">
            <span class="side-nav__referral-label">年卡进度</span>
            <span class="side-nav__referral-value">{{ milestoneProgress }}/{{ milestoneTarget }}</span>
          </div>
          <!-- 进度条 -->
          <div class="side-nav__referral-track">
            <div class="side-nav__referral-fill" :style="{ width: inviteProgressPercent + '%' }"></div>
          </div>
          <!-- 提示文字 -->
          <div class="side-nav__referral-tip">再邀 <strong>{{ inviteRemaining }}</strong> 人，可获得年卡</div>
          <!-- 去邀请按钮 -->
          <div class="side-nav__referral-action">去邀请</div>
        </div>
      </div>
      <!-- 窄版：邀请图片卡片 -->
      <div v-if="isNarrow" class="side-nav__referral-card-narrow cursor-po" @click="showShareDialog = true">
        <img src="@/assets/images/nav/referral-card-min.png" alt="邀请有礼" class="side-nav__referral-card-narrow-img" />
      </div>

      <!-- 用户信息模块 -->
      <div class="side-nav__user-info-wrapper" v-if="store.state.isAuthenticated && store.state.userInfo">
        <!-- 账户弹窗 -->
        <div v-if="showAccountPopup" class="side-nav__account-popup">
          <!-- 顶部渐变区域：会员信息，根据会员类型显示不同渐变背景 -->
          <div class="side-nav__account-popup-header" :class="accountHeaderBgClass">
            <div class="side-nav__account-popup-header-row">
              <div class="side-nav__account-popup-header-left">
                <div class="side-nav__account-popup-member-type" :class="accountMemberColorClass">{{ memberTagText }}</div>
                <div v-if="memberExpireText" class="side-nav__account-popup-expire">{{ memberExpireText }}</div>
              </div>
              <div class="side-nav__account-popup-detail" @click="handleAccountDetail">{{ accountDetailBtnText }}</div>
            </div>
          </div>
          <!-- 设置按钮 -->
          <div class="side-nav__account-popup-item" @click="handleAccountSettings">设置</div>
          <!-- 退出登录按钮 -->
          <div class="side-nav__account-popup-item" @click="handleAccountLogout">退出登录</div>
        </div>

        <!-- 窄版用户信息：只显示头像+会员标签 -->
        <div v-if="isNarrow" class="side-nav__user-info-narrow" @click.stop="showAccountPopup = !showAccountPopup">
          <img src="@/assets/images/nav/avatar-default.png" alt="用户头像" class="side-nav__user-avatar-narrow" />
          <!-- 会员标签 -->
          <div class="side-nav__user-member-tag" :class="memberTagClass">{{ memberTagText }}</div>
        </div>

        <!-- 宽版用户信息卡片（点击弹出/关闭账户弹窗） -->
        <div v-if="!isNarrow" class="side-nav__user-info" :class="{ 'side-nav__user-info--active': showAccountPopup }" @click.stop="showAccountPopup = !showAccountPopup">
          <div class="side-nav__user-left">
            <!-- 手机号（脱敏显示） -->
            <div class="side-nav__user-phone">{{ maskedPhone }}</div>
            <!-- 会员标签 -->
            <div class="side-nav__user-member-tag" :class="memberTagClass">{{ memberTagText }}</div>
          </div>
          <!-- 右侧铃铛图标 -->
          <div class="side-nav__user-bell" @click.stop="showMessageDialog = true">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_422_1692)">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.83126 9.77736L6.60626 5.90736C6.76471 5.1241 7.18922 4.41976 7.80778 3.9138C8.42635 3.40785 9.20088 3.13143 10 3.13143C10.7991 3.13143 11.5737 3.40785 12.1922 3.9138C12.8108 4.41976 13.2353 5.1241 13.3938 5.90736L14.1688 9.77736C14.4013 10.9321 14.9687 11.9929 15.8 12.8274L16.0425 13.0686C16.1318 13.1581 16.1956 13.2697 16.2272 13.3921C16.2589 13.5145 16.2572 13.6431 16.2224 13.7646C16.1876 13.8862 16.1209 13.9962 16.0293 14.0832C15.9376 14.1703 15.8244 14.2313 15.7013 14.2599L14.675 14.4974C11.5989 15.2087 8.40109 15.2087 5.32501 14.4974L4.30001 14.2599C4.17678 14.2315 4.06339 14.1706 3.97161 14.0836C3.87983 13.9966 3.81301 13.8866 3.77806 13.7651C3.74312 13.6435 3.74133 13.5149 3.77288 13.3924C3.80444 13.2699 3.86818 13.1581 3.95751 13.0686L4.20001 12.8274C5.03317 11.9942 5.60081 10.9329 5.83126 9.77736ZM3.99376 9.40987L4.76751 5.53987C5.01082 4.33139 5.66493 3.24439 6.61874 2.46347C7.57256 1.68255 8.76728 1.25586 10 1.25586C11.2327 1.25586 12.4275 1.68255 13.3813 2.46347C14.3351 3.24439 14.9892 4.33139 15.2325 5.53987L16.0075 9.40987C16.165 10.2024 16.555 10.9299 17.1263 11.5011L17.3688 11.7436C17.6951 12.0696 17.9281 12.477 18.0437 12.9236C18.1592 13.3701 18.1531 13.8394 18.0259 14.2828C17.8987 14.7262 17.6551 15.1274 17.3203 15.4447C16.9856 15.7621 16.572 15.984 16.1225 16.0874L15.0963 16.3249C14.2188 16.5249 13.3354 16.674 12.4463 16.7724C12.3274 17.3329 12.0196 17.8356 11.5744 18.1963C11.1292 18.557 10.5736 18.7538 10.0006 18.7538C9.42765 18.7538 8.87205 18.557 8.42685 18.1963C7.98165 17.8356 7.67386 17.3329 7.55501 16.7724C6.66352 16.6757 5.77861 16.5259 4.90501 16.3236L3.87751 16.0861C3.4285 15.9822 3.01545 15.7601 2.68118 15.4428C2.34692 15.1255 2.10361 14.7246 1.97647 14.2816C1.84934 13.8386 1.84301 13.3697 1.95814 12.9234C2.07327 12.4772 2.30568 12.0698 2.63126 11.7436L2.87501 11.4999C3.44626 10.9286 3.83626 10.1999 3.99376 9.40862" fill="#6A7282"/>
              </g>
              <defs>
                <clipPath id="clip0_422_1692">
                  <rect width="20" height="20" fill="white"/>
                </clipPath>
              </defs>
            </svg>
            <!-- 未读消息红点 -->
            <span v-if="unreadCount > 0" class="side-nav__user-bell-dot"></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 消息通知弹窗 -->
    <Teleport to="body">
      <div v-if="showMessageDialog" class="side-nav__dialog-overlay" @click="showMessageDialog = false">
        <div class="side-nav__message-dialog" @click.stop>
          <!-- 弹窗头部 -->
          <div class="side-nav__message-dialog-header">
            <span>消息通知</span>
            <span class="side-nav__dialog-close" @click="showMessageDialog = false">
              <!-- 关闭图标 SVG -->
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 6L6 18M6 6l12 12" stroke="#6A7282" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
          </div>
          <!-- 弹窗内容区：左列表 + 右详情 -->
          <div class="side-nav__message-dialog-content">
            <!-- 左侧消息列表 -->
            <div class="side-nav__message-list" @scroll="handleMessageListScroll">
              <div
                v-for="(msg, idx) in messageList"
                :key="msg.id"
                class="side-nav__message-list-item"
                :class="{ 'side-nav__message-list-item--active': selectedMessageIdx === idx }"
                @click="selectedMessageIdx = idx"
              >
                <!-- 列表项内容：未读圆点 + 标题 + 日期 -->
                <div class="side-nav__message-list-item-row">
                  <div class="side-nav__message-list-item-left">
                    <span v-if="!msg.read" class="side-nav__message-unread-dot"></span>
                    <span class="side-nav__message-list-title">{{ msg.title }}</span>
                  </div>
                  <span class="side-nav__message-list-date">{{ formatMonthDay(msg.createTime) }}</span>
                </div>
              </div>
              <!-- 加载中提示 -->
              <div v-if="messageLoading" class="side-nav__message-list-loading">加载中...</div>
              <!-- 无消息提示 -->
              <div v-if="!messageLoading && messageList.length === 0" class="side-nav__message-list-empty">暂无消息</div>
            </div>
            <!-- 右侧消息详情 -->
            <div class="side-nav__message-detail">
              <template v-if="currentMessage">
                <!-- 详情头部：标题 + 时间 -->
                <div class="side-nav__message-detail-header">
                  <div class="side-nav__message-detail-title">{{ currentMessage.title }}</div>
                  <div class="side-nav__message-detail-time">{{ timestampToLocalDateTime(currentMessage.createTime, 'returnSecond') }}</div>
                </div>
                <!-- 分隔线 -->
                <div class="side-nav__message-detail-divider"></div>
                <!-- 消息正文 -->
                <div class="side-nav__message-detail-content">{{ currentMessage.content }}</div>
              </template>
              <div v-else class="side-nav__message-detail-empty">请选择一条消息查看</div>
            </div>
          </div>
        </div>
      </div>
    </Teleport>

    <!-- 反馈弹窗 -->
    <Teleport to="body">
      <div v-if="showFeedbackDialog" class="side-nav__dialog-overlay" @click="showFeedbackDialog = false">
        <div class="side-nav__dialog feedback-dialog" @click.stop>
          <div class="feedback-dialog__title">反馈与帮助</div>

          <div class="feedback-dialog__section">
            <div class="feedback-dialog__label">*你想向我们反馈什么问题？</div>
            <div class="feedback-dialog__options">
              <div
                v-for="(opt,index) in feedbackOptions"
                :key="index"
                class="feedback-dialog__option"
                :class="{ 'feedback-dialog__option--active': feedbackType === opt }"
                @click="feedbackType = opt, feedbackTypeIndex = index+1"
              >
                {{ opt }}
              </div>
            </div>
          </div>

          <div class="feedback-dialog__section">
            <div class="feedback-dialog__label">*能否提供更多细节？</div>
            <textarea
              v-model="feedbackDetail"
              class="feedback-dialog__textarea"
              placeholder="请描述你的使用体验或分享您的想法。描述越具体，我们越能更好地处理您的反馈。"
              rows="5"
            ></textarea>
          </div>

          <div class="feedback-dialog__actions">
            <button class="feedback-dialog__btn feedback-dialog__btn--cancel" @click="showFeedbackDialog = false">取消</button>
            <button class="feedback-dialog__btn feedback-dialog__btn--submit" @click="handleFeedbackSubmit">确认提交</button>
          </div>
        </div>
      </div>
    </Teleport>
    <!-- 设置弹窗 -->
    <SettingsDialog v-model="showSettingsDialog" :initial-tab="store.state.settingsTab" />
    <!-- 退出登录确认弹窗 -->
    <el-dialog v-model="showLogoutConfirm" title="退出登录" width="3.6rem" style="line-height: 0.2rem" :close-on-click-modal="true" :append-to-body="true">
      <p style="font-size: 0.14rem; color: #555; text-align: center;">确定要退出当前账号吗？</p>
      <template #footer>
        <el-button @click="showLogoutConfirm = false">取消</el-button>
        <el-button type="danger" @click="confirmLogout">确认退出</el-button>
      </template>
    </el-dialog>
    <!-- 邀请注册送会员弹窗 -->
    <SettingsInviteDialog v-model="showShareDialog" />
    <!-- 会员权限拦截弹窗 -->
    <MemberAccessDialog v-model="showMemberAccessDialog" @open-member="showMemberDialog = true" />
    <!-- 会员购买弹窗 -->
    <MemberDialog v-model="showMemberDialog" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import SettingsDialog from '@/components/SettingsDialog.vue'
import MemberAccessDialog from '@/components/MemberAccessDialog.vue'
import MemberDialog from '@/components/MemberDialog.vue'
import { checkLogin } from '@/api/auth'
import { logout } from '@/api/auth'
import { fetchMessageList, fetchUnreadCount, markMessageRead } from '@/api/message'
import { fetchInviteStats } from '@/api/member'
import { timestampToLocalDateTime } from '@/utils/time'

/**
 * 格式化时间戳为月/日显示（如 06/16）
 * 利用 timestampToLocalDateTime 的 returnDay 精度，截取掉年份部分
 */
function formatMonthDay(timestamp: number | null | undefined): string {
  const full = timestampToLocalDateTime(timestamp, 'returnDay') // 返回 "2026/06/16"
  // 去掉年份的四位数字和第一个斜杠 → "06/16"
  return full.replace(/^\d{4}\//, '')
}
import {userFeedback} from '@/api/setting'
import type { MessageDto } from '@/api/message'
import navJobsIcon from '@/assets/images/nav/nav-jobs-icon.png'
import navResumeIcon from '@/assets/images/nav/nav-resume-icon.png'
import navProfileIcon from '@/assets/images/nav/nav-profile-icon.png'
import navAgentIcon from '@/assets/images/nav/nav-agent-icon.png'
import navMessageIcon from '@/assets/images/nav/nav-message-icon.png'
import navSettingIcon from '@/assets/images/nav/nav-setting-icon.png'
import navFeedbackIcon from '@/assets/images/nav/nav-feedback-icon.png'
import navShareIcon from '@/assets/images/nav/nav-share-icon.png'
// 导师页图标（暂用 profile 图标占位，有设计稿后替换为专属图标）
import navMentorIcon from '@/assets/images/nav/nav-profile-icon.png'

/**
 * 选中/hover 状态下的图标 SVG 数组
 * 按索引与 mainMenus 中的菜单项一一对应
 * 索引0 对应第一个菜单项，索引1 对应第二个，以此类推
 */
const activeIconSvgs: string[] = [
  // 索引0 — 职位（Jobs）
  '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_2834_6536)"><path d="M11.5 3.25C10.1759 3.25009 8.87121 3.56889 7.69626 4.17948C6.52131 4.79007 5.51059 5.67451 4.7495 6.75805C3.98842 7.8416 3.49932 9.09242 3.32355 10.4048C3.14777 11.7173 3.29048 13.0527 3.73962 14.2983C4.18875 15.544 4.93112 16.6632 5.90398 17.5614C6.87685 18.4597 8.05164 19.1106 9.32908 19.4591C10.6065 19.8076 11.9491 19.8435 13.2433 19.5638C14.5376 19.2841 15.7455 18.697 16.765 17.852L19.443 20.53C19.5852 20.6625 19.7732 20.7346 19.9675 20.7312C20.1618 20.7277 20.3472 20.649 20.4846 20.5116C20.622 20.3742 20.7008 20.1888 20.7042 19.9945C20.7076 19.8002 20.6355 19.6122 20.503 19.47L17.828 16.794C18.8351 15.5903 19.478 14.1242 19.6812 12.568C19.8843 11.0117 19.6394 9.42975 18.975 8.00781C18.3107 6.58587 17.2545 5.38294 15.9305 4.54021C14.6064 3.69747 13.0695 3.24989 11.5 3.25Z" fill="#52CAD1"/></g><defs><clipPath id="clip0_2834_6536"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>',
  // 索引3 — 第四个菜单项（待替换）
  '<svg width="16" height="16" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_2975_5519" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="2" y="1" width="20" height="22"><path d="M11 22L10.5 18" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 22V6H13L13.5 10L14 14L14.5 18L11 22H21Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 14H16.5M13.5 10H16.5" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 2H12.5L13 6L13.5 10L14 14L14.5 18H3V2Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 6H9.5M6 10H10M6 14H10.5" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></mask><g mask="url(#mask0_2975_5519)"><path d="M0 0H24V24H0V0Z" fill="#52CAD1"/></g></svg>',
  // 索引1 — 第二个菜单项（待替换）
  '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_268_1540)"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.49998 1.66667C9.49998 1.62246 9.48242 1.58007 9.45116 1.54882C9.41991 1.51756 9.37752 1.5 9.33331 1.5H4.66665C4.18042 1.5 3.7141 1.69315 3.37028 2.03697C3.02647 2.38079 2.83331 2.8471 2.83331 3.33333V12.6667C2.83331 13.1529 3.02647 13.6192 3.37028 13.963C3.7141 14.3068 4.18042 14.5 4.66665 14.5H11.3333C11.8195 14.5 12.2859 14.3068 12.6297 13.963C12.9735 13.6192 13.1666 13.1529 13.1666 12.6667V6.098C13.1666 6.0538 13.1491 6.0114 13.1178 5.98015C13.0866 5.94889 13.0442 5.93133 13 5.93133H9.99998C9.86737 5.93133 9.74019 5.87865 9.64643 5.78489C9.55266 5.69112 9.49998 5.56394 9.49998 5.43133V1.66667ZM9.99998 8.16667C10.1326 8.16667 10.2598 8.21935 10.3535 8.31311C10.4473 8.40688 10.5 8.53406 10.5 8.66667C10.5 8.79927 10.4473 8.92645 10.3535 9.02022C10.2598 9.11399 10.1326 9.16667 9.99998 9.16667H5.99998C5.86737 9.16667 5.74019 9.11399 5.64643 9.02022C5.55266 8.92645 5.49998 8.79927 5.49998 8.66667C5.49998 8.53406 5.55266 8.40688 5.64643 8.31311C5.74019 8.21935 5.86737 8.16667 5.99998 8.16667H9.99998ZM9.99998 10.8333C10.1326 10.8333 10.2598 10.886 10.3535 10.9798C10.4473 11.0735 10.5 11.2007 10.5 11.3333C10.5 11.4659 10.4473 11.5931 10.3535 11.6869C10.2598 11.7807 10.1326 11.8333 9.99998 11.8333H5.99998C5.86737 11.8333 5.74019 11.7807 5.64643 11.6869C5.55266 11.5931 5.49998 11.4659 5.49998 11.3333C5.49998 11.2007 5.55266 11.0735 5.64643 10.9798C5.74019 10.886 5.86737 10.8333 5.99998 10.8333H9.99998Z" fill="#52CAD1"/><path d="M10.5 1.88266C10.5 1.75999 10.6287 1.68199 10.724 1.75866C10.8049 1.82399 10.8767 1.89999 10.9393 1.98666L12.948 4.78466C12.9933 4.84866 12.944 4.93132 12.8653 4.93132H10.6667C10.6225 4.93132 10.5801 4.91377 10.5488 4.88251C10.5176 4.85125 10.5 4.80886 10.5 4.76466V1.88266Z" fill="#52CAD1"/></g><defs><clipPath id="clip0_268_1540"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>',
  // 索引2 — 第三个菜单项（待替换）
  '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_268_1537)"><path d="M13.8086 5.41868L13.6446 5.79601C13.619 5.85745 13.5758 5.90994 13.5204 5.94686C13.465 5.98378 13.3999 6.00348 13.3333 6.00348C13.2667 6.00348 13.2017 5.98378 13.1462 5.94686C13.0908 5.90994 13.0476 5.85745 13.022 5.79601L12.858 5.41868C12.5696 4.75116 12.0416 4.21596 11.378 3.91868L10.872 3.69268C10.8106 3.66444 10.7586 3.61919 10.7221 3.56229C10.6857 3.5054 10.6663 3.43925 10.6663 3.37168C10.6663 3.3041 10.6857 3.23795 10.7221 3.18106C10.7586 3.12416 10.8106 3.07891 10.872 3.05068L11.35 2.83801C12.0302 2.53226 12.5674 1.97726 12.8506 1.28734L13.0193 0.880009C13.0441 0.816911 13.0873 0.762741 13.1433 0.724559C13.1993 0.686377 13.2655 0.665955 13.3333 0.665955C13.4011 0.665955 13.4673 0.686377 13.5233 0.724559C13.5793 0.762741 13.6225 0.816911 13.6473 0.880009L13.816 1.28668C14.099 1.97673 14.6358 2.53196 15.316 2.83801L15.7946 3.05134C15.8558 3.07966 15.9077 3.1249 15.944 3.18172C15.9803 3.23855 15.9996 3.30457 15.9996 3.37201C15.9996 3.43944 15.9803 3.50547 15.944 3.56229C15.9077 3.61911 15.8558 3.66436 15.7946 3.69268L15.288 3.91801C14.6245 4.21559 14.0967 4.75103 13.8086 5.41868ZM13.3333 7.33334C13.7858 7.3337 14.2351 7.25728 14.662 7.10734C14.6651 7.1829 14.6666 7.25823 14.6666 7.33334C14.6666 8.74783 14.1047 10.1044 13.1045 11.1046C12.1044 12.1048 10.7478 12.6667 9.33331 12.6667V15C5.99998 13.6667 1.33331 11.6667 1.33331 7.33334C1.33331 5.91885 1.89522 4.5623 2.89541 3.56211C3.8956 2.56191 5.25216 2.00001 6.66665 2.00001H9.33331C9.40887 2.00001 9.4842 2.00156 9.55931 2.00468C9.34686 2.60796 9.28217 3.25339 9.37068 3.88684C9.45918 4.52028 9.69829 5.12327 10.068 5.64522C10.4376 6.16717 10.9271 6.59286 11.4952 6.88659C12.0634 7.18032 12.6937 7.33352 13.3333 7.33334Z" fill="#52CAD1"/></g><defs><clipPath id="clip0_268_1537"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>',
  // 索引4 — 第五个菜单项（待替换）
  '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_268_1538)"><path d="M6.07134 3.63198C6.47001 2.46531 8.08201 2.42998 8.55468 3.52598L8.59468 3.63265L9.13268 5.20598C9.25597 5.5668 9.45521 5.89699 9.71696 6.17426C9.97871 6.45154 10.2969 6.66945 10.65 6.81331L10.7947 6.86731L12.368 7.40465C13.5347 7.80331 13.57 9.41531 12.4747 9.88798L12.368 9.92798L10.7947 10.466C10.4337 10.5892 10.1034 10.7884 9.82602 11.0502C9.54863 11.3119 9.33061 11.6301 9.18668 11.9833L9.13268 12.1273L8.59534 13.7013C8.19668 14.868 6.58468 14.9033 6.11268 13.808L6.07134 13.7013L5.53401 12.128C5.4108 11.767 5.21159 11.4367 4.94984 11.1593C4.68808 10.8819 4.36987 10.6639 4.01668 10.52L3.87268 10.466L2.29934 9.92865C1.13201 9.52998 1.09668 7.91798 2.19268 7.44598L2.29934 7.40465L3.87268 6.86731C4.2335 6.74402 4.56368 6.54478 4.84096 6.28303C5.11823 6.02128 5.33615 5.70311 5.48001 5.34998L5.53401 5.20598L6.07134 3.63198ZM12.6667 1.33331C12.7914 1.33331 12.9136 1.3683 13.0194 1.43429C13.1253 1.50029 13.2105 1.59465 13.2653 1.70665L13.2973 1.78465L13.5307 2.46865L14.2153 2.70198C14.3403 2.74444 14.4499 2.82306 14.5302 2.92786C14.6104 3.03266 14.6578 3.15893 14.6662 3.29066C14.6746 3.4224 14.6437 3.55367 14.5775 3.66784C14.5112 3.78201 14.4126 3.87394 14.294 3.93198L14.2153 3.96398L13.5313 4.19731L13.298 4.88198C13.2555 5.00693 13.1768 5.11645 13.072 5.19664C12.9671 5.27684 12.8408 5.32411 12.7091 5.33246C12.5774 5.34081 12.4461 5.30988 12.332 5.24357C12.2179 5.17726 12.126 5.07856 12.068 4.95998L12.036 4.88198L11.8027 4.19798L11.118 3.96465C10.993 3.92218 10.8835 3.84357 10.8032 3.73877C10.7229 3.63397 10.6756 3.5077 10.6672 3.37597C10.6587 3.24423 10.6896 3.11296 10.7559 2.99879C10.8221 2.88462 10.9208 2.79269 11.0393 2.73465L11.118 2.70265L11.802 2.46931L12.0353 1.78465C12.0803 1.65293 12.1653 1.53859 12.2786 1.45765C12.3918 1.37671 12.5275 1.33323 12.6667 1.33331Z" fill="#52CAD1"/></g><defs><clipPath id="clip0_268_1538"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>',
  // 索引5 — 第六个菜单项（待替换）
  '<svg width="16" height="16" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.94013 1.97814C11.1383 0.940907 12.8621 0.940856 14.0602 1.97814C15.0132 2.80372 16.382 4.05138 18.1647 5.83458C19.9482 7.61754 21.197 8.98606 22.0222 9.93907C23.0594 11.1373 23.0594 12.862 22.0222 14.0602C21.1965 15.0137 19.9482 16.3812 18.1647 18.1647C16.3818 19.9481 15.0133 21.1965 14.0602 22.0221C12.862 23.0593 11.1373 23.0594 9.93915 22.0221C8.98613 21.1965 7.61762 19.9481 5.83466 18.1647C4.05133 16.3818 2.80336 15.0132 1.97821 14.0602C0.940907 12.8619 0.940907 11.1373 1.97821 9.93907C2.80384 8.98606 4.05134 7.61743 5.83466 5.83458C7.61762 4.05114 8.98711 2.80329 9.94013 1.97814ZM11.9997 14.567C11.5396 14.5672 11.1667 14.9399 11.1667 15.4V15.4996C11.1667 15.9597 11.5396 16.3334 11.9997 16.3336H12.0993C12.5595 16.3336 12.9332 15.9598 12.9333 15.4996V15.4C12.9333 14.9398 12.5595 14.567 12.0993 14.567H11.9997ZM12.0495 7.567C11.5895 7.56727 11.2165 7.93994 11.2165 8.40001V12.4C11.2166 12.86 11.5895 13.2328 12.0495 13.233C12.5097 13.233 12.8834 12.8602 12.8835 12.4V8.40001C12.8835 7.93977 12.5097 7.567 12.0495 7.567Z" fill="#52CAD1"/></svg>',
]

/**
 * 根据菜单索引获取选中状态图标
 * 当菜单处于 hover 或 active 状态时使用此图标替换默认图标
 */
function getActiveIcon(index: number): string {
  return activeIconSvgs[index] || ''
}

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

/**
 * 监听路由变化：已登录时刷新用户信息和会员状态到 vuex
 * 这样每次页面切换都能拿到最新数据
 */
watch(() => route.path, () => {
  if (store.state.isAuthenticated) {
    store.dispatch('loadUserInfo')
    store.dispatch('loadMemberStatus')
  }
}, { immediate: true })

interface MenuItem {
  name: string
  path: string
  iconImg: string
  label: string
  badge?: string
  /** 排序字段 */
  sortOrder: number
  /** 是否有使用权限 */
  accessible: boolean
}

/**
 * 图标映射表（兼容旧版字符串 key，新版后端直接返回 SVG 字符串）
 * 如果 meta.icon 是一个已知的 key，则使用对应图片；否则直接当作 SVG 字符串使用
 */
const iconMap: Record<string, string> = {
  'nav-jobs-icon':    navJobsIcon,
  'nav-resume-icon':  navResumeIcon,
  'nav-profile-icon': navProfileIcon,
  'nav-agent-icon':   navAgentIcon,
  'nav-setting-icon': navSettingIcon,
  'nav-mentor-icon':  navMentorIcon,
}

/**
 * 解析图标：如果是已知的 key 则返回 img 标签，如果是 SVG 字符串则直接返回
 */
function resolveIcon(iconValue: string | undefined): string {
  if (!iconValue) return ''
  // 如果在映射表中找到了，说明是旧版 key，包装成 img 标签
  if (iconMap[iconValue]) {
    return `<img src="${iconMap[iconValue]}" alt="" />`
  }
  // 否则认为是 SVG 字符串，直接返回
  return iconValue
}

/**
 * 静态菜单 — 不需要登录就能看到的导航项（比如"职位"）
 * 这些菜单始终显示，不依赖后端返回
 * sortOrder 设为 0 确保在未获取到后端数据时也能正常显示
 */
const staticMenus: MenuItem[] = [
  { name: 'Jobs', path: '/jobs', iconImg: `<img src="${navJobsIcon}" alt="" />`, label: '职位', sortOrder: 0, accessible: true },
]

/**
 * 动态菜单 — 从 store.state.dynamicMenus（后端返回的数据）转换而来
 * 登录后才会有数据，登出后自动清空
 * 过滤掉 position === 'footer' 的项（如"设置"），它们显示在底部区域
 * 按 sortOrder 排序，routeName（meta.label）作为显示名称
 */
const dynamicMenuItems = computed<MenuItem[]>(() => {
  return store.state.dynamicMenus
    .filter((item: any) => item.meta?.position !== 'footer')
    .map((item: any) => ({
      name: item.name,
      path: item.path,
      iconImg: resolveIcon(item.meta?.icon),
      label: item.meta?.label || item.name,
      badge: item.meta?.badge,
      sortOrder: item.sortOrder ?? 99,
      accessible: item.accessible !== false, // 默认为 true
    }))
    .sort((a: MenuItem, b: MenuItem) => a.sortOrder - b.sortOrder)
})

/**
 * 最终渲染的主菜单 = 静态菜单 + 动态菜单，按 sortOrder 统一排序
 * 如果后端返回了 Jobs 的数据，用后端数据覆盖静态菜单的 sortOrder
 */
const mainMenus = computed<MenuItem[]>(() => {
  // 动态菜单中已包含后端返回的 Jobs（如果有的话），此时不再使用静态的
  const dynamicNames = dynamicMenuItems.value.map(m => m.name)
  const filteredStatic = staticMenus.filter(s => !dynamicNames.includes(s.name))
  return [...filteredStatic, ...dynamicMenuItems.value].sort((a, b) => a.sortOrder - b.sortOrder)
})

const showShareDialog = ref(false)

/** 是否为窄版导航（窗口宽度 < 1440px） */
const isNarrow = ref(window.innerWidth < 6440)

/** 监听窗口宽度变化，动态切换窄版/宽版 */
function handleNavResize() {
  isNarrow.value = window.innerWidth < 6440
}
const showMessageDialog = ref(false)
const showFeedbackDialog = ref(false)
/** 当前hover的菜单索引，-1表示无hover */
const hoverIndex = ref(-1)
/** 会员权限拦截弹窗 — 读写 store 全局状态（路由守卫也可触发） */
const showMemberAccessDialog = computed({
  get: () => store.state.showMemberAccessDialog,
  set: (val: boolean) => store.commit('SET_SHOW_MEMBER_ACCESS_DIALOG', val),
})
/** 会员购买弹窗 */
const showMemberDialog = ref(false)
const showSettingsDialog = computed({
  get: () => store.state.showSettings,
  set: (val: boolean) => store.commit('SET_SHOW_SETTINGS', val),
})
const feedbackType = ref('')
const feedbackTypeIndex = ref(0)
const feedbackDetail = ref('')
import { ElMessage } from 'element-plus'
import SettingsInviteDialog from "@/components/SettingsInviteDialog.vue";

// ==================== 站内信相关 ====================
/** 未读消息数量 */
const unreadCount = ref(0)

// ==================== 邀请统计相关 ====================
/** 当前周期已邀请人数 */
const milestoneProgress = ref(0)
/** 里程碑目标总人数（从接口获取） */
const milestoneTarget = ref(30)
/** 进度条百分比 */
const inviteProgressPercent = computed(() => {
  if (milestoneTarget.value <= 0) return 0
  return Math.min(Math.round((milestoneProgress.value / milestoneTarget.value) * 100), 100)
})
/** 还需邀请人数 */
const inviteRemaining = computed(() => {
  return Math.max(milestoneTarget.value - milestoneProgress.value, 0)
})

/**
 * 获取邀请统计数据
 */
async function loadInviteStats() {
  try {
    const res = await fetchInviteStats()
    milestoneProgress.value = res.data?.milestoneProgress ?? 0
    milestoneTarget.value = res.data?.milestoneTarget ?? 30
  } catch (e) {
    console.error('获取邀请统计失败', e)
  }
}
/** 消息列表数据 */
const messageList = ref<MessageDto[]>([])
/** 当前选中的消息索引 */
const selectedMessageIdx = ref(0)
/** 当前页码 */
const messagePageNum = ref(1)
/** 是否还有更多数据 */
const messageHasMore = ref(true)
/** 加载状态 */
const messageLoading = ref(false)

/** 当前选中的消息对象 */
const currentMessage = computed(() => {
  return messageList.value[selectedMessageIdx.value] || null
})

/**
 * 获取未读消息数量
 */
async function loadUnreadCount() {
  try {
    const res = await fetchUnreadCount()
    // 接口返回结构: { code, data: number }
    unreadCount.value = res.data ?? 0
  } catch (e) {
    console.error('获取未读消息数量失败', e)
  }
}

// 组件挂载时获取未读消息数量（已移到下方 onMounted 统一处理）

/**
 * 加载消息列表（分页追加）
 */
async function loadMessages() {
  if (messageLoading.value || !messageHasMore.value) return
  messageLoading.value = true
  try {
    const res = await fetchMessageList({ pageNum: messagePageNum.value, pageSize: 20 })
    // 接口返回结构: { code, msg, data: { pageNum, pageSize, total, list } }
    const pageData = res.data
    if (pageData && pageData.list && pageData.list.length > 0) {
      messageList.value.push(...pageData.list)
      // 判断是否还有更多
      messageHasMore.value = messageList.value.length < pageData.total
      messagePageNum.value++
    } else {
      messageHasMore.value = false
    }
  } catch (e) {
    console.error('加载消息失败', e)
  } finally {
    messageLoading.value = false
  }
}

/**
 * 消息列表滚动到底部时加载下一页
 */
function handleMessageListScroll(e: Event) {
  const el = e.target as HTMLElement
  if (el.scrollTop + el.clientHeight >= el.scrollHeight - 10) {
    loadMessages()
  }
}

/**
 * 刷新消息列表数据（保持当前选中的消息不变）
 */
async function refreshMessageList(keepMessageId: number | string) {
  try {
    // 重新请求已加载的所有页数据
    const totalLoaded = messageList.value.length
    const res = await fetchMessageList({ pageNum: 1, pageSize: totalLoaded })
    const pageData = res.data
    if (pageData && pageData.list) {
      messageList.value = pageData.list
      // 根据之前选中的消息ID恢复选中状态
      const idx = messageList.value.findIndex((m: MessageDto) => String(m.id) === String(keepMessageId))
      selectedMessageIdx.value = idx >= 0 ? idx : 0
    }
  } catch (e) {
    console.error('刷新消息列表失败', e)
  }
}

/**
 * 上报消息已读：当右侧显示某条消息时，如果该消息未读则标记已读
 * 标记成功后刷新列表数据和未读数量
 */
async function handleMarkRead(msg: MessageDto) {
  if (msg.read) return
  try {
    await markMessageRead(msg.id)
    // 刷新列表状态，保持当前选中
    await refreshMessageList(msg.id)
    // 更新未读数量
    loadUnreadCount()
  } catch (e) {
    console.error('标记已读失败', e)
  }
}

/**
 * 监听当前选中消息变化，触发已读上报
 */
watch(currentMessage, (msg) => {
  if (msg && !msg.read) {
    handleMarkRead(msg)
  }
})

/**
 * 监听弹窗打开，重置并加载第一页消息
 */
watch(showMessageDialog, (val) => {
  if (val) {
    messageList.value = []
    messagePageNum.value = 1
    messageHasMore.value = true
    selectedMessageIdx.value = 0
    loadMessages()
  }
})

const feedbackOptions = ['Bug反馈', '功能建议', '使用体验', '订阅及会员权益相关问题', '其它']


/**
 * 提交反馈
 */
async function handleFeedbackSubmit() {

  console.log('反馈类型:', feedbackType.value,'类型index：', feedbackTypeIndex.value, '详情:', feedbackDetail.value)
  if(feedbackTypeIndex.value<1||feedbackDetail.value.trim()==''){
    ElMessage.warning('请选择问题并填写反馈内容')
  }else{

    //反馈接口
    await userFeedback({
      type: feedbackTypeIndex.value,
      content: feedbackDetail.value
    })
    ElMessage.success('提交成功')
    feedbackType.value = ''
    feedbackDetail.value = ''
    feedbackTypeIndex.value = 0
    showFeedbackDialog.value = false
  }


}

/**
 * 底部"设置"按钮 — 从动态菜单中取 position === 'footer' 的项
 * 未登录时使用默认图标和文字
 */
const settingsMenu = computed(() => {
  const item = store.state.dynamicMenus.find((m: any) => m.meta?.position === 'footer')
  if (item) {
    return {
      iconImg: resolveIcon(item.meta?.icon) || `<img src="${navSettingIcon}" alt="" />`,
      label: item.meta?.label || '设置',
      path: item.path,
    }
  }
  return { iconImg: `<img src="${navSettingIcon}" alt="" />`, label: '设置', path: '/settings' }
})

const footerMenus = computed(() => [
  { iconImg: `<img src="${navMessageIcon}" alt="" />`, label: '消息通知', badge: unreadCount.value > 0 ? 'NEW' : '', action: () => { showMessageDialog.value = true } },
  { iconImg: settingsMenu.value.iconImg, label: settingsMenu.value.label, action: () => { handleSettingsNav() } },
  { iconImg: `<img src="${navFeedbackIcon}" alt="" />`, label: '反馈', action: () => { showFeedbackDialog.value = true } },
])

/**
 * 手机号脱敏显示：134****1254 格式
 */
const maskedPhone = computed(() => {
  const phone = store.state.userInfo?.mobileNumber || ''
  if (phone.length >= 7) {
    return phone.slice(0, 3) + '****' + phone.slice(-4)
  }
  return phone || '未绑定手机'
})

/**
 * 会员标签文字：根据 isMember + memberType 判断
 * memberType: 1=正式会员 2=试用会员, isMember=false → 免费用户
 */
const memberTagText = computed(() => {
  const status = store.state.memberStatus
  if (!status || !status.isMember) return '免费用户'
  if (status.memberType === 1) return '正式会员'
  if (status.memberType === 2) return '试用会员'
  return '免费用户'
})

/**
 * 账户弹窗右上角按钮文字：免费用户显示"开通会员"，付费用户显示"详情>"
 */
const accountDetailBtnText = computed(() => {
  const status = store.state.memberStatus
  if (!status || !status.isMember) return '开通会员'
  return '详情>'
})

/**
 * 会员标签样式 class
 */
const memberTagClass = computed(() => {
  const status = store.state.memberStatus
  if (!status || !status.isMember) return 'side-nav__user-member-tag--free'
  if (status.memberType === 1) return 'side-nav__user-member-tag--formal'
  if (status.memberType === 2) return 'side-nav__user-member-tag--trial'
  return 'side-nav__user-member-tag--free'
})

/** 账户弹窗显示状态 */
const showAccountPopup = ref(false)

/** 退出登录确认弹窗 */
const showLogoutConfirm = ref(false)

/**
 * 账户弹窗中会员类型字体颜色 class
 */
const accountMemberColorClass = computed(() => {
  const status = store.state.memberStatus
  if (!status || !status.isMember) return 'side-nav__account-popup-member-type--free'
  if (status.memberType === 1) return 'side-nav__account-popup-member-type--formal'
  if (status.memberType === 2) return 'side-nav__account-popup-member-type--trial'
  return 'side-nav__account-popup-member-type--free'
})

/**
 * 账户弹窗顶部渐变背景 class
 * 正式会员：#EDF9FA → #FFF；试用会员：#FEF5E7 → #FFF；免费用户：#F1F2F4 → #FFF
 */
const accountHeaderBgClass = computed(() => {
  const status = store.state.memberStatus
  if (!status || !status.isMember) return 'side-nav__account-popup-header--free'
  if (status.memberType === 1) return 'side-nav__account-popup-header--formal'
  if (status.memberType === 2) return 'side-nav__account-popup-header--trial'
  return 'side-nav__account-popup-header--free'
})

/**
 * 会员到期时间显示文字 — 使用项目时间工具 timestampToLocalDateTime
 */
const memberExpireText = computed(() => {
  const status = store.state.memberStatus
  if (!status || !status.isMember) return ''
  if (status.expireTime) {
    return timestampToLocalDateTime(status.expireTime, 'returnDay') + '到期'
  }
  return ''
})

/** 账户弹窗 — 点击"详情>"跳转会员页 */
/** 账户弹窗 — 点击"详情>"：正式会员打开设置弹窗并切换到会员tab，试用/免费用户打开会员购买弹窗 */
function handleAccountDetail() {
  showAccountPopup.value = false
  const status = store.state.memberStatus
  if (status && status.isMember && status.memberType === 1) {
    // 正式会员：打开设置弹窗，切换到会员页
    store.state.settingsTab = 'member'
    showSettingsDialog.value = true
  } else {
    // 试用会员 / 免费用户：打开会员购买弹窗
    showMemberDialog.value = true
  }
}

/** 账户弹窗 — 点击"设置"打开设置弹窗 */
function handleAccountSettings() {
  showAccountPopup.value = false
  handleSettingsNav()
}

/** 账户弹窗 — 点击"退出登录"弹出确认弹窗 */
function handleAccountLogout() {
  showAccountPopup.value = false
  showLogoutConfirm.value = true
}

/** 确认退出登录 */
async function confirmLogout() {
  showLogoutConfirm.value = false
  try {
    const res = await logout()
    if (res.code === '0') {
      ElMessage.success('已退出登录')
    }
  } catch {
    // 即使接口失败也执行前端登出
  }
  store.dispatch('logout')
  router.push('/')
}

/**
 * 点击页面其他地方关闭账户弹窗
 */
function handleGlobalClick() {
  if (showAccountPopup.value) {
    showAccountPopup.value = false
  }
}

onMounted(() => {
  loadUnreadCount()
  loadInviteStats()
  document.addEventListener('click', handleGlobalClick)
  window.addEventListener('resize', handleNavResize)
})

onUnmounted(() => {
  document.removeEventListener('click', handleGlobalClick)
  window.removeEventListener('resize', handleNavResize)
})

/**
 * 设置弹窗：需要登录，通过 checkLogin 接口验证
 */
async function handleSettingsNav() {
  try {
    const res = await checkLogin()
    if (res.code === '0' && res.data === true) {
      store.commit('SET_AUTHENTICATED', true)
      store.commit('SET_SETTINGS_TAB', 'account')
      showSettingsDialog.value = true
    } else {
      store.commit('SET_AUTHENTICATED', false)
      store.dispatch('openLogin')
    }
  } catch {
    store.commit('SET_AUTHENTICATED', false)
    store.dispatch('openLogin')
  }
}

/**
 * 导航点击处理：
 * - 静态页面（Jobs）直接跳转
 * - accessible 为 false 的菜单 → 弹出会员权限拦截弹窗
 * - 动态页面通过 checkLogin 接口验证，未登录则弹登录框
 */
const staticNames = staticMenus.map(m => m.name)

async function handleNav(item: MenuItem) {
  // 无权限菜单 — 弹出会员权限拦截弹窗
  if (!item.accessible) {
    showMemberAccessDialog.value = true
    return
  }

  // 外部链接 — routePath 是 http/https 开头，新标签页打开
  if (/^https?:\/\//.test(item.path)) {
    window.open(item.path, '_blank')
    return
  }

  // 不需要登录的白名单页面 — 直接跳转
  const publicNavNames = ['Jobs', 'JobDetail', 'Announcement', 'AnnouncementDetail', 'MentorDetail']
  if (staticNames.includes(item.name) || publicNavNames.includes(item.name)) {
    router.push(item.path)
    return
  }

  // 动态页面 — 需要登录验证
  try {
    const res = await checkLogin()
    if (res.code === '0' && res.data === true) {
      store.commit('SET_AUTHENTICATED', true)
      router.push(item.path)
    } else {
      store.commit('SET_AUTHENTICATED', false)
      store.dispatch('openLogin', item.path)
    }
  } catch {
    store.commit('SET_AUTHENTICATED', false)
    store.dispatch('openLogin', item.path)
  }
}

function isActive(name: string) {
  return route.name === name
}
</script>
