<template>
  <div>
    <div class="navbar">
      <div class="app-title">
        <img
          src="@/assets/images/logo-home.png"
          style="width: 135px; height: 27px; cursor: pointer"
          alt=""
          @click="goHome"
        />
      </div>

      <div class="menus" @mouseleave="handleMenuLeave">
        <div
          v-for="(item, index) in menuList"
          :key="index"
          class="menu-item"
          @mouseenter="handleMenuEnter(item)"
          @click="handleMenuClick(item)"
        >
          <div class="menu-btn">
            <span v-if="item.redirect == 'index' || item.redirect == 'index1'">
              {{ item.children[0].meta.title }}
            </span>
            <span v-else-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
            <div class="tab-item-btn"></div>
          </div>
        </div>
      </div>

      <div class="right-menu">
        <template v-if="device !== 'mobile'">
          <search id="header-search" class="right-menu-item" />

          <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" />

          <el-tooltip content="布局大小" effect="dark" placement="bottom">
            <size-select id="size-select" class="right-menu-item hover-effect" />
          </el-tooltip> -->

          <div class="right-menu-item hover-effect bar-item">
            <img
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAABPUlEQVQ4EYWTvUoDQRSFHbezCmIZAhLs7PQJxM4U8TmsBEvbVCkCeYC8QwQrU2sjEiSNjaKkFFTQIoG4+c44F5ZlZrxw9sw95+7d+Vu3QZRleQTtA6eceANXzrmVz3hQcwmdg3dwhjeBvdHDjMXYF/zVDGsFC/IT7zP4qJnVtEnSrwqVsZoca2q56ORMvKdNm2aCGwnd5B01WFoW4Xu0u4hu0kBLuE5M8xm9ANvgIVIz9F1CwQC+AZOAEdy2zzBWk1tg0TfPnzvqFsIusHsw55w/rQi/YLwHDsAXmOLPYX8PuhR8W+vAK/gi+G3GWk49xgiF9uC17oRcTRpAy0nFqU6hpS9FQl4TpHy90vrvHqgoG2pQZirkZX01mCUa/KC/ZHy9NtMmHoJH8FvZKW1sVxWw7oAum34eC/2APflrp+zfNar0B+8AAAAASUVORK5CYII="
              alt="提醒"
            />
          </div>

          <div class="right-menu-item hover-effect bar-item">
            <img
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAADwAAAADW5XGhAAAA5klEQVQoFe3TvQ7BUBTA8atFI2kwSHyEGCwGmzcwGCS8g0RisHgJs3fgCRgkBovdxGAyMROLwVD/c28HqRrEYnCSX3PuPacnTdurFOF5Xgw7nLFCFxGpSUju70lNeqQ3bqqmochGMOZs2L5ZsMi6pAeQTGUR0iBbQ19YWe6ZWExpy0Poaa+XLFviXXRkwFfxH6DUb7wDh+94w/WD7ym9FzhRLnf0UEEdVTTRwnMsWCyxxwZ96EMyIBlDnuKEI9bYwvzvSh3Ia2iggDKSGEGftgT/dQZyKi2kkNdFU8+xTsP2+11yV/IH7VrRz1OSP24AAAAASUVORK5CYII="
              alt="提醒"
            />
          </div>

          <div class="right-menu-item hover-effect bar-item">
            <span class="bar-text">收藏</span>
          </div>

          <!-- 代办 -->
          <div class="right-menu-item hover-effect bar-item" @click="goTodo">
            <span class="bar-text">待办</span>
          </div>

          <!-- 预警 -->
          <el-popover
            ref="warningPopover"
            placement="bottom"
            width="360"
            trigger="hover"
            popper-class="warning-popover"
          >
            <!-- 弹框内容 -->
            <div class="warning-box">
              <div class="warning-title">预告警列表</div>

              <div
                v-for="(item, index) in warningList"
                :key="index"
                class="warning-item"
                @click="goWarningDetail(item)"
              >
                <div class="warning-icon">
                  <img
                    src="data:image/png;base64,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"
                    alt="提醒"
                  />
                </div>
                <div class="warning-content">
                  <div class="warning-main">{{ item.title }}</div>

                  <el-tooltip :content="item.desc" placement="top" effect="dark">
                    <div class="warning-sub">
                      {{ item.desc }}
                    </div>
                  </el-tooltip>
                </div>
              </div>

              <div class="warning-footer" @click="goWarning"> 查看全部 </div>
            </div>

            <!-- 触发元素 -->
            <div slot="reference" class="right-menu-item hover-effect bar-item" @click="goWarning">
              <el-badge :value="warningCount" :max="99" class="badge" type="danger">
                <span class="bar-text">预警</span>
              </el-badge>
            </div>
          </el-popover>

          <!-- 消息 -->
          <el-popover
            ref="messagePopover"
            placement="bottom"
            width="360"
            trigger="hover"
            popper-class="warning-popover"
          >
            <!-- 弹框内容（复用预警所有样式类） -->
            <div class="warning-box">
              <div class="warning-title">消息列表</div>
              <div
                v-for="(item, index) in messageList"
                :key="index"
                class="warning-item"
                @click="goMessageDetail(item)"
              >
                <div class="warning-icon">
                  <img
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAYAAACoYAD2AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKaADAAQAAAABAAAAKQAAAADAIIRfAAAHCUlEQVRYCbVZzY8URRR//THTs8MMC2OWizcS8GLwnzAhRK+LxI9ED2AU5aKJ3JyLd6OJCcZETbjA3lUSDibGIxIOevYqmF2WGdid6e4q36+qX3VXf+wOBCvbU69evffqV69efW5Az5q0DqZb1LtP1I+WFM5SCqMj/GUU5k9I5RGp8czmJzZoOT1PKVGgn6W54GmVPv5JJ7RNyWhIveU+Gf1Z1YhXKCt6A9LhLoDS4usrwaKsOZxaGeT0pu7/k9KRYUCRmG3gaTBE0s+jnPJ/79PjrWmw9GvaS4eC3Lypo5NEoyyjXt1EA1ODUddolNOd4zTfOh/kjZoK40CQl67pHg/T0UHPDmtFjzw8XqEq1U2Lyn5KeqNHj759P0AotKZOkNPv9WCW0KhNSxowdV6hTbrJa1NJ+jT/4b1gvylNFLYx/0+Abe2Bt1jS6F12TFt9AySGuM2D6L3zgCPaTB7MO0gVQNF+3YIHEpMEMVgXai3XWhsqGiVr+XX+/u4Nsushl+t6NZV6tSk/SOno5qZ2KwiYHsiTPIvrkwSGnXGvYGy6n3yoLmqtzyqlj/A6fzboZxddZdVGldlCm/Zf9TvoQGIdbFtmnB0AHLuSRyQD4v7RawyOFO8pDJQ0ha8HOjsFQddJT6ujwMLxjHqbU90XCQcSC7UwJXfGhZC8EFAhRf0k/0JT9rvS+hX+SIDmWp3JY/otC9IvdUyuQbHdmlfs95ISjwGJra66k8CAk3eEb5ZjLlzrpV/xCnqJgcUWIHsRQFmUM3wR172VZNl3PEqxb6FWqrXD0yc69xVvwZysJ3kvFhXIOnlHSG2Zx4m6ooPwPIbWDrEDZoYbYJUqQGs6l0Tp1VK7QnkNlvy5JQuQ3FUcFsrqlah1HaqPbOxxHJoYJMoNKIAtYtN609Yrupjl9MIq1guANAiBi12B41bjNNPRO2kgHmRvM65140FMlOIrhtiCAlCuQB3/MU3DOF++IzbMcB0wUpDL+JS1OaVejPPgGjMOkXe2DaGCM7zcmLiTWDRAwGMBzYFajU0DlCtyTS+bwOxoTDzoN0b92BxY3Rzn6g4DVcVM65eAxniOKyxQO8QAqKseNJ1hnpU/1WW/AyDNJ9uhOVE7ACsANLKajqNReAiTw8YgvOgDLIBZj9txP+baWpFI8kkY48hP2YoahZgByI26Ya14lYfUBKHpAAsa4Ca3nq+31OVBkdvTjxgk30m6hkAE67lZWuA1AWdmMyYJgwKPFcxX0JDn+42ZSFVb7QAxnOXW1ldBaC5NVcVVaG40ARjMXrvs2DVRAAJUDk8XMgBsyqx3uH0AlLib0TIcqxC3usMVSwnsNIr0MVkbAQBDK7nho8yfgveQo8xyOevFvKnDg91eRFsCdExrwUMV4toJ9qrpSZidZgCRNG6Gni3YNRHeC3ip8b1oZQwvepBnp/22xGs+15ZmtIjU03lyxgcKnesLxjPwEIODh+xnY1TispSxgM0EYs8GYf5mEJc3zmr8lR6UuBzTaDtXIS7ubX2o86AWZektBnQZQyngjAcZEcAZj6GOP+tp61lbh3qO4Zw+2Ntb3CrtiyeRl+AsjfLGMsbLwuUfSafFRb9ULikxw4Fxj9t/0QBAkBik7EEmpei8y0y7K/Fdj0NAa4UdxySlgnuWElAoyYyW1sYUD2Z661NKeZcK+GVBpzzvGmc+EbcGOfDj3idM4/OO9Hqfhnzh71P9XWJIyzilJ5gkuA/YUwysCiDJhVfNZ7SvUvM0I2c8mG+AZN5KKdXpZ+y1DxXOLPAga2GIg/3wmyjqfe4bqQOTWgCsp4npttm18TaDpw8RgXibitR7OQuGWXCDQS0FnI1TjvUouOHJOquwDrDSkgC3PHB3UpX/XLwZuaMF3mZ8g6uXEor/ojx4gxfsPxjoY/7uKh1ciMD3UhUMKqQsQoBn085i3eHxXjA2r+l1Hv/VDsClPbHr8u6F2nqq9KJTMYSYjLMsvX11siu1zpOGwY9HeJuRys5crNUEuneSqqAABQ+09aaY5KOjPn7nttdPz5NQMy8YROugW5NYq1V6Vr06KFggZaRXgZZcqM3G4907tccr35MshNctPB5B4fmkKiABC8uW9vo8H8/rACHZ8CSYSHg8wtuMLfGvZ81xV+iNeLLNwJjNFnwG+Ov0KV7VAAHPcNzXXRejVScUGNvd3QYGCmKg9CAAIgYxxF0AodkYbjAlYejjE/Qw2+G37q62RdjlACHCyKVc8oTCLJ7c/eVh2xA7c0x0DndVCDTeZvD0gZeFdg9CSkBVaYEkYMe8UO/mWAf/fF5v5miumoqnjwQXd9yL24FBQ8CBtocFuxdPFrKToGaVtLInm8a0ubgzvz+fUJjkFO7xqbuvZuEy1GotOKoWfOofbT/gA9LGcmv67P/H+Q/1aO1k2d8vXwAAAABJRU5ErkJggg=="
                    alt="提醒"
                  />
                </div>
                <div class="warning-content">
                  <div class="warning-main">{{ item.title }}</div>
                  <el-tooltip :content="item.desc" placement="top" effect="dark">
                    <div class="warning-sub">
                      {{ item.desc }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
              <div class="warning-footer" @click="goMessage"> 查看全部 </div>
            </div>
            <!-- 触发元素（结构与预警一致） -->
            <div slot="reference" class="right-menu-item hover-effect bar-item" @click="goMessage">
              <el-badge :value="messageCount" :max="99" class="badge" type="info">
                <span class="bar-text">消息</span>
              </el-badge>
            </div>
          </el-popover>
        </template>

        <!--        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">-->
        <!--          <div>-->
        <!--            <img :src="avatar" class="user-avatar" />-->
        <!--            <span class="nick-name">{{ user.nickName }}</span>-->
        <!--            <i class="el-icon-arrow-down" style="color: #fff"></i>-->
        <!--          </div>-->
        <!--          <el-dropdown-menu slot="dropdown">-->
        <!--            <router-link to="/user/profile">-->
        <!--              <el-dropdown-item>个人中心</el-dropdown-item>-->
        <!--            </router-link>-->
        <!--            <el-dropdown-item @click.native="setting = true">-->
        <!--              <span>布局设置</span>-->
        <!--            </el-dropdown-item>-->
        <!--            <el-dropdown-item divided @click.native="logout">-->
        <!--              <span>退出登录</span>-->
        <!--            </el-dropdown-item>-->
        <!--          </el-dropdown-menu>-->
        <!--        </el-dropdown>-->

        <!-- 用户信息悬浮卡片 -->
        <el-popover placement="bottom-end" width="260" trigger="hover" popper-class="user-popover">
          <!-- 弹框内容 -->
          <!-- 顶部蓝色区域 -->
          <div class="user-bg">
            <div class="user-header">
              <div class="user-name">{{ user.nickName }}</div>
              <div class="user-role">
                <i aria-label="用户"></i>
                {{ dept.deptName }}
              </div>
              <div class="user-role">{{ roles.length > 0 ? roles[0].roleName : '' }}</div>
            </div>
          </div>

          <!-- 列表区域 -->
          <div class="user-list">
            <div class="user-item">
              <i class="el-icon-mobile-phone" style="font-size: 19px; color: #000"></i>
              <span>手机号</span>
              <span class="right">138****8251</span>
            </div>
            <div class="user-item">
              <i class="el-icon-lock" style="font-size: 19px; color: #000"></i>
              <span>修改密码</span>
            </div>
            <div class="user-item">
              <i class="el-icon-house" style="font-size: 19px; color: #000"></i>
              <span>设置默认首页</span>
            </div>
            <div class="user-item" @click="downloadUserManual">
              <i class="el-icon-download" style="font-size: 19px; color: #000"></i>
              <span>操作手册下载</span>
            </div>
            <div class="user-item">
              <i class="el-icon-t-shirt" style="font-size: 19px; color: #000"></i>
              <span>一键换肤</span>
            </div>
            <div class="user-item" @click="clearCacheSimple">
              <i class="el-icon-delete" style="font-size: 19px; color: #000"></i>
              <span>清除缓存</span>
            </div>
            <div class="user-item">
              <i class="el-icon-data-analysis" style="font-size: 19px; color: #000"></i>
              <span>测试网络速度</span>
            </div>
            <div class="user-item" @click="gotoFeedback">
              <i class="el-icon-edit-outline" style="font-size: 19px; color: #000"></i>
              <span>意见反馈/闭环</span>
            </div>
            <div class="user-item" @click="showContactDialog">
              <i class="el-icon-phone-outline" style="font-size: 19px; color: #000"></i>
              <span>联系我们</span>
            </div>
            <div class="user-item logout" @click="logout">
              <!-- <i class="el-icon-refresh-left" style="font-size: 19px; color: #000;"></i> -->
              <img
                src="../../assets/images/loginOutIcon.png"
                style="width: 16px; height: 16px; margin-right: 10px"
                alt=""
              />
              <span>退出</span>
            </div>
          </div>

          <!-- 底部 -->
          <div class="user-footer">
            软件名称：机械化施工装备管理（共享）平台<br />
            版本号：V1.0.4
          </div>

          <!-- 触发区域（右上角头像+名字） -->
          <div slot="reference" class="avatar-container right-menu-item hover-effect">
            <img :src="avatar" class="user-avatar" />
            <span class="nick-name">{{ user.nickName }}</span>
            <i class="el-icon-arrow-down" style="color: #fff"></i>
          </div>
        </el-popover>
      </div>
    </div>
    <div style="height: 50px"></div>

    <div class="menu-box" v-show="showMenuBox" @mouseenter="handleBoxEnter">
      <div class="menu-warp" @mouseleave="handleBoxLeave">
        <div class="menu-list">
          <div class="list-box" v-for="(item, i) in currentMenu.children || []" :key="i" v-if="!item.hidden">
            <div class="menu-title-top" v-if="currentMenu && currentMenu.meta">
              <div class="title-tip"></div>
              <span class="title-text">{{ item.meta.title }}</span>
            </div>

            <!-- <div v-for="(child, i) in currentMenu.children || []" :key="i" class="sub-menu-item" v-if="!child.hidden"> -->
            <div class="sub-menu-item" v-for="(child, i) in item.children" :key="i" v-if="!child.hidden">
              <div v-if="child.children && child.children.length">
                <div class="menu-title" @click="toggleLevel1(child)">
                  <div class="children-title-tip"></div>
                  <span>
                    <span style="margin-right: 5px">{{ child.meta.title }}</span>
                    <img
                      v-if="openLevel1.includes(child.path)"
                      src="@/assets/images/up.png"
                      style="width: 14px; height: 14px"
                    />
                    <img v-else src="@/assets/images/down.png" style="width: 14px; height: 14px" />
                  </span>
                  <span class="menu-star" v-if="!child.children.length">
                    <img src="@/assets/images/star.png" style="width: 10px; height: 9px" />
                  </span>
                </div>

                <div v-show="openLevel1.includes(child.path)">
                  <div v-for="(c2, j) in child.children" :key="j" class="sub-menu-item" v-if="!c2.hidden">
                    <div v-if="c2.children && c2.children.length">
                      <div class="menu-title" @click="toggleLevel2(c2)">
                        {{ c2.meta.title }}
                        <img
                          v-if="openLevel2.includes(c2.path)"
                          src="@/assets/images/up.png"
                          style="width: 12px; height: 12px; margin-left: 6px"
                        />
                        <img
                          v-else
                          src="@/assets/images/down.png"
                          style="width: 12px; height: 12px; margin-left: 6px"
                        />
                      </div>

                      <div v-show="openLevel2.includes(c2.path)">
                        <div
                          v-for="(c3, k) in c2.children"
                          :key="k"
                          class="sub-menu-item"
                          v-if="!c3.hidden"
                          @click="goRoute(c3)"
                        >
                          {{ c3.meta.title }}
                        </div>
                      </div>
                    </div>

                    <div v-else class="menu-title" @click="goRoute(c2)">
                      <span class="child-left">- {{ c2.meta.title }}</span>
                      <span class="menu-star">
                        <img src="@/assets/images/star.png" style="width: 10px; height: 9px" />
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <div v-else class="menu-title" @click="goRoute(child)">
                <div class="children-title-tip"></div>
                <span>{{ child.meta.title }}</span>
                <span class="menu-star">
                  <img src="@/assets/images/star.png" style="width: 10px; height: 9px" />
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="contactDialogVisible"
      width="400px"
      center
      :append-to-body="true"
      custom-class="contact-dialog"
      :show-header="false"
    >
      <div class="contact-content">
        <!-- 外层Flex容器：实现图标+标题同行 -->
        <div class="contact-title-wrap">
          <div class="contact-icon">
            <i class="el-icon-warning"></i>
          </div>
          <div class="contact-title">联系我们</div>
        </div>
        <!-- 联系电话单独一行 -->
        <div class="contact-phone">联系电话：{{ contactPhone }}</div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="contactDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleContactConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Search from '@/components/HeaderSearch'
import { getUserProfile } from '@/api/system/user'

export default {
  components: { Search },
  data() {
    return {
      title: process.env.VUE_APP_TITLE,
      user: {},
      dept: {},
      roles: [],
      menuList: [],
      showMenuBox: false,
      currentMenu: {},
      openLevel1: [],
      openLevel2: [],
      todoCount: 5,
      warningCount: 2,
      messageCount: 12,
      warningList: [
        {
          id: 1,
          title: '达标投产复检预警',
          desc: '您所管理的今天明天后天工程已超期',
        },
        {
          id: 2,
          title: '达标投产复检预警',
          desc: '红红火火恍恍惚惚好工程已超期',
        },
        {
          id: 3,
          title: '达标投产复检预警',
          desc: '红红火火恍恍惚惚好新建工程',
        },
      ],
      // 消息列表数据
      messageList: [
        {
          id: 1,
          title: '系统通知',
          desc: '您的账号于2026-01-25 10:00完成登录，请注意账号安全',
        },
        {
          id: 2,
          title: '业务提醒',
          desc: '手塘-北三110kV工程已完成验收，可前往查看报告',
        },
        {
          id: 3,
          title: '待办提醒',
          desc: '您有5条待办事项未处理，预计截止时间2026-01-30',
        },
      ],
      contactDialogVisible: false, // 控制联系我们弹窗显示
      contactPhone: '田经理15212781264，刘经理19855530627', // 联系电话
    }
  },
  computed: {
    ...mapGetters(['sidebarRouters', 'avatar', 'device']),
    setting: {
      get() {
        return this.$store.state.settings.showSettings
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'showSettings',
          value: val,
        })
      },
    },
  },
  created() {
    this.getUser()
    this.menuList = this.sidebarRouters.filter((route) => !route.hidden && route.path !== '/')
    this.menuList = this.menuList.slice(1)
    console.log('🚀 ~ this.menuList:', this.menuList)
  },
  methods: {
    goHome() {
      this.$router.push({ path: '/' })
    },
    goWarningDetail(item) {
      this.$refs.warningPopover.doClose() // 关闭弹窗
      // this.$router.push({ path: '/warning/detail', query: { id: item.id } });
    },
    // 预警触发元素/查看全部点击-跳转到预警列表页
    goWarning() {
      this.$refs.warningPopover.doClose()
      // this.$router.push({ path: '/warning/list' });
    },
    // 待办点击-跳转到待办页面
    goTodo() {
      // this.$router.push({ path: '/todo' }) // 替换为实际的待办页路由
    },
    goMessageDetail(item) {
      this.$refs.messagePopover.doClose() // 关闭消息弹窗
      // this.$router.push({ path: '/message/detail', query: { id: item.id } }); // 跳消息详情
    },
    goMessage() {
      this.$refs.messagePopover.doClose() // 关闭消息弹窗
      // this.$router.push({ path: '/message' }); // 跳消息列表
    },
    gotoFeedback() {
      this.$router.push({ path: '/feedback' })
    },
    getUser() {
      getUserProfile().then((response) => {
        console.log('用户信息', response.data)
        this.user = response.data
        this.dept = response.data.dept
        this.roles = response.data.roles
      })
    },
    downloadUserManual() {
      this.download('material-mall/todo/downLoadUserManual', {}, `机械化施工装备管理（共享）平台操作手册V1.0.pdf`)
    },
    clearCacheSimple() {
      // 清除本地存储
      localStorage.clear()
      sessionStorage.clear()
      this.$message.success('缓存清除成功！')
      setTimeout(() => location.reload(), 1000)
    },
    showContactDialog() {
      this.contactDialogVisible = true
    },
    handleContactConfirm() {
      this.contactDialogVisible = false
    },
    async logout() {
      this.$store.dispatch('LogOut').then((res) => {
        this.$store.dispatch('tagsView/delAllViews')
        if (process.env.VUE_APP_BASE_API == '/iws/jxhzb-api') {
          window.location.href = 'http://sgwpdm.ah.sgcc.com.cn/iws'
        } else {
          this.$router.push({ path: '/login' })
        }
      })
    },
    handleMenuClick(item) {
      if (item.redirect == 'index' || item.redirect == 'index1') {
        this.$router.push({ path: '/' + item.redirect })
      }
    },
    handleMenuEnter(item) {
      if (item.redirect == 'index' || item.redirect == 'index1') {
        this.showMenuBox = false
        return
      }

      this.showMenuBox = true

      const buildPath = (nodes, parentPath = '') => {
        return nodes.map((n) => {
          let currentPath = n.path || ''
          if (!currentPath.startsWith('/')) {
            currentPath = parentPath.replace(/\/$/, '') + '/' + currentPath
          }

          const newNode = { ...n, fullPath: currentPath }

          if (n.children && n.children.length) {
            newNode.children = buildPath(n.children, currentPath)
          }

          return newNode
        })
      }

      const children = buildPath(item.children || [], item.path)

      this.currentMenu = {
        ...item,
        fullPath: item.path,
        children,
      }

      const level1 = []
      const level2 = []

      children.forEach((item) => {
        if (item.children && item.children.length) {
          // 👉 child 这一层（控制 openLevel1）
          item.children.forEach((child) => {
            if (child.children && child.children.length) {
              level1.push(child.path)

              // 👉 c2 这一层（控制 openLevel2）
              child.children.forEach((c2) => {
                if (c2.children && c2.children.length) {
                  level2.push(c2.path)
                }
              })
            }
          })
        }
      })

      this.openLevel1 = level1
      this.openLevel2 = level2
    },
    handleMenuLeave() {
      this.showMenuBox = false
    },
    handleBoxEnter() {
      this.showMenuBox = true
    },
    handleBoxLeave() {
      this.showMenuBox = false
    },
    goRoute(route) {
      if (route.fullPath) {
        this.$router.push({ path: route.fullPath, query: route.query })
        this.showMenuBox = false
      }
    },
    toggleLevel1(item) {
      const idx = this.openLevel1.indexOf(item.path)
      if (idx > -1) this.openLevel1.splice(idx, 1)
      else this.openLevel1.push(item.path)
    },
    toggleLevel2(item) {
      const idx = this.openLevel2.indexOf(item.path)
      if (idx > -1) this.openLevel2.splice(idx, 1)
      else this.openLevel2.push(item.path)
    },
  },
}
</script>

<style lang="scss" scoped>
.navbar {
  width: 100%;
  height: 50px;
  overflow: hidden;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // background: #fff;
  // background-image: url('../../assets/images/titleGif.gif');
  // background-size: cover;
  // background-repeat: no-repeat;
  // background-position: center;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
  z-index: 10;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
    Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

  .app-title {
    width: 314px;
    height: 50px;
    padding-left: 30px;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
  }

  .menus {
    min-width: 698px;
    height: 50px;
    line-height: 50px;
    flex: 1;
    gap: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin: 0 20px;
    .menu-item {
      height: 50px;
      cursor: pointer;
      // font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 600;
      font-size: 18px;
      color: #ffffff;
      text-align: center;
      font-style: normal;
      text-transform: none;
      .menu-btn {
        width: 100%;
        text-align: center;
      }

      // 移入下方横条
      &:hover {
        .tab-item-btn {
          margin: 5px auto 0;
          width: 15px;
          height: 2px;
          margin-top: -8px;
          background: #fff;
        }
      }
    }
  }

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .topmenu-container {
    position: absolute;
    left: 50px;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #bfbfbf; /* 纯黑色，比#262626更黑 */
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 16px;

      .user-avatar {
        cursor: pointer;
        width: 18px;
        height: 18px;
        vertical-align: text-bottom;
        color: #262626;
        /* 移除了opacity属性，使用color属性实现颜色调整 */
      }

      .nick-name {
        margin: 0 3px;
        // font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}

.menu-box {
  position: absolute;
  z-index: 99999999;
  width: 100%;
  height: calc(100% - 50px);
  // background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
  // 蒙层
  background: rgba(0, 0, 0, 0.5);
  .menu-warp {
    width: 100%;
    background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
    border-radius: 0 0 16px 16px;
  }
  .menu-list {
    padding: 16px 20px;
    width: 100%;
    min-height: 287px;
    background: #f8fdfc;
    border-radius: 16px;

    display: grid;

    /* 关键：一行 6 等分，自动沾满容器 */
    grid-template-columns: repeat(6, 1fr);

    /* 横向 & 纵向间距完全一致 */
    column-gap: 16px;
    row-gap: 16px;

    .list-box {
      /* Grid 下不需要再算宽度 */
      width: 100%;
      min-width: 0;

      padding: 16px;
      height: 100%;

      background: linear-gradient(180deg, #e6ffff, rgba(233, 255, 255, 0) 90px);
      border-radius: 12px;
    }
  }

  .menu-title-top {
    width: 100%;
    display: flex;
    align-items: center;
    span {
      color: #095a4d;
      font-weight: 800;
    }
  }
  .menu-title {
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;

    // 移入效果
    &:hover {
      color: #2cbab2;
      background: rgba(44, 186, 178, 0.1);
      border-radius: 4px;
    }
  }
  .menu-star {
    padding-right: 5px;
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    opacity: 0; // 默认不显示
    transition: opacity 0.2s;
  }
  /* hover 当前行时，显示星标 */
  .menu-title:hover .menu-star {
    opacity: 1;
  }
  .title-tip {
    margin-right: 4px;
    width: 8px;
    height: 16px;
    line-height: 24px;
    background: #2cbab2;
    margin-bottom: 20px;
    border-radius: 4px 4px 4px 4px;
  }
  .title-text {
    font-size: 18px;
    // color: #0f7969;
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .children-title-tip {
    margin-right: 4px;
    width: 8px;
    height: 8px;
    background: #2cbab2;
    border-radius: 50%;
  }
  .child-left {
    // 与父节点左边距2个字符
    margin-left: 1rem;
  }
}
/* 只改“下一级里的”二级、三级颜色 */
.menu-box {
  /* 二级：child.children 里面的 menu-title */
  .sub-menu-item {
    .sub-menu-item {
      > .menu-title {
        color: #333;
      }

      /* 三级：最里面的 sub-menu-item */
      .sub-menu-item {
        color: #333;
      }
    }
  }
}

.right-menu {
  .bar-item {
    display: inline-flex;
    align-items: center;
    color: #fff;
    cursor: pointer;

    i {
      font-size: 18px;
      color: #fff;
    }

    .bar-text {
      margin-left: 3px;
      font-size: 15px;
      color: #fff;
      font-weight: bold;
    }

    .badge {
      line-height: 1;
      margin-bottom: 4px;
    }
  }
}

.warning-popover {
  padding: 0;
}

.warning-box {
  width: 100%;
  font-size: 14px;
}

.warning-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  height: 38px;
}

.warning-item {
  display: flex;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1.5px solid #e1e1e1;

  &:hover {
    background: #f5f7fa;
  }
}

.warning-icon {
  margin-right: 8px;
}

.warning-content {
  flex: 1;
  min-width: 0;
}

.warning-main {
  font-size: 16px;
  color: #333;
}

.warning-sub {
  font-size: 12px;
  color: #666666;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.warning-footer {
  text-align: center;
  padding: 8px;
  color: #50c7bd;
  cursor: pointer;

  &:hover {
    background: #f5f7fa;
  }
}

/* -------用户------- */
.user-popover {
  color: #000;
  font-size: 12px;
  background-color: #fff;
  width: 250px;
  border-radius: 12px;
  border: 1px solid #e1e1e1;
  padding: 10px;
}

//.user-card {
//  width: 260px;
//  overflow: hidden;
//  font-family: Microsoft YaHei;
//}

.user-bg {
  border-radius: 15px;
  //height: 140px;
  background-color: #34c3ac;
  background-image: linear-gradient(270deg, #4eacff, #00d2be);
}

/* 顶部渐变 */
.user-header {
  background-image: url('../../assets/images/user-bg.png');
  padding: 15px;
  color: #fff;
  background-size: 100% 100%;
}

.user-name {
  font-size: 20px;
}

.user-role {
  padding: 5px 0;
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.9;
}

/* 列表 */
.user-list {
  background: #fff;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 15px 14px;
  font-size: 12px;
  color: #000;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  font-weight: 500;

  i {
    margin-right: 8px;
    color: #666;
  }

  .right {
    margin-left: auto;
    color: #999;
  }

  &:hover {
    background: #f5f7fa;
  }
}

/* 底部 */
.user-footer {
  font-size: 12px;
  color: #999;
  padding: 10px 14px;
  background: #fafafa;
  line-height: 18px;
}

/* 联系我们弹窗样式 - 修复同行显示+样式优化 */
.contact-dialog {
  .el-dialog__body {
    padding: 20px 10px 10px;
    text-align: center;
    margin: 0; /* 清除默认边距，避免居中偏移 */
  }

  .contact-content {
    // 整体内容居中
    display: flex;
    flex-direction: column;
    gap: 16px; /* 标题行与电话行的间距 */

    // 图标+标题 同行容器
    .contact-title-wrap {
      display: flex;
      gap: 8px; // 图标与文字的间距，可根据需要调整
    }

    .contact-icon {
      font-size: 24px;
      color: #f5a623; // 黄色感叹号，匹配截图
      line-height: 1; // 清除行高，避免垂直偏移
    }

    .contact-title {
      display: block;
      overflow: hidden;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
      font-size: 16px;
      line-height: 1.4;
    }

    .contact-phone {
      margin-left: 34px;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }
  }

  .dialog-footer {
    padding-top: 15px;
    text-align: right;
    border-top: 1px solid #e6e6e6;
    margin: 0; // 清除默认边距

    .el-button {
      width: 80px; // 按钮统一宽度，美观
      margin: 0 4px; // 按钮之间的小间距
    }
  }

  // 可选：添加弹框圆角+轻微阴影，更贴近截图视觉效果
  .el-dialog__wrapper .el-dialog {
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
