<template>
    <div >
        <div class="headers">
            <div class="headers-left">
              <div class="imgs">
                <img v-if="enterpriseLogo" :src="enterpriseLogo" alt="企业LOGO" class="enterprise-logo-img" />
              </div>
              <div class="img-right">
                <div class="name-title">微育科技</div>
                <div class="right-name">数智科创 · 通达未来 </div>
              </div>
            </div>
            <div class="headers-right">
                <div class="rights">
                    <div class="rights-names" 
                    v-for="(item,index) in rightDate" 
                    :key="index"
                    :class="{'active':active == index}"
                    @click="btnName(item,index)"
                    >
                    {{ item.name }}
                    <div  :class="{'shu':shu == index}"></div>
                    </div>
                    
                </div>
                <div class="header-user-section">
                  
                    <!-- 通知铃铛图标 -->
                    <div class="icon-btn bell-icon" style="position: relative;">
                        <!-- <i class="el-icon-bell"></i>-->
                        <img src="@/assets/icon/yuan.png" alt="" style="width: 99%;margin-right: 15px; cursor: pointer;" @click="showProgressDialog">
                         <img src="@/assets/icon/xiaoxi.png" alt="" style="width: 99%;margin-right: 35px; cursor: pointer;" @click="goToMessageCenter">
                        <span class="notification-badge" v-if="msgCount > 0">{{ msgCount }}</span>
                        <!-- 进度弹框 -->
                        <div class="progress-popup" v-if="progressDialogVisible">
                            <div class="progress-popup-content">
                                <div class="progress-title">
                                    <span class="title-line"></span>
                                    <span class="title-text">正在获取</span>
                                    <span class="title-line"></span>
                                </div>
                                <div class="progress-message">预计3分钟完成</div>
                                <div class="progress-footer">
                                    <el-button 
                                        class="know-button" 
                                        @click="progressDialogVisible = false"
                                    >
                                        知道了
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 用户信息 -->
                    <el-dropdown ref="userDropdown" trigger="click" @command="handleCommand">
                        <div class="user-info">
                            <div class="user-avatar">{{ userAvatarChar }}</div>
                            <div class="user-details">
                                <div class="user-name">
                                    {{ userNickname || '言雨天' }}
                                    <i class="el-icon-arrow-down"></i>
                                </div>
                                <div class="user-phone">{{ userPhone || '13424098909' }}</div>
                            </div>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="changePassword">
                                <i class="el-icon-lock"></i>
                                修改密码
                            </el-dropdown-item>
                            <el-dropdown-item command="changePhone">
                                <i class="el-icon-mobile-phone"></i>
                                更换手机账号
                            </el-dropdown-item>
                            <el-dropdown-item command="logout">
                                <i class="el-icon-switch-button"></i>
                                退出
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
        
        <!-- 修改密码对话框 -->
        <el-dialog
            title="修改密码"
            :visible.sync="passwordDialogVisible"
            width="60%"
            :close-on-click-modal="false"
            class="change-password-dialog">
            <div class="contents">
                <div class="container">
            

                    <table class="department-table">
                      
                        <tr>
                            <td class="th1">原始密码 </td>
                            <el-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入内容" show-password></el-input>
                        </tr>
                        <tr>
                            <td class="th1">新的密码 </td>
                            <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入内容" show-password></el-input>
                        </tr>
                    
                    </table>
                    <div style="margin-top: 18px;">
                        密码要求：
                    </div>
                   <div style="margin-top:6px">
                      密码要求至少包含字母，符号或数字中的两项且长度超过8位，建议您经常修改密码，以保证账号更加安全。
                   </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" style="background-color: #5165f7;" @click="confirmChangePassword" >确定</el-button>
                <el-button @click="cancelChangePassword" >取消</el-button>
            </div>
        </el-dialog>
        
        <!-- 更换手机账号对话框 -->
        <el-dialog
            title="更换手机账号"
            :visible.sync="phoneDialogVisible"
            width="60%"
            :close-on-click-modal="false"
            class="change-phone-dialog">
            <div class="contents">
                <div class="container">
            
                    <table class="department-table">
                      
                        <tr>
                            <td class="th1">原手机号 </td>
                            <el-input v-model="phoneForm.oldPhone" placeholder="请输入原手机号"></el-input>
                        </tr>
                        <tr>
                            <td class="th1">新手机号 </td>
                            <el-input v-model="phoneForm.newPhone" placeholder="请输入新手机号"></el-input>
                        </tr>
                    
                    </table>
                    
                    <!-- 滑动验证 -->
                    <div class="verification-section" style="margin-top: 20px;">
                        <div 
                            class="slider-verification" 
                            @mousedown="startPhoneDrag"
                            @mousemove="onPhoneDrag"
                            @mouseup="endPhoneDrag"
                            @mouseleave="endPhoneDrag"
                        >
                            <div class="slider-track">
                                <div 
                                    class="slider-handle" 
                                    :class="{ 'verified': isPhoneVerified }" 
                                    :style="{ left: isPhoneVerified ? 'calc(100% - 50px)' : phoneSliderPosition + 'px' }"
                                >
                                    <i class="el-icon-right" v-if="!isPhoneVerified"></i>
                                    <i class="el-icon-check" v-if="isPhoneVerified"></i>
                                </div>
                                <span class="slider-text" :class="{ 'hidden': isPhoneVerified || phoneSliderPosition > 0 }">请拖动滑动验证</span>
                                <span class="slider-success" v-if="isPhoneVerified">验证通过</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 验证码输入 -->
                    <div style="margin-top: 16px;">
                        <el-input
                           
                            v-model="phoneForm.verifyCode"
                            placeholder="请输入验证码"
                            style="width: 100%;border: 1px solid #dcdcdc"
                        >
                            <template slot="append">
                                <el-button @click="sendPhoneCode" :disabled="phoneCodeCountdown > 0">
                                    {{ phoneCodeCountdown > 0 ? `${phoneCodeCountdown}秒` : '获取验证码' }}
                                </el-button>
                            </template>
                        </el-input>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" style="background-color: #5165f7;" @click="confirmChangePhone" >确定</el-button>
                <el-button @click="cancelChangePhone" >取消</el-button>
            </div>
        </el-dialog>
        
    </div>
</template>
<script>
import { removeToken, getEnterpriseLogo, removeEnterpriseLogo } from '@/utils/auth'
import { logout, updatePwd, changePhone, sendSmsCode,adminsendSmsCode,details } from '@/api/login/login'
import { show } from '@/api/homepage/corporateInformation'

export default{
    data(){
        return{
            shu: localStorage.getItem('headerActiveShu') || 0,  // 读取存储值
             active: localStorage.getItem('headerActiveIndex') || 0, 

            lastActiveKey: 'headerActiveIndex',
            // rightDate: []
            passwordDialogVisible: false, // 修改密码对话框显示状态
            passwordForm: {
                oldPassword: '',
                newPassword: ''
            },
            phoneDialogVisible: false, // 更换手机账号对话框显示状态
            phoneForm: {
                oldPhone: '',
                newPhone: '',
                verifyCode: ''
            },
            phoneSliderPosition: 0, // 滑动验证位置
            isPhoneDragging: false, // 是否正在拖动
            isPhoneVerified: false, // 是否验证通过
            phoneCodeCountdown: 0, // 验证码倒计时
            progressDialogVisible: false, // 进度对话框显示状态
            enterpriseLogo: '', // 企业LOGO图片URL
            storageInterval: null // localStorage监听定时器
        }
    },
    props:{
          rightDate:[]
    },
    computed: {
        userNickname() {
            return localStorage.getItem('userNickname') || ''
        },
        userAvatarChar() {
            const nickname = this.userNickname
            if (nickname && nickname.length > 0) {
                return nickname.charAt(0).toUpperCase()
            }
            return 'Y'
        },
        userPhone() {
            return localStorage.getItem('userPhone') || ''
        },
        msgCount() {
            const count = localStorage.getItem('msgCount')
            return count !== null && count !== '' ? parseInt(count) : 0
        }
    },
    created() {
        // 从localStorage获取企业LOGO
        this.loadEnterpriseLogo()
    },
    mounted() {
        // 组件挂载后再次加载logo，确保登录后能显示
        this.loadEnterpriseLogo()
        
        // 监听localStorage变化，当logo被保存时立即更新
        window.addEventListener('storage', this.handleStorageChange)
        // 也监听当前窗口的localStorage变化（同源页面）
        this.storageInterval = setInterval(() => {
            const currentLogo = getEnterpriseLogo()
            if (currentLogo && currentLogo !== this.enterpriseLogo) {
                this.enterpriseLogo = currentLogo
            }
        }, 500) // 每500ms检查一次
    },
    beforeDestroy() {
        // 移除事件监听
        window.removeEventListener('storage', this.handleStorageChange)
        if (this.storageInterval) {
            clearInterval(this.storageInterval)
        }
        
        // 在组件销毁前，确保关闭所有下拉菜单，避免 clickoutside 错误
        try {
            if (this.$refs.userDropdown) {
                this.$refs.userDropdown.hide()
            }
        } catch (e) {
            // 忽略错误，组件可能已经销毁
        }
    },
    beforeDestroy() {
        // 在组件销毁前，确保关闭所有下拉菜单，避免 clickoutside 错误
        try {
            if (this.$refs.userDropdown) {
                this.$refs.userDropdown.hide()
            }
        } catch (e) {
            // 忽略错误，组件可能已经销毁
        }
    },
  watch: {
  $route(to, from) {
    // 路由变化时重新加载logo，确保登录后能显示
    this.loadEnterpriseLogo()
    
    // 路由变化时关闭下拉菜单，避免 clickoutside 错误
    this.$nextTick(() => {
      try {
        if (this.$refs.userDropdown && this.$refs.userDropdown.visible) {
          this.$refs.userDropdown.hide()
        }
      } catch (e) {
        // 忽略错误
      }
    })
    
    // 判断是否是详情页返回
    if (from.path.includes('/detail')) {
      this.$nextTick(() => {
        // 延迟执行确保DOM更新
        // 支持匹配 /home/xxx 和 /xxx 两种格式
        const matchedIndex = this.rightDate.findIndex(item => {
          const itemRoute = item.route
          const homeRoute = itemRoute.startsWith('/home') ? itemRoute : '/home' + (itemRoute.startsWith('/') ? itemRoute : '/' + itemRoute)
          return itemRoute === to.path || 
                 homeRoute === to.path ||
                 to.path === '/home' + itemRoute ||
                 (item.children && item.children.some(child => {
                     const childRoute = child.route
                     const childHomeRoute = childRoute.startsWith('/home') ? childRoute : '/home' + (childRoute.startsWith('/') ? childRoute : '/' + childRoute)
                     return childRoute === to.path || childHomeRoute === to.path || to.path === '/home' + childRoute
                 }))
        })
        if (matchedIndex !== -1) {
          this.active = matchedIndex
          this.shu = matchedIndex
        }
      })
    } else {
      // 常规路由处理
      this.updateActiveFromRoute()
    }
  }
},
watch: {
  $route(to, from) {
    // 如果是从详情页返回，优先从 localStorage 恢复
    if (from?.path.includes('/detail')) {
      const savedIndex = localStorage.getItem(this.lastActiveKey);
      if (savedIndex !== null) {
        this.active = parseInt(savedIndex);
        this.shu = parseInt(savedIndex);
        return;
      }
    }
    
    // 否则正常匹配路由
    // 支持匹配 /home/xxx 和 /xxx 两种格式
    const matchedIndex = this.rightDate.findIndex(item => {
      const itemRoute = item.route
      const homeRoute = itemRoute.startsWith('/home') ? itemRoute : '/home' + (itemRoute.startsWith('/') ? itemRoute : '/' + itemRoute)
      return itemRoute === to.path || 
             homeRoute === to.path ||
             to.path === '/home' + itemRoute ||
             (item.children && item.children.some(child => {
                 const childRoute = child.route
                 const childHomeRoute = childRoute.startsWith('/home') ? childRoute : '/home' + (childRoute.startsWith('/') ? childRoute : '/' + childRoute)
                 return childRoute === to.path || childHomeRoute === to.path || to.path === '/home' + childRoute
             }))
    });
    if (matchedIndex !== -1) {
      this.active = matchedIndex;
      this.shu = matchedIndex;
    }
  }
},
    watch: {
      
        // 监听路由变化（如果有路由关联）
        $route(to) {
            this.updateActiveFromRoute()
            // 路由变化时重新加载logo，确保登录后能显示
            this.loadEnterpriseLogo()
        },

        $route(to) {
    // ✅ 当前路由匹配到的选项卡索引
    // 支持匹配 /home/xxx 和 /xxx 两种格式
    const matchedIndex = this.rightDate.findIndex(item => {
      const itemRoute = item.route
      const homeRoute = itemRoute.startsWith('/home') ? itemRoute : '/home' + (itemRoute.startsWith('/') ? itemRoute : '/' + itemRoute)
      return itemRoute === to.path || 
             homeRoute === to.path ||
             to.path === '/home' + itemRoute ||
             (item.children && item.children.some(child => {
                 const childRoute = child.route
                 const childHomeRoute = childRoute.startsWith('/home') ? childRoute : '/home' + (childRoute.startsWith('/') ? childRoute : '/' + childRoute)
                 return childRoute === to.path || childHomeRoute === to.path || to.path === '/home' + childRoute
             }))
    });
       // 如果匹配成功，就更新 `active`
       if (matchedIndex !== -1) {
        console.log('这个状态是多少', this.active)
      this.active = matchedIndex;
      this.shu = matchedIndex;
      localStorage.setItem(this.lastActiveKey, matchedIndex.toString());
    }
  },
    },

    methods:{
        btnName(item, index) {
    this.active = index;
    this.shu = index;
    localStorage.setItem('headerActiveIndex', index.toString()); // 存储index
    localStorage.setItem('headerActiveShu', index.toString());   // 存储shu
    this.$emit('menu-click', item);
  },
        handleMenuClick(item, index) {
            this.activeIndex = index
            localStorage.setItem(this.lastActiveKey, index)
            this.$emit('menu-click', item)
            
            // 如果菜单项有路由，则跳转
            if (item.route) {
                this.$router.push(item.route)
            }
        },
        
        restoreActiveState() {
            const savedIndex = localStorage.getItem(this.lastActiveKey)
            if (savedIndex !== null) {
                this.activeIndex = parseInt(savedIndex)
            }
            
            // 如果有路由关联，检查当前路由
            this.updateActiveFromRoute()
        },
        
        updateActiveFromRoute() {
            const currentPath = this.$route.path
            // 查找当前路由对应的菜单项
            // 支持匹配 /home/xxx 和 /xxx 两种格式
            const matchedIndex = this.rightDate.findIndex(item => {
                const itemRoute = item.route
                const homeRoute = itemRoute.startsWith('/home') ? itemRoute : '/home' + (itemRoute.startsWith('/') ? itemRoute : '/' + itemRoute)
                return itemRoute === currentPath || 
                       homeRoute === currentPath ||
                       currentPath === '/home' + itemRoute ||
                       (item.children && item.children.some(child => {
                           const childRoute = child.route
                           const childHomeRoute = childRoute.startsWith('/home') ? childRoute : '/home' + (childRoute.startsWith('/') ? childRoute : '/' + childRoute)
                           return childRoute === currentPath || childHomeRoute === currentPath || currentPath === '/home' + childRoute
                       }))
            })
            
            if (matchedIndex !== -1) {
                this.active = matchedIndex
                this.shu = matchedIndex
                localStorage.setItem('headerActiveIndex', matchedIndex.toString())
                localStorage.setItem('headerActiveShu', matchedIndex.toString())
            }
        },
        
        handleCommand(command) {
            if (command === 'changePassword') {
                this.handleChangePassword()
            } else if (command === 'changePhone') {
                this.handleChangePhone()
            } else if (command === 'logout') {
                this.handleLogout()
            }
        },
        
        goToMessageCenter() {
            // 跳转到消息中心页面
            this.$router.push('/home/message')
        },
        
        showProgressDialog() {
            // 显示进度对话框
            this.progressDialogVisible = true
        },
        
        handleChangePassword() {
            // 重置表单
            this.passwordForm = {
                oldPassword: '',
                newPassword: ''
            }
            // 显示对话框
            this.passwordDialogVisible = true
        },
        
        async confirmChangePassword() {
            // 表单验证
            if (!this.passwordForm.oldPassword) {
                this.$message.warning('请输入原始密码')
                return
            }
            if (!this.passwordForm.newPassword) {
                this.$message.warning('请输入新密码')
                return
            }
            // 验证密码长度
            if (this.passwordForm.newPassword.length <= 8) {
                this.$message.warning('新密码长度必须超过8位')
                return
            }
            // 验证密码复杂度：至少包含字母、符号或数字中的两项
            const hasLetter = /[a-zA-Z]/.test(this.passwordForm.newPassword)
            const hasNumber = /[0-9]/.test(this.passwordForm.newPassword)
            const hasSymbol = /[^a-zA-Z0-9]/.test(this.passwordForm.newPassword)
            const complexityCount = [hasLetter, hasNumber, hasSymbol].filter(Boolean).length
            if (complexityCount < 2) {
                this.$message.warning('密码至少包含字母、符号或数字中的两项')
                return
            }
            
            // 调用修改密码接口
            try {
                const params = {
                    oldPwd: this.passwordForm.oldPassword,
                    newPwd: this.passwordForm.newPassword
                }
                const res = await updatePwd(params)
                if (res && res.code === 1) {
                    this.$message.success('密码修改成功')
                    this.passwordDialogVisible = false
                    // 重置表单
                    this.passwordForm = {
                        oldPassword: '',
                        newPassword: ''
                    }
                } else {
                    this.$message.error(res.msg || '密码修改失败')
                }
            } catch (error) {
                console.error('修改密码失败:', error)
                this.$message.error('密码修改失败，请稍后重试')
            }
        },
        
        cancelChangePassword() {
            this.passwordDialogVisible = false
            // 重置表单
            this.passwordForm = {
                oldPassword: '',
                newPassword: ''
            }
        },
        
        handleChangePhone() {
            // 重置表单
            this.phoneForm = {
                oldPhone: '',
                newPhone: '',
                verifyCode: ''
            }
            // 重置验证状态
            this.phoneSliderPosition = 0
            this.isPhoneDragging = false
            this.isPhoneVerified = false
            this.phoneCodeCountdown = 0
            // 显示对话框
            this.phoneDialogVisible = true
        },
        
        startPhoneDrag(e) {
            if (this.isPhoneVerified) return
            this.isPhoneDragging = true
            this.onPhoneDrag(e)
        },
        
        onPhoneDrag(e) {
            if (!this.isPhoneDragging || this.isPhoneVerified) return
            const slider = e.currentTarget
            const rect = slider.getBoundingClientRect()
            const x = e.clientX - rect.left
            const maxX = rect.width - 50
            this.phoneSliderPosition = Math.max(0, Math.min(x, maxX))
            
            // 如果拖到最右边，自动完成验证
            if (this.phoneSliderPosition >= maxX - 5) {
                this.isPhoneVerified = true
                this.phoneSliderPosition = maxX
                this.$message.success('验证通过')
                this.isPhoneDragging = false
            }
        },
        
        endPhoneDrag() {
            if (!this.isPhoneDragging) return
            this.isPhoneDragging = false
            // 如果没有完成验证，滑块回到起始位置
            if (!this.isPhoneVerified) {
                this.phoneSliderPosition = 0
            }
        },
        
        async sendPhoneCode() {
            if (this.phoneCodeCountdown > 0) return
            if (!this.isPhoneVerified) {
                this.$message.warning('请先完成滑动验证')
                return
            }
            if (!this.phoneForm.newPhone) {
                this.$message.warning('请输入新手机号')
                return
            }
            // 验证手机号格式
            const phoneReg = /^1[3-9]\d{9}$/
            if (!phoneReg.test(this.phoneForm.newPhone)) {
                this.$message.warning('请输入正确的新手机号')
                return
            }
            try {
                await adminsendSmsCode({ phone: this.phoneForm.newPhone })
                this.$message.success('验证码已发送')
                this.phoneCodeCountdown = 60
                const timer = setInterval(() => {
                    this.phoneCodeCountdown--
                    if (this.phoneCodeCountdown <= 0) {
                        clearInterval(timer)
                    }
                }, 1000)
            } catch (error) {
                console.error('发送验证码失败:', error)
                // 错误信息已在响应拦截器中处理
            }
        },
        
        async confirmChangePhone() {
            // 表单验证
            if (!this.phoneForm.oldPhone) {
                this.$message.warning('请输入原手机号')
                return
            }
            if (!this.phoneForm.newPhone) {
                this.$message.warning('请输入新手机号')
                return
            }
            if (!this.isPhoneVerified) {
                this.$message.warning('请先完成滑动验证')
                return
            }
            if (!this.phoneForm.verifyCode) {
                this.$message.warning('请输入验证码')
                return
            }
            // 验证手机号格式
            const phoneReg = /^1[3-9]\d{9}$/
            if (!phoneReg.test(this.phoneForm.oldPhone)) {
                this.$message.warning('请输入正确的原手机号')
                return
            }
            if (!phoneReg.test(this.phoneForm.newPhone)) {
                this.$message.warning('请输入正确的新手机号')
                return
            }
            // 检查新旧手机号是否相同
            if (this.phoneForm.oldPhone === this.phoneForm.newPhone) {
                this.$message.warning('新手机号不能与原手机号相同')
                return
            }
            
            // 调用更换手机号接口

            try {
                const params = {
                    oldPhone: this.phoneForm.oldPhone,
                    newPhone: this.phoneForm.newPhone,
                    code: this.phoneForm.verifyCode
                }
                const res = await changePhone(params)
                if (res && res.code === 1) {
                    this.$message.success(res.msg || '手机号更换成功')
                    // 调用 details 接口获取用户信息
                    try {
                        const userId = localStorage.getItem('userId')
                        if (userId) {
                            const detailRes = await details(userId)
                            if (detailRes && detailRes.code === 1 && detailRes.data) {
                                // 更新手机号到 localStorage
                                if (detailRes.data.phone) {
                                    localStorage.setItem('userPhone', detailRes.data.phone)
                                }
                            }
                        }
                    } catch (error) {
                        console.error('获取用户详情失败:', error)
                    }
                    this.phoneDialogVisible = false
                    // 重置表单和验证状态
                    this.phoneForm = {
                        oldPhone: '',
                        newPhone: '',
                        verifyCode: ''
                    }
                    this.phoneSliderPosition = 0
                    this.isPhoneDragging = false
                    this.isPhoneVerified = false
                    this.phoneCodeCountdown = 0
                } else {
                    this.$message.error(res.msg || '手机号更换失败')
                }
            } catch (error) {
                console.error('更换手机号失败:', error)
                // 错误信息已在响应拦截器中处理
            }
        },
        
        cancelChangePhone() {
            this.phoneDialogVisible = false
            // 重置表单和验证状态
            this.phoneForm = {
                oldPhone: '',
                newPhone: '',
                verifyCode: ''
            }
            this.phoneSliderPosition = 0
            this.isPhoneDragging = false
            this.isPhoneVerified = false
            this.phoneCodeCountdown = 0
        },
        
        async handleLogout() {
            // 清除企业LOGO
            removeEnterpriseLogo()
            this.$confirm('确认退出登录吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                try {
                    // 调用退出接口
                    await logout()
                    
                    // 清除登录状态
                    removeToken()
                    removeEnterpriseLogo()
                    localStorage.removeItem('isLogin')
                    localStorage.removeItem('userId')
                    localStorage.removeItem('userNickname')
                    localStorage.removeItem('userPhone')
                    localStorage.removeItem('msgCount')
                    // 清除其他可能的存储数据
                    localStorage.removeItem('headerActiveIndex')
                    localStorage.removeItem('headerActiveShu')
                    localStorage.removeItem('lastRoute')
                    
                    // 跳转到登录页
                    this.$router.push('/login')
                    this.$message.success('已退出登录')
                } catch (error) {
                    console.error('退出登录失败:', error)
                    // 即使接口调用失败，也清除本地状态并跳转
                    removeToken()
                    removeEnterpriseLogo()
                    localStorage.removeItem('isLogin')
                    localStorage.removeItem('userId')
                    localStorage.removeItem('userNickname')
                    localStorage.removeItem('userPhone')
                    localStorage.removeItem('msgCount')
                    localStorage.removeItem('headerActiveIndex')
                    localStorage.removeItem('headerActiveShu')
                    localStorage.removeItem('lastRoute')
                    this.$router.push('/login')
                    this.$message.success('已退出登录')
                }
            }).catch(() => {
                // 用户取消，不做任何操作
            })
        },
        
        // 判断是否应该获取企业LOGO
        shouldFetchLogo() {
            const currentPath = this.$route.path
            // 只在企业信息相关页面调用
            const logoRoutes = [
                '/home/corporateInformation',
                '/home',
                '/home/dataretrieval'
            ]
            return logoRoutes.some(route => currentPath === route || currentPath.startsWith(route + '/'))
        },
        // 从localStorage加载企业LOGO
        loadEnterpriseLogo() {
            const logo = getEnterpriseLogo()
            if (logo) {
                this.enterpriseLogo = logo
            }
        },
        // 处理localStorage变化事件
        handleStorageChange(e) {
            if (e.key === 'enterpriseLogo') {
                this.enterpriseLogo = e.newValue || ''
            }
        },
        // 获取企业LOGO（保留作为备用方法，如果localStorage没有则调用API）
        async fetchEnterpriseLogo() {
            // 先尝试从localStorage读取
            const logo = getEnterpriseLogo()
            if (logo) {
                this.enterpriseLogo = logo
                return
            }
            
            // 如果localStorage没有，则调用API获取
            try {
                const res = await show({})
                if (res && res.code === 1 && res.data) {
                    // 数据结构可能是对象（键是数字字符串）或数组
                    let dataToProcess = res.data
                    
                    // 如果是数组，转换为对象格式以便统一处理
                    if (Array.isArray(res.data)) {
                        dataToProcess = {}
                        res.data.forEach((item, index) => {
                            const parentId = item.parent_id !== undefined ? item.parent_id : index
                            dataToProcess[String(parentId)] = item
                        })
                    }
                    
                    // 查找 parent_id: 0 的基本信息（图片数据）
                    if (dataToProcess['0'] && dataToProcess['0'].list && Array.isArray(dataToProcess['0'].list)) {
                        dataToProcess['0'].list.forEach(imgItem => {
                            if (imgItem.name === 'logo' && imgItem.value) {
                                // 如果 value 是完整 URL，直接使用
                                if (imgItem.value.startsWith('http://') || imgItem.value.startsWith('https://')) {
                                    this.enterpriseLogo = imgItem.value
                                } else if (imgItem.host) {
                                    // 如果有 host，组合完整的 URL
                                    const host = imgItem.host.endsWith('/') ? imgItem.host : imgItem.host + '/'
                                    const path = imgItem.value.startsWith('/') ? imgItem.value.slice(1) : imgItem.value
                                    this.enterpriseLogo = host + path
                                } else {
                                    this.enterpriseLogo = imgItem.value
                                }
                            }
                        })
                    }
                }
            } catch (error) {
                console.error('获取企业LOGO失败:', error)
                // 获取失败时不显示错误提示，保持默认样式
            }
        }

    }
}
</script>
<style  scoped>
.department-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.department-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.department-table tr{
    border: 1px solid #DCE0FD;
    cursor: pointer;
}

.department-table th {
   
    /* 淡紫色表头 */
    color: #5a4a6a;
    font-weight: 600;
    text-align: left;
    padding: 16px 20px;

}

.department-table td {
    background-color: white;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    padding: 12px 20px;
    vertical-align: middle;
}

.department-table td:not(.th1) {
    padding: 12px 20px;
}

.department-table td ::v-deep .el-input {
    width: 100%;
}

.department-table tr:last-child td {
    border-bottom: none;
}
.th1{
    width: 120px;         /* 设置固定宽度（可以根据需要调整） */
  font-size: 13px;      /* 字体大小比默认小 */
  padding-left: 20px;   /* 右对齐 */
  padding-right: 8px;
  border-right: 1px solid #DCE0FD;
  background: #EDEFFE !important;
  border-bottom: 1px solid #DCE0FD !important;
}
.department-table tr:hover td {
    background-color: #f9f9f9;
    transition: background-color 0.2s;
}
.container {
    width: 72%;
   margin: 0 auto;
}
.contents {
    width: 90%;
    margin: 0 auto;
}
.shu{
  width: 10px;
    height: 20px;
    background: #5165f7;
    position: relative;
    top: -24px;
    left: 40%;
}
.active{
    color: #5165f7 !important;
}
.rights-names{
    margin-left: 32px;
    cursor: pointer;
}
.rights{
    flex: 1;
    height: 100%;
    line-height: 94px;
    display: flex;
    padding-left: 24px;
}
.name-title{
    position: relative;
    top: -6px;
    font-weight: bold;
}
.right-name{
    font-size: 12px;
}
.img-right{
    font-size: 14px;
    position: relative;
    top: 40px;
    height: 40px;
    margin-left: 12px;
}
.imgs{
    width: 45px;
    height: 46px;
    background: #5165f7;
    border-radius: 6px;
    position: relative;
    top: 26px;
    margin-left: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.enterprise-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}
.headers-right{
    flex: 1;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 24px;
}

.header-user-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.eye-icon {
    background: #E8EBFF;
    color: #5165f7;
    font-size: 18px;
}



.bell-icon {
    
    color: #5165f7;
    font-size: 18px;
    position: relative;
    left: -15px
}


.notification-badge {
    position: absolute;
    top: -2px;
    right: -16px;
    background: #F56C6C;
    color: white;
    font-size: 12px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-weight: 500;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.user-info:hover {
    opacity: 0.8;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #5165f7;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 14px;
    color: #303133;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.user-name .el-icon-arrow-down {
    font-size: 12px;
    color: #909399;
}

.user-phone {
    font-size: 12px;
    color: #909399;
    margin-top: 2px;
}

::v-deep .el-dropdown-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

::v-deep .el-dropdown-menu__item i {
    font-size: 16px;
}

.headers-left{
    width: 218px;
    height: 100%;
    display: flex;
    background: white;
    border-right: 1px solid #EDEFFE;
}
.headers{
  width: 100%;
    height: 90px;
    display: flex
;
    border-bottom: 1px solid #EDEFFE;
}

/* 修改密码对话框样式 */
.change-password-dialog ::v-deep .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #EDEFFE;
    background-color: #F7F7FA;
    text-align: center;
}

.change-password-dialog ::v-deep .el-dialog__title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    text-align: center;
}

.change-password-dialog ::v-deep .el-dialog__body {
    padding: 20px;
}

.password-form {
    padding: 10px 0;
}

.form-item {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    color: #303133;
    margin-bottom: 8px;
    font-weight: 400;
}

.form-item ::v-deep .el-input {
    width: 100%;
}

.form-item ::v-deep .el-input__inner {
    height: 40px;
    line-height: 40px;
}

.password-requirements {
    font-size: 12px;
    color: #909399;
    line-height: 1.6;
    margin-top: 10px;
    padding: 12px;
    background-color: #F5F7FA;
    border-radius: 4px;
}

.change-password-dialog ::v-deep .el-dialog__footer {
    padding: 15px 20px;
    border-top: 1px solid #EDEFFE;
    text-align: right;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    justify-content: center;
}

/* 更换手机账号对话框样式 */
.change-phone-dialog ::v-deep .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #EDEFFE;
    background-color: #F7F7FA;
    text-align: center;
}

.change-phone-dialog ::v-deep .el-dialog__title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    text-align: center;
}

.change-phone-dialog ::v-deep .el-dialog__body {
    padding: 20px;
}

/* 滑动验证样式 */
.verification-section {
    margin-bottom: 16px;
}

.slider-verification {
    width: 90%;
    height: 48px;
    position: relative;
    cursor: grab;
    user-select: none;
}

.slider-verification:active {
    cursor: grabbing;
}

.slider-track {
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 60px;
    overflow: hidden;
}

.slider-handle {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background: #5165f7;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: all 0.3s ease;
    z-index: 2;
    cursor: grab;
}

.slider-handle:active {
    cursor: grabbing;
}

.slider-handle.verified {
    background: #67c23a;
    border-radius: 8px;
    left: calc(100% - 50px) !important;
}

.slider-text {
    font-size: 14px;
    color: #909399;
    transition: opacity 0.3s;
    z-index: 1;
    white-space: nowrap;
}

.slider-text.hidden {
    opacity: 0;
}

.slider-success {
    position: absolute;
    right: 16px;
    font-size: 14px;
    color: #67c23a;
    font-weight: 500;
    z-index: 1;
}

/* 进度弹框样式 */
.progress-popup {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 185px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2000;
    overflow: hidden;
}

.progress-popup-content {
    padding: 20px 20px 16px;
    text-align: center;
}

.progress-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.title-line {
    width: 30px;
    height: 1px;
    background: #5165f7;
    display: inline-block;
}

.title-text {
    color: #5165f7;
    font-size: 14px;
    font-weight: 500;
    margin: 0 10px;
}

.progress-message {
    color: #909399;
    font-size: 14px;
    margin-bottom: 16px;
}

.progress-footer {
    display: flex;
    justify-content: center;
}

.know-button {
    width: 100px;
    height: 32px;
    border: 1px solid #dcdcdc;
    background: #fff;
    color: #303133;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}

.know-button:hover {
    border-color: #5165f7;
    color: #5165f7;
}
</style>