<template>
  <div class="yhzx-box" style="height: calc(100vh - 65px)">
    <!-- <Nav style="position: sticky;" /> -->
    <div style="display: flex; height: 100%">
      <div style="height: 100%">
        <template>
          <div style="height: 100%" class="htglMenu">
            <t-menu style="width: 220px; background: #fff" v-model="activeMenuId" :collapsed="collapsed" :defaultExpanded="expanded" @change="gotoPage">
              <div class="title">用户中心</div>
              <!-- 循环实现 -->
              <template v-for="item in cdList">
                <t-menu-item v-if="!item.children" :value="item.id" :title="item.title" :key="item.id">
                  <template #icon>
                    <t-icon :name="item.icon" />
                  </template>
                  {{ item.title }}
                </t-menu-item>
                <t-submenu v-else :value="item.id" :title="item.title" :key="item.id">
                  <template #icon>
                    <t-icon :name="item.icon" />
                  </template>
                  <t-menu-item v-for="submenu in item.children" :value="submenu.id" :key="submenu.id">
                    {{ submenu.title }}
                  </t-menu-item>
                </t-submenu>
              </template>
            </t-menu>
          </div>
        </template>
      </div>
      <div style="position: relative; width: 100%; height: 100%; overflow: auto">
        <div class="htglLeft">
          <!-- <component :is="activeCompo" v-if="iskxt" :sfHtgl="true" @changeComponent="changeComponent" />
          <iframe ref="myIframe" v-else :src="iFrameSrc" style="width: 100%; height: 100%" class="iframe-container">
          </iframe> -->
          <!-- <qyrz/> -->
          <!-- <xzmbgl v-if="activeCompo === 'xzmbgl'" @changeComponent="changeComponent" /> -->
          <iframe v-if="iframeUrl" :src="iframeUrl" width="100%" height="100%" frameborder="0" scrolling="yes">
          </iframe>
          <keep-alive v-else>
            <router-view />
          </keep-alive>
        </div>
      </div>
    </div>
    <!-- <Footer /> -->
  </div>
</template>

<script>
import Nav from '@/pages/index/components/nav/index.vue';
import Footer from '@/pages/index/components/footer/index.vue';
import { menuList } from './config';
import api from '../../api/yhzx/index';
import qyrz from '../qyrz/index.vue';
import qyrz1 from '../qy-rz/index.vue';
import tfwgj from '../gxfb/tfwgj.vue';
import tfwxq from '../gxfb/tfwxq.vue';
import ggwhgl from '../ggwhglHtgl/index.vue';
import lsjy from '../lsjy/lsjy.vue';
export default {
  components: {
    Nav,
    Footer,
    qyrz,
    qyrz1,
    tfwgj,
    tfwxq,
    ggwhgl,
    lsjy
  },
  data() {
    return {
      iskxt: true,
      grxxShow: false,
      hoverxxzxTimeout: null,
      menuList,
      activeCompo: 'gzt', // 默认
      collapsed: false,
      expanded: ['gzt'],
      defaultValue: 'gzt',
      cdList: [
        {
          id: 'gzt',
          title: '工作台',
          icon: 'user',
          name: 'gzt',
        },
        {
          id: 'qyrenzheng',
          title: '企业认证',
          icon: 'user',
          name: 'qyrenzheng',
        },
        {
          id: 'qyruzhu',
          title: '企业入驻',
          icon: 'user',
          name: 'qyruzhu',
        },
        {
          id: 'tfwgj',
          title: '碳服务供给',
          icon: 'user',
          name: 'tfwgj',
        },
        {
          id: 'tfwxq',
          title: '碳服务需求',
          icon: 'user',
          name: 'tfwxq',
        },
        {
          id: 'ggwhgl',
          title: '消息中心',
          icon: 'user',
          name: 'ggwhgl',
        },
        {
          id: 'lsjy',
          title: '绿色交易',
          icon: 'user',
          name: 'lsjy',
        }, {
          id: 'zljggl',
          title: '质证结果管理',
          icon: 'user',
          name: 'zljggl',
          iframeUrl: "https://ctn-web-pre.lingshu.net/proof-result-mgt?type=carbon-certify",
        },
        {
          id: 'cunzhengjilu',
          title: '存证记录管理',
          icon: 'user',
          name: 'cunzhengjilu',
          iframeUrl: "https://ctn-web-pre.lingshu.net/cert-record-mgt",
        }, {
          id: 'tgjlgl',
          title: '托管记录管理',
          icon: 'user',
          name: 'tgjlgl',
          iframeUrl: "https://ctn-web-pre.lingshu.net/hosting-record-mgt",
        }, {
          id: 'chazhengjilu',
          title: '查证记录管理',
          icon: 'user',
          name: 'chazhengjilu',
          iframeUrl: "https://ctn-web-pre.lingshu.net/query-record-mgt",
        },
      ],
      ejcdList: [],
      iFrameSrc: '',
      zljgglurl: 'https://ctn-web-pre.lingshu.net/proof-result-mgt?type=carbon-certify',

      iframeUrl: "",
      activeMenuId: "gzt",

    };
  },
  created() {


  },
  activated() {
    console.log("glxtSy.vue,created==>", this.$route)
    // this.initView();
    let cdId = this.cdList[0].id;
    const activeCompo = this.$route.query.activeCompo;
    if (activeCompo) {
      // this.changeHandler(activeCompo);
      cdId = activeCompo;
    }

    this.activeMenuId = cdId;
    this.gotoPage(cdId);
  },
  methods: {
    gotoPage(menuId) {

      const menu = this.cdList.find((item) => item.id == menuId)

      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;
      let iframeUrl = menu.iframeUrl;
      if (iframeUrl) {
        this.iframeUrl = iframeUrl;
      } else {
        this.iframeUrl = "";
        this.$nextTick(() => {
          this.$router.push({
            path: "/yhzx/" + menu.name
          })
        })
      }
    },



    async yhinit() {
      try {
        // const res = await getMxjbxx(prame);
        const { data } = await api.init();
        window.sessionStorage.setItem('yhxx', JSON.stringify(data));
      } catch (error) {
        console.error('数据加载失败', error);
      }
    },
    async initView() {
      try {
        const params = 'ZZJGGL_URL';
        const { data } = await api.dm2mc(params);
        console.log('initView', data);
        this.zljgglurl = data;
      } catch (err) {

      } finally {
        // console.log('newUrl', this.$route.query?.activeCompo);
        if (this.$route.query?.activeCompo) {
          this.activeCompo = this.$route.query.activeCompo;
          this.expanded = [this.activeCompo];
          this.defaultValue = this.activeCompo;
          this.changeHandler(this.activeCompo);
        }
      }

    },

    exit() {
      logout();
      const { href } = window.location;
      window.location.href = href.substring(0, href.indexOf('/znsb/view')).concat('/tf/view/ptgl/login');
    },

    grxxisShow() {
      if (!this.hoverxxzxTimeout) {
        this.hoverxxzxTimeout = setTimeout(() => {
          this.grxxShow = true;
        }, 500);
      }
    },
    headMouseLeave() {
      clearTimeout(this.hoverxxzxTimeout);
      this.hoverxxzxTimeout = null;
      this.grxxShow = false;
    },
    changeHandler(active) {
      console.log('change', active);
      // sessionStorage.removeItem('lclsearchList');
      // sessionStorage.removeItem('jblsearchList');
      if (active == 'zljggl') {
        this.iskxt = false;
        this.iFrameSrc = this.zljgglurl;
      } else {
        this.iskxt = true;
        this.activeCompo = active;
      }
    },
    xgmm() {
      this.activeCompo = 'xgmm';
    },
    changeComponent(v) {
      if (v == 'zdyshEdit') {
        this.activeCompo = 'zdyshEdit';
      }
      if (v == 'zdysh') {
        this.activeCompo = 'zdysh';
      }
      if (v == 'mxrz') {
        this.activeCompo = 'mxrz';
      }
    },
    formatDataListForTree() {
      const arr = [];
      // 1、遍历
      this.cdList.forEach((item) => {
        // this.$set(item, 'value', item.gnDm);

        const children = [];
        this.ejcdList.forEach((a) => {
          if (a.sjgnDm && a.sjgnDm == item.id) {
            const child = {};
            child.id = a.gnDm;
            child.title = a.gnmc;
            child.value = a.gnDm;
            children.push(child);
          }
        });
        if (children.length > 0) {
          item.children = children;
        }
        // 将item项，追加到arr数组中
        arr.push(item);
      });

      return arr;
    },
  },
};
</script>
<style lang="less">
.title {
  padding: 8px 16px 16px;
  font-size: 18px;
  // font-weight: 500;
  font-weight: bold;
  color: #2e7d32;
}

.hederLeft {
  float: right;
  width: 60px;
  height: 100%;
  margin-right: 16px;
}

.user_pic {
  width: 36px;
  height: 36px;
  margin-top: 7px;
  margin-left: 8px;
  cursor: pointer;
  border-radius: 50px;
}

.htglLeft {
  // width: calc(100vw - 220px);
  height: 100%;
  // padding: 10px;
  overflow: auto;
  // background-color: rgb(238, 238, 238);
}

.grxxHt {
  position: absolute;
  top: 50px;
  right: 0;
  z-index: 99;
  width: 150px;
  background-color: #fff;
  background-color: white;
  border-radius: 2px;
  box-shadow: 0 6px 6px 5px #0000000f;
}

.grxxHt h6 {
  display: block;
  width: 100%;
  height: 35px;
  padding: 8px;
  padding-left: 32px;
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
  color: #333;
  cursor: pointer;
}

.grxxHt h6:hover {
  background: #cee2ff;
}

.topheader {
  width: calc(100vw - 220px);
  height: 50px;
}

.menuspan {
  margin-left: 8px;
}
.htglLeft::-webkit-scrollbar {
  display: none;
}
.iframe-container {
  border: none;
}
.yhzx-box {
  overflow: auto;
}
.yhzx-box::-webkit-scrollbar {
  display: none;
}
</style>
