<template>
  <!-- 顶部菜单栏 -->
  <div class="nav-box">
    <div class="logo-box" @click="goHome">
      <img src="@/pages/index/assets/logo-name.png">
    </div>
    <div class="menu-box">

      <div v-for="(menu,index) in menuOptions" :key="index">
        <t-dropdown v-if="menu.child" trigger="hover" :options="menu.child" @click="handleDropdownClick">
          <div class="menu-title" :class="{'meun-title-active': curPage == menu.name ,'meun-title-disable':menu.disable}" @click="gotoIfreamPage(menu)">
            <!-- <img v-if="menu.icon" :src="menu.icon" width="24px" height="24px" style="margin-right:10px"> -->
            <span> {{menu.title}} </span>
          </div>
        </t-dropdown>
        <div v-else class="menu-title" :class="{'meun-title-active': curPage == menu.name ,'meun-title-disable':menu.disable}" @click="gotoIfreamPage(menu)">
          <!-- <img v-if="menu.icon" :src="menu.icon" width="24px" height="24px" style="margin-right:10px"> -->
          <span> {{menu.title}} </span>
        </div>
      </div>

    </div>
    <div class="option-wrapper">
      <div v-if="loginFlag" class="option-box">
        <!-- <div class="gzt" @click="goyhzx">
          <img src="@/pages/index/assets/home-gzt-icon.png" />
          <span> 工作台</span>
        </div> -->
        <div style="margin-left:20px; cursor: pointer;" @click="goyhzx">企业工作台</div>
        <div>|</div>
        <div style="cursor: pointer;" @click="logoutHandler">退出登录</div>
      </div>
      <div v-else class="option-box">
        <!-- <div class="gzt">
          <img src="@/pages/index/assets/home-gzt-icon.png" />
          <span> 工作台</span>
        </div> -->
        <!-- <div style="margin-left:20px; cursor: pointer;">激活</div>
        <div>|</div> -->
        <div style="cursor: pointer;" @click="gologin">登录</div>
      </div>
    </div>
    <!-- 移动端汉堡菜单按钮 -->
    <div class="hamburger-btn" @click="toggleMobileMenu">
      <div :class="['hamburger-icon', { active: mobileMenuOpen }]">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <!-- 移动端菜单 -->
    <div :class="['mobile-menu', { open: mobileMenuOpen }]">
      <div class="mobile-menu-overlay" @click="toggleMobileMenu"></div>
      <div class="mobile-menu-content">
        <div class="mobile-menu-header">
          <img src="@/pages/index/assets/logo-name.png">
          <div class="close-btn" @click="toggleMobileMenu">×</div>
        </div>
        <div class="mobile-menu-list">
          <div v-for="(menu, index) in menuOptions" :key="index">
            <!-- 有子菜单的项 -->
            <t-dropdown v-if="menu.child" trigger="click" :options="menu.child" @click="handleMobileDropdownClick">
              <div class="mobile-menu-item" :class="{'active': curPage == menu.name}">
                <img v-if="menu.icon" :src="menu.icon" width="20px" height="20px">
                <span>{{ menu.title }}</span>
                <img class="arrow" src="@/pages/index/assets/home-arrow-right.png" width="16px" height="16px">
              </div>
            </t-dropdown>
            <!-- 无子菜单的项 -->
            <div v-else class="mobile-menu-item" :class="{'active': curPage == menu.name, 'disable': menu.disable}" @click="gotoIfreamPage(menu)">
              <img v-if="menu.icon" :src="menu.icon" width="20px" height="20px">
              <span>{{ menu.title }}</span>
              <img class="arrow" src="@/pages/index/assets/home-arrow-right.png" width="16px" height="16px">
            </div>
          </div>
        </div>
        <div class="mobile-menu-footer">
          <div v-if="loginFlag" class="mobile-auth-btns">
            <div class="mobile-auth-btn" @click="goyhzx">用户中心</div>
            <div class="mobile-auth-btn logout" @click="logoutHandler">退出登录</div>
          </div>
          <div v-else class="mobile-auth-btns">
            <div class="mobile-auth-btn activate">激活</div>
            <div class="mobile-auth-btn login" @click="gologin">登录</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { logout, authorize, init } from '@/pages/index/api/login';
import api from '@/pages/index/api/gxzx/index.js';

export default {
  name: 'Nav',
  props: {

  },
  data() {
    return {
      curPage: "home",
      loginFlag: false, //是否已完成登录
      mobileMenuOpen: false, //移动端菜单是否展开
      // 路由路径到菜单名的映射
      routeToMenuMap: {
        '/home': 'home',
        '/fwsc': 'fwsc',
        '/tfwsc': 'fwsc',
        '/txqsc': 'fwsc',
        '/tjrsc': 'fwsc',
        '/tsjsc': 'fwsc',
        '/yhzx': 'yhzx',
        '/gxnlpt': 'gxnlpt',
        '/qych': 'qych',
        '/hyzt': 'hyzt',
        '/login': 'login',
      },

      menuOptions: [
        {
          name: 'home',
          title: '首页',
          icon: require('@/pages/index/assets/nav-home.png'),
        },
        {
          name: 'tzzx',
          title: '碳证中心',
          iframeUrl: 'https://ctn-web-pre.lingshu.net/carbon-index',
          needLogin: true,
          clientId: 'client_id_tfwzx',//单点登录接入子系统的标识，由txw_sso_client表配置
          child: [
            {
              name: 'tzcx',
              title: '碳证查询',
              value: 'tzcx', //菜单显示需要，同name
              content: '碳证查询', //菜单显示需要，同title
              divider: true, //是否显示子菜单分割线
              needLogin: true, //是否需要登录才能访问
              clientId: 'client_id_tfwzx',
              iframeUrl: 'https://ctn-web-pre.lingshu.net/trustedCarbonQuery/index', //外部系统链接地址
              // iframeUrl: 'https://ctn-web-pre.lingshu.net/trustedCarbonQuery/list?type=carbon-query', //外部系统链接地址
            },
            {
              name: 'tsjfcg',
              title: '碳数据防篡改',
              value: 'tsjfcg',
              content: '碳数据防篡改',
              divider: true,
              needLogin: true,
              clientId: 'client_id_tfwzx',
              iframeUrl: 'https://ctn-web-pre.lingshu.net/carbon-protection',
            },
            {
              name: 'tzhy',
              title: '碳证核验',
              value: 'tzhy',
              content: '碳证核验',
              divider: true,
              needLogin: true,
              clientId: 'client_id_tfwzx',
              iframeUrl: 'https://ctn-web-pre.lingshu.net/carbon-verify',
            },
            {
              name: 'tgbcz',
              title: '碳报告存证',
              value: 'tgbcz',
              content: '碳报告存证',
              divider: true,
              needLogin: true,
              clientId: 'client_id_tfwzx',
              iframeUrl: 'https://ctn-web-pre.lingshu.net/carbon-report-cert',
            },
            {
              name: 'tbgtg',
              title: '碳报告托管：',
              value: 'tgbcz',
              content: '碳报告托管',
              divider: true,
              needLogin: true,
              clientId: 'client_id_tfwzx',
              iframeUrl: 'https://ctn-web-pre.lingshu.net/carbon-report-hosting',
            }
          ]
        },
        {
          name: 'fwsc',
          title: '服务中心',
          child: [
            {
              name: 'tfwsc',
              title: '碳服务市场',
              value: 'tfwsc',
              content: '碳服务市场',
              divider: true,
            },
            {
              name: 'tjrsc',
              title: '碳金融市场',
              value: 'tjrsc',
              content: '碳金融市场',
              divider: true,
              parentName: 'fwsc',
            }, 
            {
              name: 'txqsc',
              title: '碳需求市场',
              value: 'txqsc',
              content: '碳需求市场',
              divider: true,
            },
            {
              name: 'tsjsc',
              title: '碳数据市场',
              value: 'tsjsc',
              content: '碳数据市场',
              divider: true,
            },
            // {
            //   name: 'fwscsjlbc',
            //   title: '数据列表',
            //   value: 'fwscsjlbc',
            //   content: '数据列表',
            //   divider: true,
            // }
          ]
        },
        {
          name: 'gxnlpt',
          title: '共性能力',
          // disable: true
        },
        {
          name: 'qych',
          title: '企业出海',
          // disable: true
        },
        {
          name: 'hyzt',
          title: '行业专题',
          // disable: true
        },
      ]
    };
  },

  created() {
    // this.gettfwzxurl();
  },
  mounted() {
    // this.gettfwzxurl();
    console.log('newUrl', this.$route);
    this.newUrl = this.$route.query.newUrl;
    this.nowurl = this.newUrl || '/view/mhzc/home';
    if (this.$route.name == 'yhzx') {
      this.nowurl = '/yhzx';
    }
    if (this.$route.name == 'newsCenter') {
      this.nowurl = '/yhzx';
    }

    const sfdl = window.sessionStorage.getItem('sfdl');
    if (sfdl) {
      this.loginFlag = true;
      // this.getWdxxCount();
    } else {
      this.loginFlag = false;
    }

    // 初始化时根据当前路由更新菜单选中状态
    this.updateCurPageByRoute();
  },
  watch: {
    $route: {
      handler() {
        this.updateCurPageByRoute();
      },
      immediate: false,
    },
  },
  beforeUnmount() { },
  methods: {
    // 切换移动端菜单
    toggleMobileMenu() {
      this.mobileMenuOpen = !this.mobileMenuOpen;
      document.body.style.overflow = this.mobileMenuOpen ? 'hidden' : '';
    },
    // 关闭移动端菜单
    closeMobileMenu() {
      this.mobileMenuOpen = false;
      document.body.style.overflow = '';
    },
    // 返回首页
    goHome() {
      this.$router.push('/home');
      this.closeMobileMenu();
    },
    // 移动端子菜单点击
    handleMobileDropdownClick(menu) {
      this.handleDropdownClick(menu);
      this.closeMobileMenu();
    },
    // 根据当前路由更新菜单选中状态
    updateCurPageByRoute() {
      const path = this.$route.path;
      const routeName = this.$route.name;

      // 优先精确匹配路径
      if (this.routeToMenuMap[path]) {
        this.curPage = this.routeToMenuMap[path];
        return;
      }

      // 处理带query参数的路径（如 /gxnlpt?anchor=content-1）
      const pathWithoutQuery = path.split('?')[0];
      if (this.routeToMenuMap[pathWithoutQuery]) {
        this.curPage = this.routeToMenuMap[pathWithoutQuery];
        return;
      }

      // 尝试从路径中提取关键部分进行匹配
      if (path.includes('tfwsc') || path.includes('txqsc') || path.includes('tjrsc') || path.includes('tsjsc')) {
        this.curPage = 'fwsc';
        return;
      }

      // 如果都匹配不到，默认选中首页
      this.curPage = 'home';
    },
    //子菜单点击方法
    handleDropdownClick(menu) {
      this.gotoIfreamPage(menu); // 直接把子菜单项传入跳转方法
    },

    gotoIfreamPage(menu) {
      console.log("当前菜单配置：", menu)

      //判断页面是否开放
      if (menu.disable) {
        this.$dialog.alert({
          header: '提示',
          body: '该功能暂未开放。',
          confirmBtn: null
        })
        return
      }
      //判断页面是否需要登录
      console.log("当前页面是否需要登录：", menu.needLogin)
      if (menu.needLogin) {
        const sfdl = window.sessionStorage.getItem('sfdl'); //是否登录
        console.log("是否已经登录登录：", sfdl)
        if (!sfdl) {
          this.$router.push("/login")
          return
        }
      }

      this.curPage = menu.name;
      // 关闭移动端菜单
      this.closeMobileMenu();
      let iframeUrl = menu.iframeUrl;
      if (iframeUrl) {
        //调用login.js内的authorize方法
        this.$emit('gotoIfreamPage', iframeUrl);
      } else {
        this.$emit('gotoPage', this.curPage);
      }
    },

    gonewCenter() {
      window.location.href = `/view/mhzc/yhzx?activeCompo=ggwhgl`;
    },
    async getWdxxCount() {
      try {
        // const res = await getMxjbxx(prame);
        const { data } = await api.getWdxxCount();
        this.xxtxCount = data;
        console.log('res', data);
      } catch (error) {
        this.xxtxCount = 0;
        console.error('数据加载失败', error);
      }
    },
    async gettfwzxurl() {
      try {
        // const res = await getMxjbxx(prame);
        const { data } = await api.tfwzxurl();
        this.kxurl = data.kxtfwzx;
        console.log('res', data);
      } catch (error) {
        console.error('数据加载失败', error);
      }
    },
    gologin() {
      this.closeMobileMenu();
      this.$router.push("/login")
      // window.location.href = `/view/mhzc/login`;
    },

    goyhzx() {
      this.curPage = ""; //进入工作台之后：nav菜单取消active
      this.closeMobileMenu();
      this.$router.push("/yhzx/gzt")
      // window.location.href = `/view/mhzc/yhzx`;
    },


    goSelfChange(menuParams) {
      const sfdl = window.sessionStorage.getItem('sfdl');
      if (!sfdl) {
        if (menuParams == this.kxurl) {
          window.location.href = `/view/mhzc/login`;
          return;
        }
        if (menuParams == '/view/gxzx/gxzx') {
          window.location.href = `/view/mhzc/login`;
          return;
        }
      }
      console.log(11111, this.nowurl, menuParams);
      this.nowurl = menuParams;
      if (menuParams == '/view/mhzc/home') {
        window.location.href = `/view/mhzc/home`;
        return;
      }
      console.log('menuParams', menuParams);
      // return
      this.$router.replace({
        path: '/mhsy/mhNewMain',
        name: 'mhNewMain', // name为必填项，没有则参数无法传递
        query: {
          newUrl: menuParams,
          // parmasStr: menuParams.menuParmasStr,
        },
      });
      // return;
      if (this.newUrl) {
        window.location.reload();
      }
    },
    grxxisShow() {
      if (!this.hoverxxzxTimeout) {
        this.hoverxxzxTimeout = setTimeout(() => {
          this.grxxShow = true;
        }, 500);
      }
    },
    headMouseLeave() {
      clearTimeout(this.hoverxxzxTimeout);
      this.hoverxxzxTimeout = null;
      this.grxxShow = false;
    },

    async logoutHandler() {
      this.closeMobileMenu();
      const res = await logout();
      const resVO = res.data;
      if (resVO.dcdz) {
        resVO.forEach((item) => {
          const { token } = item;
          const { dcdz } = item;
          axios.get(
            dcdz,
            {},
            {
              headers: {
                'Admin-Token': token,
              },
            },
          );
        });
      }
      sessionStorage.removeItem('sfdl');
      sessionStorage.removeItem('yhxx');
      window.location.href = `/view/mhzc/login`;
    },
  },
};
</script>
<style lang="css" scoped>
.nav-box {
  position: fixed;
  top: 0px;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  border-radius: 0 0 12px 12px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  place-items: center;

  color: #003B1A;

  z-index: 9999;
}
.logo-box {
  text-align: center;
  cursor: pointer;
}

.option-wrapper {
  display: block;
}

.option-box {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  height: 64px;
  font-family: PingFang SC;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  leading-trim: NONE;
  letter-spacing: 0%;
}

.option-box .gzt {
  padding: 10px;
  text-align: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
}

.menu-box {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  height: 64px;
  font-size: 16px;
  gap: 10px;
}

.menu-title {
  width: 96px;
  height: 64px;
  text-align: center;
  line-height: 24px;

  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.meun-title-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 100%);
  border-bottom: 2px solid #003B1A;
  font-weight: 600;
}

.meun-title-disable {
  cursor: not-allowed !important;
}

/* 汉堡菜单按钮 */
.hamburger-btn {
  display: none;
  padding: 10px;
  cursor: pointer;
}

.hamburger-icon {
  position: relative;
  width: 24px;
  height: 18px;
}

.hamburger-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #003B1A;
  transition: all 0.3s ease;
}

.hamburger-icon span:nth-child(1) {
  top: 0;
}

.hamburger-icon span:nth-child(2) {
  top: 8px;
}

.hamburger-icon span:nth-child(3) {
  top: 16px;
}

.hamburger-icon.active span:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}

.hamburger-icon.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-icon.active span:nth-child(3) {
  top: 8px;
  transform: rotate(-45deg);
}

/* 移动端菜单 */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  visibility: hidden;
  transition: visibility 0.3s ease;
}

.mobile-menu.open {
  visibility: visible;
}

.mobile-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.mobile-menu-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: 280px;
  max-width: 85%;
  height: 100%;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  flex-direction: column;
}

.mobile-menu.open .mobile-menu-content {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.9);
}

.mobile-menu-header img {
  height: 32px;
}

.close-btn {
  font-size: 32px;
  line-height: 1;
  color: #003B1A;
  cursor: pointer;
}

.mobile-menu-list {
  padding: 10px 0;
  overflow-y: auto;
  flex: 1;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  gap: 10px;
}

.mobile-menu-item img {
  width: 20px;
  height: 20px;
}

.mobile-menu-item .arrow {
  margin-left: auto;
  opacity: 0.5;
}

.mobile-menu-item.active {
  color: #009a29;
  background: #f0f9f0;
}

.mobile-menu-item.disable {
  color: #999;
  cursor: not-allowed;
}

.mobile-menu-footer {
  padding: 16px 20px;
  background: #fafafa;
  border-top: 1px solid #eee;
}

.mobile-auth-btns {
  display: flex;
  gap: 10px;
}

.mobile-auth-btn {
  padding: 10px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: #009a29;
  border-radius: 6px;
  flex: 1;
}

.mobile-auth-btn.activate {
  color: #333;
  background: #f0f0f0;
}

.mobile-auth-btn.logout {
  color: #666;
  background: #fff;
  border: 1px solid #ddd;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .nav-box {
    height: 56px;
    grid-template-columns: 1fr auto auto;
    padding: 0 16px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.95);
  }

  .menu-box {
    display: none;
  }

  .option-wrapper {
    display: none;
  }

  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    cursor: pointer;
  }

  .hamburger-icon {
    position: relative;
    width: 24px;
    height: 18px;
  }

  .hamburger-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #003B1A;
    transition: all 0.3s ease;
  }

  .hamburger-icon span:nth-child(1) {
    top: 0;
  }

  .hamburger-icon span:nth-child(2) {
    top: 8px;
  }

  .hamburger-icon span:nth-child(3) {
    top: 16px;
  }

  .hamburger-icon.active span:nth-child(1) {
    top: 8px;
    transform: rotate(45deg);
  }

  .hamburger-icon.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-icon.active span:nth-child(3) {
    top: 8px;
    transform: rotate(-45deg);
  }

  .logo-box {
    text-align: left;
  }

  .logo-box img {
    height: 32px;
  }
}

@media (max-width: 480px) {
  .nav-box {
    padding: 0 12px;
  }

  .hamburger-btn {
    padding: 10px;
  }

  .logo-box img {
    height: 28px;
  }
}
</style>
