﻿<template>
  <view class="container">
    <!-- 未登录状态 -->
    <view v-if="!isLoggedIn" class="user-header">
      <view class="user-avatar">
        <text class="avatar-emoji"></text>
      </view>
      <view class="user-info">
        <text class="user-name">你好,欢迎使用习正陪读</text>
        <text class="login-tip">登录后享受更多服务</text>
      </view>
      <view class="login-btn" @click="goToRoleSelect">
        <text>登录/注册</text>
      </view>
    </view>

    <!-- 已登录状态 -->
    <view v-else class="user-header">
      <view class="user-avatar">
        <image 
          v-if="userInfo.avatar" 
          :src="userInfo.avatar" 
          class="avatar-image" 
          mode="aspectFill"
        />
        <text v-else class="avatar-emoji">👤</text>
      </view>
      <view class="user-info">
        <text class="user-name">{{ roleName }}</text>
        <text class="user-phone" v-if="userInfo.phone">{{ userInfo.phone }}</text>
        <!-- 角色标签 -->
        <view class="role-tag">{{ getRoleGreeting() }}</view>
      </view>
      <view class="setting-btn" @click="goSetting">
        <text>设置</text>
      </view>
    </view>
    
    <!-- 角色切换（仅登录后显示） -->
    <view v-if="isLoggedIn" class="role-switch-section">
      <view class="section-header" @click="toggleRoleList">
        <view class="section-left">
          <uni-icons class="section-icon" type="person" size="18" color="#2d9687"></uni-icons>
          <text class="section-title">当前角色</text>
        </view>
        <view class="section-right">
          <text class="current-role">{{ roleName }}</text>
          <text class="arrow" :class="{ expanded: showRoleList }" decode="true">▼</text>
        </view>
      </view>
      
      <!-- 角色列表（折叠展开） -->
      <view v-if="showRoleList && userRoles.length > 0" class="role-list-container">
        <view 
          v-for="role in userRoles" 
          :key="role.roleType"
          class="role-item"
          :class="{ active: currentRole === getRoleValue(role.roleType), primary: role.isPrimary }"
          @click="switchToRole(role.roleType)"
        >
          <text class="role-icon">{{ getRoleIcon(role.roleType) }}</text>
          <view class="role-info">
            <text class="role-name">{{ getRoleLabel(role.roleType) }}</text>
            <text v-if="role.isPrimary" class="primary-badge">主身份</text>
          </view>
          <text v-if="currentRole === getRoleValue(role.roleType)" class="check-icon">✓</text>
        </view>
        
        <!-- 申请新身份入口 -->
        <view class="apply-role-btn" @click="goToApplyRole">
          <text class="plus-icon">+</text>
          <text>申请其他身份</text>
        </view>
      </view>
    </view>
    
    <!-- 我的预约（仅家长，登录后显示） -->
    <view class="order-section" v-if="isLoggedIn && currentRole === 'user'">
      <view class="section-header" @click="goOrderList()">
        <text class="section-title">我的预约</text>
        <text class="section-more">全部</text>
        <text decode="true">></text>
      </view>
      <view class="order-tabs">
        <view class="order-tab" @click="goOrderList(0)">
          <uni-icons class="tab-icon" type="wallet" size="20" color="#333"></uni-icons>
          <text>待支付</text>
          <text class="badge" v-if="orderCount.unpaid">{{ orderCount.unpaid }}</text>
        </view>
        <view class="order-tab" @click="goOrderList(1)">
          <uni-icons class="tab-icon" type="calendar" size="20" color="#333"></uni-icons>
          <text>待服务</text>
          <text class="badge" v-if="orderCount.pending">{{ orderCount.pending }}</text>
        </view>
        <view class="order-tab" @click="goOrderList(3)">
          <uni-icons class="tab-icon" type="checkbox-filled" size="20" color="#52c41a"></uni-icons>
          <text>已完成</text>
        </view>
        <view class="order-tab" @click="goOrderList(-1)">
          <uni-icons class="tab-icon" type="close" size="20" color="#ff4d4f"></uni-icons>
          <text>已取消</text>
        </view>
      </view>
    </view>
    
    <!-- 功能菜单（仅家长，登录后显示） -->
    <view class="menu-section" v-if="isLoggedIn && currentRole === 'user'">
      <view class="menu-item" @click="goPage('/activity-package/pages/group-buy/index')">
        <uni-icons class="menu-icon" type="gift" size="20" color="#2d9687"></uni-icons>
        <text>我的拼团</text>
        <text class="hot-badge">HOT</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/user-package/pages/user/student')">
        <uni-icons class="menu-icon" type="person" size="20" color="#2d9687"></uni-icons>
        <text>学生管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/user-package/pages/user/learning-record')">
        <uni-icons class="menu-icon" type="compose" size="20" color="#2d9687"></uni-icons>
        <text>学习记录</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/user-package/pages/feedback/list')">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>服务反馈</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/user-package/pages/review/list')">
        <uni-icons class="menu-icon" type="star-filled" size="20" color="#faad14"></uni-icons>
        <text>我的评价</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/user-package/pages/course/my-courses')">
        <uni-icons class="menu-icon" type="list" size="20" color="#2d9687"></uni-icons>
        <text>我的课程</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/user-package/pages/user/coupon')">
        <uni-icons class="menu-icon" type="gift" size="20" color="#2d9687"></uni-icons>
        <text>我的优惠券</text>
        <text class="badge" v-if="couponCount">{{ couponCount }}</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/user-package/pages/user/timecard')">
        <uni-icons class="menu-icon" type="calendar" size="20" color="#2d9687"></uni-icons>
        <text>我的时卡</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/user-package/pages/user/wallet')">
        <uni-icons class="menu-icon" type="wallet" size="20" color="#2d9687"></uni-icons>
        <text>我的钱包</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/user-package/pages/user/points')">
        <uni-icons class="menu-icon" type="star" size="20" color="#2d9687"></uni-icons>
        <text>我的积分</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/user-package/pages/user/package')">
        <uni-icons class="menu-icon" type="gift" size="20" color="#2d9687"></uni-icons>
        <text>我的套餐</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/user-package/pages/course/course-selector')">
        <uni-icons class="menu-icon" type="list" size="20" color="#2d9687"></uni-icons>
        <text>课程选择</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/user-package/pages/address/list')">
        <uni-icons class="menu-icon" type="location" size="20" color="#2d9687"></uni-icons>
        <text>地址管理</text>
        <text class="arrow" decode="true">></text>
      </view>
    </view>
    
    <!-- 职业注册入口（仅家长，登录后显示） -->
    <view class="menu-section career-section" v-if="isLoggedIn && currentRole === 'user'">
      <view class="menu-item career-item" @click="goToTeacherRegister">
        <view class="career-left">
          <uni-icons class="menu-icon career-icon" type="person-filled" size="20" color="#1890ff"></uni-icons>
          <view class="career-info">
            <text class="career-name">成为陪伴员</text>
            <text class="career-desc">提供专业陪伴服务，获得收益</text>
          </view>
        </view>
        <view class="career-right">
          <text class="badge recommend">热门推荐</text>
          <text class="arrow" decode="true">></text>
        </view>
      </view>
      
      <view class="menu-item career-item" @click="goToDistributorRegister">
        <view class="career-left">
          <uni-icons class="menu-icon career-icon" type="wallet-filled" size="20" color="#52c41a"></uni-icons>
          <view class="career-info">
            <text class="career-name">成为分销员</text>
            <text class="career-desc">推广课程获得佣金，发展事业</text>
          </view>
        </view>
        <view class="career-right">
          <text class="badge commission">高佣金</text>
          <text class="arrow" decode="true">></text>
        </view>
      </view>
      
      <view class="menu-item career-item" @click="goToProviderRegister">
        <view class="career-left">
          <uni-icons class="menu-icon career-icon" type="home-filled" size="20" color="#fa8c16"></uni-icons>
          <view class="career-info">
            <text class="career-name">成为服务商</text>
            <text class="career-desc">提供专业教育服务，扩大业务</text>
          </view>
        </view>
        <view class="career-right">
          <text class="badge professional">专业认证</text>
          <text class="arrow" decode="true">></text>
        </view>
      </view>
    </view>
    
    <!-- 陪伴员功能菜单（按第4版需求文档） -->
    <view class="menu-section" v-if="isLoggedIn && currentRole === 'teacher'">
      <view class="menu-item" @click="goPage('/teacher-package/pages/level/index')">
        <uni-icons class="menu-icon" type="star" size="20" color="#2d9687"></uni-icons>
        <text>我的等级</text>
        <text class="level-badge" :class="'level-' + currentLevelType">{{ currentLevelName }}</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/teacher-package/pages/teacher/orders')">
        <uni-icons class="menu-icon" type="list" size="20" color="#2d9687"></uni-icons>
        <text>我的工单</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/teacher-package/pages/teacher/schedule')">
        <uni-icons class="menu-icon" type="calendar" size="20" color="#2d9687"></uni-icons>
        <text>时间管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/teacher-package/pages/teacher/growth-record')">
        <uni-icons class="menu-icon" type="compose" size="20" color="#2d9687"></uni-icons>
        <text>成长记录</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/teacher-package/pages/teacher/earnings')">
        <uni-icons class="menu-icon" type="wallet" size="20" color="#2d9687"></uni-icons>
        <text>收益管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/common-package/pages/notification/list')">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>消息通知</text>
        <text class="badge" v-if="notificationCount">{{ notificationCount }}</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/teacher-package/pages/teacher/settings')">
        <uni-icons class="menu-icon" type="compose" size="20" color="#2d9687"></uni-icons>
        <text>系统设置</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="contactService">
        <uni-icons class="menu-icon" type="phone" size="20" color="#2d9687"></uni-icons>
        <text>客服电话</text>
        <text class="arrow" decode="true">></text>
      </view>

      <!-- #ifdef MP-WEIXIN -->
      <button class="menu-item" open-type="contact">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>在线客服</text>
        <text class="arrow" decode="true">></text>
      </button>
      <!-- #endif -->

      <!-- #ifndef MP-WEIXIN -->
      <view class="menu-item" @click="contactServiceOnlineFallback">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>在线客服</text>
        <text class="arrow" decode="true">></text>
      </view>
      <!-- #endif -->
      <view class="menu-item" @click="goPage('/common-package/pages/feedback/create')">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>意见反馈</text>
        <text class="arrow" decode="true">></text>
      </view>
    </view>

    <!-- 管理师功能菜单 -->
    <view class="menu-section" v-if="isLoggedIn && currentRole === 'manager'">
      <view class="menu-item" @click="goPage('/manager-package/pages/manager/work-orders')">
        <uni-icons class="menu-icon" type="list" size="20" color="#2d9687"></uni-icons>
        <text>工单管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/manager-package/pages/manager/dispatch-list')">
        <uni-icons class="menu-icon" type="compose" size="20" color="#2d9687"></uni-icons>
        <text>派单管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/manager-package/pages/manager/teachers')">
        <uni-icons class="menu-icon" type="person" size="20" color="#2d9687"></uni-icons>
        <text>陪伴员管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/manager-package/pages/manager/parents')">
        <uni-icons class="menu-icon" type="person" size="20" color="#2d9687"></uni-icons>
        <text>家长管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/manager-package/pages/manager/course-hours')">
        <uni-icons class="menu-icon" type="wallet" size="20" color="#2d9687"></uni-icons>
        <text>课时管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/manager-package/pages/manager/reports')">
        <uni-icons class="menu-icon" type="compose" size="20" color="#2d9687"></uni-icons>
        <text>汇总报告</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/manager-package/pages/manager/reminders')">
        <uni-icons class="menu-icon" type="calendar" size="20" color="#2d9687"></uni-icons>
        <text>提醒管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="contactService">
        <uni-icons class="menu-icon" type="phone" size="20" color="#2d9687"></uni-icons>
        <text>客服电话</text>
        <text class="arrow" decode="true">></text>
      </view>

      <!-- #ifdef MP-WEIXIN -->
      <button class="menu-item" open-type="contact">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>在线客服</text>
        <text class="arrow" decode="true">></text>
      </button>
      <!-- #endif -->

      <!-- #ifndef MP-WEIXIN -->
      <view class="menu-item" @click="contactServiceOnlineFallback">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>在线客服</text>
        <text class="arrow" decode="true">></text>
      </view>
      <!-- #endif -->
      <view class="menu-item" @click="goPage('/common-package/pages/feedback/create')">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>意见反馈</text>
        <text class="arrow" decode="true">></text>
      </view>
    </view>

    <!-- 分销员功能菜单 -->
    <view class="menu-section" v-if="isLoggedIn && currentRole === 'distributor'">
      <view class="menu-item" @click="goPage('/distributor-package/pages/distributor/poster')">
        <uni-icons class="menu-icon" type="gift" size="20" color="#2d9687"></uni-icons>
        <text>推广码管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/distributor-package/pages/distributor/course-list')">
        <uni-icons class="menu-icon" type="list" size="20" color="#2d9687"></uni-icons>
        <text>可分销课程</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/distributor-package/pages/distributor/order-list')">
        <uni-icons class="menu-icon" type="list" size="20" color="#2d9687"></uni-icons>
        <text>成交记录</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/distributor-package/pages/distributor/commission')">
        <uni-icons class="menu-icon" type="wallet" size="20" color="#2d9687"></uni-icons>
        <text>佣金管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/distributor-package/pages/distributor/team')">
        <uni-icons class="menu-icon" type="person" size="20" color="#2d9687"></uni-icons>
        <text>我的团队</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="contactService">
        <uni-icons class="menu-icon" type="phone" size="20" color="#2d9687"></uni-icons>
        <text>客服电话</text>
        <text class="arrow" decode="true">></text>
      </view>

      <!-- #ifdef MP-WEIXIN -->
      <button class="menu-item" open-type="contact">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>在线客服</text>
        <text class="arrow" decode="true">></text>
      </button>
      <!-- #endif -->

      <!-- #ifndef MP-WEIXIN -->
      <view class="menu-item" @click="contactServiceOnlineFallback">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>在线客服</text>
        <text class="arrow" decode="true">></text>
      </view>
      <!-- #endif -->
      <view class="menu-item" @click="goPage('/common-package/pages/feedback/create')">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>意见反馈</text>
        <text class="arrow" decode="true">></text>
      </view>
    </view>

    <!-- 服务商功能菜单 -->
    <view class="menu-section" v-if="isLoggedIn && currentRole === 'provider'">
      <view class="menu-item" @click="goPage('/provider-package/pages/provider/course-manage')">
        <uni-icons class="menu-icon" type="list" size="20" color="#2d9687"></uni-icons>
        <text>课程管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/provider-package/pages/provider/student-manage')">
        <uni-icons class="menu-icon" type="person" size="20" color="#2d9687"></uni-icons>
        <text>学生管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/provider-package/pages/provider/order-list')">
        <uni-icons class="menu-icon" type="list" size="20" color="#2d9687"></uni-icons>
        <text>订单管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/provider-package/pages/provider/schedule')">
        <uni-icons class="menu-icon" type="calendar" size="20" color="#2d9687"></uni-icons>
        <text>课程安排</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="goPage('/provider-package/pages/provider/earnings')">
        <uni-icons class="menu-icon" type="wallet" size="20" color="#2d9687"></uni-icons>
        <text>收益管理</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="contactService">
        <uni-icons class="menu-icon" type="phone" size="20" color="#2d9687"></uni-icons>
        <text>客服电话</text>
        <text class="arrow" decode="true">></text>
      </view>

      <!-- #ifdef MP-WEIXIN -->
      <button class="menu-item" open-type="contact">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>在线客服</text>
        <text class="arrow" decode="true">></text>
      </button>
      <!-- #endif -->

      <!-- #ifndef MP-WEIXIN -->
      <view class="menu-item" @click="contactServiceOnlineFallback">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>在线客服</text>
        <text class="arrow" decode="true">></text>
      </view>
      <!-- #endif -->
      <view class="menu-item" @click="goPage('/common-package/pages/feedback/create')">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>意见反馈</text>
        <text class="arrow" decode="true">></text>
      </view>
    </view>

    <!-- 通用功能菜单（仅家长角色显示） -->
    <view class="menu-section" v-if="!isLoggedIn || currentRole === 'user'">
      <view class="menu-item" @click="goPage('/common-package/pages/notification/list')">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>消息通知</text>
        <text class="badge" v-if="notificationCount">{{ notificationCount }}</text>
        <text class="arrow" decode="true">></text>
      </view>
      <view class="menu-item" @click="contactService">
        <uni-icons class="menu-icon" type="phone" size="20" color="#2d9687"></uni-icons>
        <text>客服电话</text>
        <text class="arrow" decode="true">></text>
      </view>

      <!-- #ifdef MP-WEIXIN -->
      <button class="menu-item" open-type="contact">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>在线客服</text>
        <text class="arrow" decode="true">></text>
      </button>
      <!-- #endif -->

      <!-- #ifndef MP-WEIXIN -->
      <view class="menu-item" @click="contactServiceOnlineFallback">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>在线客服</text>
        <text class="arrow" decode="true">></text>
      </view>
      <!-- #endif -->
      <view class="menu-item" @click="goPage('/common-package/pages/feedback/create')">
        <uni-icons class="menu-icon" type="chat" size="20" color="#2d9687"></uni-icons>
        <text>意见反馈</text>
        <text class="arrow" decode="true">></text>
      </view>
    </view>
    
    <!-- 测试账号快速登录区域 -->
    <view v-if="showTestEntrance" class="test-accounts-section">
      <view class="test-accounts-header">
        <view class="header-left">
          <text class="header-icon">🔑</text>
          <text class="header-title">快速测试登录</text>
        </view>
        <text class="header-tip">点击账号快速登录</text>
      </view>
      <scroll-view class="test-accounts-scroll" scroll-x>
        <view class="test-accounts-list">
          <view 
            class="test-account-card" 
            v-for="(account, index) in testAccounts" 
            :key="index"
            @click="quickLoginWithTestAccount(account)"
          >
            <view class="card-badge">TEST</view>
            <view class="card-icon-wrapper">
              <text class="card-icon">{{ account.icon }}</text>
            </view>
            <view class="card-info">
              <text class="card-role">{{ account.name }}</text>
              <text class="card-phone">{{ account.phone }}</text>
            </view>
            <view class="card-btn">
              <text>立即登录</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 退出登录按钮 -->
    <view v-if="isLoggedIn" class="logout-section">
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </view>
    
    <!-- 角色选择弹窗 -->
    <view v-if="showRoleModal" class="modal-overlay" @click="closeRoleModal">
      <view class="modal-content" @click.stop>
        <view class="modal-title">选择角色</view>
        <view class="role-list">
          <view 
            v-for="role in availableRoles" 
            :key="role.value"
            class="role-option"
            :class="{ active: currentRole === role.value }"
            @click="switchRole(role.value)"
          >
            <text class="role-icon">{{ role.icon }}</text>
            <text class="role-name">{{ role.label }}</text>
            <text v-if="currentRole === role.value" class="check-icon">✓</text>
          </view>
        </view>
        <view class="modal-close" @click="closeRoleModal">取消</view>
      </view>
    </view>
  </view>
</template>

<script>
import { userApi, orderApi, notificationApi, authApi } from '@/api/index.js'
import { useUserStore } from '@/store/user'

export default {
  data() {
    return {
      isLoggedIn: false,
      currentRole: '',
      userInfo: {},
      showTestEntrance: false,
      showRoleList: false, // 角色列表展开状态
      userRoles: [], // 用户的所有角色（从数据库加载）
      orderCount: {
        unpaid: 0,
        pending: 0,
        completed: 0,
        cancelled: 0
      },
      couponCount: 0,
      notificationCount: 0,
      showRoleModal: false,
      currentLevelType: 'bronze', // 当前等级类型
      currentLevelName: '普通陪伴员', // 当前等级名称
      availableRoles: [
        { value: 'user', label: '家长', icon: '👨‍👩‍👧' },
        { value: 'teacher', label: '陪伴员', icon: '👨‍🏫' },
        { value: 'manager', label: '管理师', icon: '👔' },
        { value: 'distributor', label: '分销员', icon: '💼' },
        { value: 'provider', label: '服务商', icon: '🎓' }
      ],
      // 测试账号列表
      testAccounts: [
        { role: 'user', name: '家长', phone: '13800138000', password: '123456', icon: '👨‍👩‍👧' },
        { role: 'teacher', name: '陪伴师', phone: '13800138001', password: '123456', icon: '👨‍🏫' },
        { role: 'manager', name: '管理师', phone: '13800138002', password: '123456', icon: '👔' },
        { role: 'distributor', name: '分销员', phone: '13800138003', password: '123456', icon: '💼' },
        { role: 'provider', name: '服务商', phone: '13800138004', password: '123456', icon: '🎓' }
      ]
    }
  },
  
  computed: {
    roleName() {
      const role = this.availableRoles.find(r => r.value === this.currentRole)
      return role ? role.label : '用户'
    }
  },
  
  onLoad() {
    this.checkLoginStatus()
    this.initTestEntrance()
  },
  
  onShow() {
    this.checkLoginStatus()
    if (this.isLoggedIn) {
      this.loadUserData()
      this.loadUserRoles() // 加载用户的所有角色
    }
  },
  
  methods: {
    initTestEntrance() {
      let show = false
      // #ifdef MP-WEIXIN
      try {
        const info = uni.getAccountInfoSync && uni.getAccountInfoSync()
        const envVersion = info && info.miniProgram && info.miniProgram.envVersion
        show = envVersion === 'develop' || envVersion === 'trial'
      } catch (e) {
        show = false
      }
      // #endif

      // #ifndef MP-WEIXIN
      show = process.env.NODE_ENV !== 'production'
      // #endif

      this.showTestEntrance = show
    },

    checkLoginStatus() {
      const token = uni.getStorageSync('token')
      const userStore = useUserStore()
      this.isLoggedIn = !!token
      this.currentRole = userStore.currentRole || 'user'
    },
    
    async loadUserData() {
      try {
        // 加载用户信息
        const userRes = await userApi.getUserInfo()
        if (userRes && userRes.success) {
          this.userInfo = userRes.data || {}
          console.log('个人中心加载用户信息:', this.userInfo)
          console.log('头像URL:', this.userInfo.avatar)
        }
      } catch (error) {
        console.log('加载用户信息失败:', error)
      }
      
      // 加载等级信息（仅陪伴员）
      if (this.currentRole === 'teacher') {
        this.loadLevelInfo()
      }
      
      try {
        // 加载订单统计
        if (this.currentRole === 'user') {
          const orderRes = await orderApi.getOrderCount()
          if (orderRes && orderRes.success && orderRes.data) {
            this.orderCount = orderRes.data
          }
        }
      } catch (error) {
        console.log('加载订单统计失败:', error)
      }
      
      try {
        // 加载优惠券数量
        const couponRes = await userApi.getCouponCount()
        if (couponRes && (couponRes.success || couponRes.code === 200)) {
          const count = typeof couponRes.data === 'number' ? couponRes.data : (couponRes.data?.total || 0)
          this.couponCount = count
        }
      } catch (error) {
        console.log('加载优惠券数量失败:', error)
      }
      
      try {
        // 加载未读消息数
        const notifRes = await notificationApi.getUnreadCount()
        if (notifRes && (notifRes.success || notifRes.code === 200)) {
          const count = typeof notifRes.data === 'number'
            ? notifRes.data
            : (notifRes.data?.total || 0)
          this.notificationCount = count
        }
      } catch (error) {
        console.log('加载消息数量失败:', error)
      }
    },
    
    // 加载等级信息
    async loadLevelInfo() {
      try {
        const userInfo = uni.getStorageSync('userInfo')
        const teacherId = userInfo?.id || userInfo?.userId
        
        if (!teacherId) {
          return
        }
        
        // 使用完整的 API 地址
        const baseUrl = getApp().globalData.baseUrl || 'http://localhost:8089'
        
        uni.request({
          url: `${baseUrl}/api/teacher/level/current`,
          method: 'GET',
          data: { teacherId },
          header: {
            'Authorization': uni.getStorageSync('token') || ''
          },
          success: (res) => {
            if (res.statusCode === 200 && res.data && res.data.code === 200) {
              this.currentLevelType = res.data.data.currentLevel || 'bronze'
              this.currentLevelName = res.data.data.levelName || '普通陪伴员'
            }
          },
          fail: (error) => {
            console.error('加载等级信息失败:', error)
          }
        })
      } catch (error) {
        console.error('加载等级信息失败:', error)
      }
    },
    
    getRoleGreeting() {
      const greetings = {
        user: '家长',
        teacher: '陪伴员',
        manager: '管理师',
        distributor: '分销员',
        provider: '服务商'
      }
      return greetings[this.currentRole] || '用户'
    },
    
    // 加载用户的所有角色（从数据库）
    async loadUserRoles() {
      try {
        const userStore = useUserStore()
        await userStore.loadAllRoles()
        
        // 从 store 获取角色数据
        this.userRoles = userStore.allRoles.map(roleType => ({
          roleType: roleType,
          isPrimary: roleType === userStore.primaryRole
        }))
        
        console.log('加载用户角色:', this.userRoles)
      } catch (error) {
        console.error('加载用户角色失败:', error)
      }
    },
    
    // 切换角色列表展开/收起
    toggleRoleList() {
      this.showRoleList = !this.showRoleList
    },
    
    // 切换到指定角色
    async switchToRole(roleType) {
      const roleValue = this.getRoleValue(roleType)
      
      if (roleValue === this.currentRole) {
        this.showRoleList = false
        return
      }
      
      try {
        uni.showLoading({ title: '切换中...' })
        
        const userStore = useUserStore()
        const success = await userStore.switchRole(roleType)
        
        if (success) {
          this.currentRole = roleValue
          this.showRoleList = false
          
          uni.hideLoading()
          uni.showToast({
            title: '切换成功',
            icon: 'success'
          })
          
          // 刷新页面
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/index/index'
            })
          }, 500)
        } else {
          uni.hideLoading()
          uni.showToast({
            title: '切换失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: error.message || '切换失败',
          icon: 'none'
        })
      }
    },
    
    // 跳转到申请身份页面
    goToApplyRole() {
      uni.navigateTo({
        url: '/src/pages/user/apply-role'
      })
    },
    
    // 角色类型转换（数据库字段 -> 前端值）
    getRoleValue(roleType) {
      // parent -> user, 其他保持不变
      return roleType === 'parent' ? 'user' : roleType
    },
    
    // 获取角色图标
    getRoleIcon(roleType) {
      const icons = {
        parent: '👨‍👩‍👧',
        user: '👨‍👩‍👧',
        teacher: '👨‍🏫',
        manager: '👔',
        distributor: '💼',
        provider: '🎓'
      }
      return icons[roleType] || '👤'
    },
    
    // 获取角色名称
    getRoleLabel(roleType) {
      const labels = {
        parent: '家长',
        user: '家长',
        teacher: '陪伴员',
        manager: '管理师',
        distributor: '分销员',
        provider: '服务商'
      }
      return labels[roleType] || '用户'
    },
    
    goToRoleSelect() {
      uni.navigateTo({
        url: '/pages/auth/role-select'
      })
    },
    
    // 职业注册相关方法
    goToTeacherRegister() {
      uni.showModal({
        title: '成为陪伴员',
        content: '陪伴员为用户提供专业的陪伴和辅导服务，获得丰厚收益。我们为您提供完善的培训体系和成长路径，是否立即申请？',
        confirmText: '立即申请',
        cancelText: '再想想',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/teacher-package/pages/auth/teacher-quick-register'
            })
          }
        }
      })
    },
    
    goToDistributorRegister() {
      uni.showModal({
        title: '成为分销员',
        content: '分销员推广优质课程获得可观佣金收益，发展自己的教育事业。平台提供专业的营销工具和支持，是否立即申请？',
        confirmText: '立即申请',
        cancelText: '再想想',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/distributor-package/pages/distributor/apply'
            })
          }
        }
      })
    },
    
    goToProviderRegister() {
      uni.showModal({
        title: '成为服务商',
        content: '服务商为平台提供专业的教育培训服务，扩大业务范围和影响力。我们为您提供稳定的生源和完善的管理系统，是否立即申请？',
        confirmText: '立即申请',
        cancelText: '再想想',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/provider-package/pages/service-provider/apply'
            })
          }
        }
      })
    },
    
    goSetting() {
      uni.navigateTo({
        url: '/user-package/pages/user/profile'
      })
    },
    
    goOrderList(status) {
      let url = '/order-package/pages/order/my-orders'
      if (status !== undefined) {
        url += `?status=${status}`
      }
      uni.navigateTo({ url })
    },
    
    goPage(url) {
      uni.navigateTo({ url })
    },
    
    contactService() {
      uni.makePhoneCall({
        phoneNumber: '400-000-0000',
        fail: () => {
          uni.showToast({ title: '请拨打客服电话', icon: 'none' })
        }
      })
    },

    contactServiceOnlineFallback() {
      uni.showToast({
        title: '在线客服仅在微信小程序内可用',
        icon: 'none'
      })
    },
    
    showRoleSelector() {
      this.showRoleModal = true
    },
    
    closeRoleModal() {
      this.showRoleModal = false
    },
    
    switchRole(role) {
      if (role === this.currentRole) {
        this.closeRoleModal()
        return
      }
      
      // 更新 Pinia store（这会同时更新 localStorage）
      const userStore = useUserStore()
      userStore.setRole(role)
      
      this.currentRole = role
      this.closeRoleModal()
      
      // 切换到对应的首页
      uni.reLaunch({
        url: '/pages/index/index'
      })
    },
    
    // 使用测试账号快速登录
    async quickLoginWithTestAccount(account) {
      try {
        uni.showLoading({ title: '登录中...' })

        const res = await authApi.phoneLogin({
          phone: account.phone,
          password: account.password || '123456'
        })

        if (res?.code !== 200) {
          throw new Error(res?.message || '登录失败')
        }
        
        // 保存token和用户信息
        const token = res?.data?.token || res?.token
        const userInfo = res?.data?.userInfo || res?.userInfo || res?.data
        
        console.log('========== 测试账号登录调试 ==========')
        console.log('完整响应:', res)
        console.log('token:', token)
        console.log('userInfo:', userInfo)
        console.log('userInfo.role:', userInfo?.role)
        console.log('userInfo.userType:', userInfo?.userType)
        console.log('account.role:', account.role)
        console.log('=====================================')
        
        if (!token) {
          throw new Error(res?.message || '登录失败')
        }

        const userStore = useUserStore()
        userStore.setToken(token)
        if (userInfo) {
          userStore.setUserInfo(userInfo)
        }
        // ✅ 修复：使用后端返回的角色，而不是前端定义的角色
        // 后端返回的 userInfo.role 或 userInfo.userType 才是数据库中的真实角色
        const backendRole = userInfo?.role || userInfo?.userType || account.role
        const finalRole = backendRole === 'parent' ? 'user' : backendRole
        console.log('🔥 最终设置的角色:', finalRole)
        userStore.setRole(finalRole)
        
        uni.hideLoading()
        uni.showToast({
          title: '登录成功',
          icon: 'success',
          success: () => {
            setTimeout(() => {
              // 🔥 强制设置角色并跳转
              const userStore = useUserStore()
              if (account.role === 'user') {
                userStore.setRole('user')
              }
              uni.reLaunch({
                url: '/pages/index/index'
              })
            }, 500)
          }
        })
        
      } catch (e) {
        uni.hideLoading()
        uni.showToast({
          title: e?.message || e?.errMsg || '登录失败',
          icon: 'none'
        })
      }
    },
    
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗?',
        success: (res) => {
          if (res.confirm) {
            // 使用 store 的 logout 方法
            const userStore = useUserStore()
            userStore.logout()
            
            this.isLoggedIn = false
            this.userInfo = {}
            this.currentRole = 'user'
            
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            })
            
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/index/index'
              })
            }, 1500)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';

.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 100rpx;
}

.user-header {
  background: linear-gradient(135deg, #2d9687 0%, #25806f 100%);
  padding: 60rpx 30rpx 40rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  
  .user-avatar {
    width: 120rpx;
    height: 120rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    
    .avatar-image {
      width: 100%;
      height: 100%;
      border-radius: 60rpx;
    }
    
    .avatar-emoji {
      font-size: 60rpx;
    }
  }
  
  .user-info {
    flex: 1;
    
    .user-name {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #fff;
      margin-bottom: 8rpx;
    }
    
    .user-phone,
    .login-tip {
      display: block;
      font-size: 26rpx;
      color: rgba(255, 255, 255, 0.8);
    }
    
    .role-tag {
      display: inline-block;
      background: rgba(255, 255, 255, 0.2);
      color: #fff;
      font-size: 22rpx;
      padding: 4rpx 12rpx;
      border-radius: 8rpx;
      margin-top: 8rpx;
    }
  }
  
  .login-btn,
  .setting-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 28rpx;
    padding: 12rpx 24rpx;
    border-radius: 20rpx;
  }
}

.role-switch-section,
.order-section,
.menu-section {
  background: white;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  
  .section-header {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background: #f8f9fa;
    border-bottom: 1rpx solid #f0f0f0;
    
    .section-left {
      display: flex;
      align-items: center;
      flex: 1;
    }
    
    .section-right {
      display: flex;
      align-items: center;
    }
    
    .section-icon {
      margin-right: 16rpx;
    }
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .section-desc {
      font-size: 24rpx;
      color: #999;
      margin-left: 16rpx;
    }
    
    .current-role {
      font-size: 28rpx;
      color: #2d9687;
      margin-right: 16rpx;
    }
    
    .arrow {
      font-size: 20rpx;
      color: #999;
      transition: transform 0.3s;
      
      &.expanded {
        transform: rotate(180deg);
      }
    }
  }
  
  // 角色列表容器
  .role-list-container {
    padding: 20rpx 30rpx 30rpx;
    animation: slideDown 0.3s ease-out;
    
    .role-item {
      display: flex;
      align-items: center;
      padding: 24rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      margin-bottom: 16rpx;
      transition: all 0.3s;
      
      &.active {
        background: #e8f5f3;
        border: 2rpx solid #2d9687;
      }
      
      &.primary {
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 6rpx;
          background: #2d9687;
          border-radius: 12rpx 0 0 12rpx;
        }
      }
      
      .role-icon {
        font-size: 40rpx;
        margin-right: 16rpx;
      }
      
      .role-info {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 12rpx;
        
        .role-name {
          font-size: 30rpx;
          color: #333;
          font-weight: 500;
        }
        
        .primary-badge {
          font-size: 20rpx;
          padding: 4rpx 10rpx;
          background: linear-gradient(135deg, #2d9687 0%, #25806f 100%);
          color: #fff;
          border-radius: 8rpx;
        }
      }
      
      .check-icon {
        font-size: 32rpx;
        color: #2d9687;
        font-weight: bold;
      }
    }
    
    .apply-role-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12rpx;
      padding: 24rpx;
      background: linear-gradient(135deg, #f0f9f7 0%, #e6f7f3 100%);
      border: 2rpx dashed #2d9687;
      border-radius: 12rpx;
      margin-top: 8rpx;
      
      .plus-icon {
        font-size: 32rpx;
        color: #2d9687;
        font-weight: bold;
      }
      
      text {
        font-size: 28rpx;
        color: #2d9687;
        font-weight: 500;
      }
    }
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-20rpx);
  }
  to {
    opacity: 1;
    max-height: 1000rpx;
    transform: translateY(0);
  }
}

.section-header {
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  .section-left {
    display: flex;
    align-items: center;
    gap: 12rpx;
    
    .section-icon {
      font-size: 32rpx;
    }
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .section-right {
    display: flex;
    align-items: center;
    gap: 8rpx;
    
    .current-role {
      font-size: 28rpx;
      color: #666;
    }
    
    .arrow {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .section-more {
    font-size: 26rpx;
    color: #999;
    margin-right: 8rpx;
  }
}

.order-tabs {
  display: flex;
  padding: 0 30rpx 30rpx;
  
  .order-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rpx;
    position: relative;
    
    .tab-icon {
      font-size: 40rpx;
    }
    
    text {
      font-size: 26rpx;
      color: #666;
    }
    
    .badge {
      position: absolute;
      top: -8rpx;
      right: 20rpx;
      background: #ff6b6b;
      color: #fff;
      font-size: 20rpx;
      padding: 2rpx 8rpx;
      border-radius: 10rpx;
      min-width: 32rpx;
      text-align: center;
    }
  }
}

.menu-item {
  padding: 30rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background: transparent;
  text-align: left;
  
  &:last-child {
    border-bottom: none;
  }
  
  .menu-icon {
    font-size: 36rpx;
  }
  
  text {
    font-size: 30rpx;
    color: #333;
  }
  
  .hot-badge {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
    color: #fff;
    font-size: 20rpx;
    padding: 2rpx 8rpx;
    border-radius: 8rpx;
    margin-left: auto;
  }
  
  .new-badge {
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
    color: #fff;
    font-size: 20rpx;
    padding: 2rpx 8rpx;
    border-radius: 8rpx;
    margin-left: auto;
  }
  
  .badge {
    background: #ff6b6b;
    color: #fff;
    font-size: 20rpx;
    padding: 2rpx 8rpx;
    border-radius: 10rpx;
    min-width: 32rpx;
    text-align: center;
    margin-left: auto;
  }
  
  .level-badge {
    font-size: 24rpx;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    font-weight: bold;
    margin-left: auto;
    
    &.level-bronze {
      background: #f5e6d3;
      color: #cd7f32;
    }
    
    &.level-king {
      background: #e8e8e8;
      color: #666;
    }
    
    &.level-gold {
      background: #fff7e6;
      color: #ffa940;
    }
  }
  
  // 职业注册徽章样式
  .badge {
    font-size: 20rpx;
    padding: 4rpx 10rpx;
    border-radius: 12rpx;
    margin-right: 16rpx;
    font-weight: bold;
    
    &.recommend {
      background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
      color: #1890ff;
      border: 1rpx solid #91d5ff;
    }
    
    &.commission {
      background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
      color: #52c41a;
      border: 1rpx solid #b7eb8f;
    }
    
    &.professional {
      background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
      color: #fa8c16;
      border: 1rpx solid #ffd591;
    }
  }
  
  .arrow {
    font-size: 24rpx;
    color: #999;
  }
}

// 职业注册特殊样式
.career-section {
  background: linear-gradient(135deg, #f0f9f7 0%, #f8fffe 100%);
  border: 2rpx solid #e6f7ff;
  box-shadow: 0 4rpx 16rpx rgba(45, 150, 135, 0.08);
  border-radius: 16rpx;
  overflow: hidden;
  
  .career-item {
    padding: 32rpx 30rpx;
    border-bottom: 1rpx solid rgba(45, 150, 135, 0.08);
    background: white;
    transition: all 0.3s ease;
    
    &:first-child {
      border-top-left-radius: 14rpx;
      border-top-right-radius: 14rpx;
    }
    
    &:last-child {
      border-bottom: none;
      border-bottom-left-radius: 14rpx;
      border-bottom-right-radius: 14rpx;
    }
    
    &:hover {
      background: #f8fffe;
    }
    
    .career-left {
      display: flex;
      align-items: center;
      flex: 1;
      gap: 20rpx;
      
      .career-icon {
        width: 48rpx;
        height: 48rpx;
        background: rgba(45, 150, 135, 0.08);
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .career-info {
        flex: 1;
        
        .career-name {
          display: block;
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 6rpx;
        }
        
        .career-desc {
          display: block;
          font-size: 24rpx;
          color: #666;
          line-height: 1.4;
        }
      }
    }
    
    .career-right {
      display: flex;
      align-items: center;
      gap: 12rpx;
    }
  }
}

// 确保button元素的menu-item样式与view元素一致
button.menu-item {
  width: 100%;
  border: none;
  outline: none;
  padding: 30rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background: transparent;
  text-align: left;
  font-size: 30rpx;
  color: #333;
  min-height: auto;
  height: auto;
  line-height: normal;
  box-sizing: border-box;
  
  &:last-child {
    border-bottom: none;
  }
  
  &::after {
    border: none;
  }
  
  .menu-icon {
    font-size: 36rpx;
  }
  
  text {
    font-size: 30rpx;
    color: #333;
  }
  
  .arrow {
    font-size: 24rpx;
    color: #999;
    margin-left: auto;
  }
}

// 测试账号区域样式
.test-accounts-section {
  margin: 20rpx 0 40rpx;
  
  .test-accounts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx 20rpx;
    
    .header-left {
      display: flex;
      align-items: center;
      gap: 12rpx;
      
      .header-icon {
        font-size: 36rpx;
      }
      
      .header-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
      }
    }
    
    .header-tip {
      font-size: 24rpx;
      color: #999999;
    }
  }
  
  .test-accounts-scroll {
    white-space: nowrap;
    
    .test-accounts-list {
      display: inline-flex;
      gap: 20rpx;
      padding: 0 30rpx;
      
      .test-account-card {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        width: 210rpx;
        padding: 30rpx 10rpx 25rpx;
        background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
        border-radius: 24rpx;
        box-shadow: 0 8rpx 24rpx rgba(45, 150, 135, 0.12);
        border: 2rpx solid rgba(45, 150, 135, 0.1);
        position: relative;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 8rpx;
          background: linear-gradient(90deg, #2d9687 0%, #52c41a 100%);
          border-radius: 24rpx 24rpx 0 0;
        }
        
        &:active {
          transform: translateY(-4rpx) scale(0.98);
          box-shadow: 0 12rpx 32rpx rgba(45, 150, 135, 0.2);
        }
        
        .card-badge {
          position: absolute;
          top: 15rpx;
          right: 15rpx;
          background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
          color: #ffffff;
          font-size: 20rpx;
          font-weight: bold;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          box-shadow: 0 2rpx 8rpx rgba(250, 173, 20, 0.3);
        }
        
        .card-icon-wrapper {
          width: 100rpx;
          height: 100rpx;
          background: linear-gradient(135deg, #f0f9f7 0%, #e6f7f3 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20rpx;
          box-shadow: 0 4rpx 12rpx rgba(45, 150, 135, 0.1);
          
          .card-icon {
            font-size: 56rpx;
          }
        }
        
        .card-info {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8rpx;
          margin-bottom: 20rpx;
          width: 100%;
          
          .card-role {
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;
          }
          
          .card-phone {
            font-size: 22rpx;
            color: #999999;
            font-family: 'Courier New', monospace;
            background: #f5f5f5;
            padding: 4rpx 12rpx;
            border-radius: 12rpx;
          }
        }
        
        .card-btn {
          width: 100%;
          padding: 16rpx 0;
          background: linear-gradient(135deg, #2d9687 0%, #25806f 100%);
          border-radius: 30rpx;
          text-align: center;
          box-shadow: 0 4rpx 12rpx rgba(45, 150, 135, 0.3);
          
          text {
            font-size: 26rpx;
            color: #ffffff;
            font-weight: bold;
          }
        }
      }
    }
  }
}

.logout-section {
  padding: 30rpx;
  
  .logout-btn {
    width: 100%;
    height: 88rpx;
    background: #fff;
    color: #ff6b6b;
    font-size: 32rpx;
    border-radius: 16rpx;
    border: 2rpx solid #ff6b6b;
    
    &::after {
      border: none;
    }
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 9999;
  
  .modal-content {
    width: 100%;
    background: #fff;
    border-radius: 32rpx 32rpx 0 0;
    padding: 40rpx 30rpx;
    
    .modal-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      text-align: center;
      margin-bottom: 30rpx;
    }
    
    .role-list {
      .role-option {
        padding: 30rpx;
        display: flex;
        align-items: center;
        gap: 20rpx;
        border-radius: 16rpx;
        margin-bottom: 16rpx;
        background: #f5f7fa;
        
        &.active {
          background: #e8f5f3;
          border: 2rpx solid #2d9687;
        }
        
        .role-icon {
          font-size: 40rpx;
        }
        
        .role-name {
          flex: 1;
          font-size: 32rpx;
          color: #333;
        }
        
        .check-icon {
          font-size: 32rpx;
          color: #2d9687;
        }
      }
    }
    
    .modal-close {
      margin-top: 20rpx;
      padding: 24rpx;
      text-align: center;
      font-size: 32rpx;
      color: #666;
      background: #f5f7fa;
      border-radius: 16rpx;
    }
  }
}
</style>
