<template>
  <el-container class="app-wrapper">
    <!-- 顶部导航 -->
    <el-header height="60px" class="app-header">
      <div class="header-left">
        <div @click="_toIndex">{{ systemInfo.systemSimpleTitle }}</div>
        <el-menu mode="horizontal" :default-active="activeMenu" class="header-menu" background-color="#1e2132"
          text-color="#fff" active-text-color="#409EFF">
          <template v-for="(item, index) in catalogs">
            <el-menu-item :index="item.caId" v-if="!item.privId || hasPrivilege(item.privId)" :key="index"
              @click="_changeMenuCatalog(item, true)">{{ item.name }}</el-menu-item>
          </template>
        </el-menu>
      </div>
      <div class="header-right">
        <el-dropdown @command="changeCommunity" v-if="storeInfo.storeTypeCd == '800900000003'" class="margin-right">
          <span class="user-info">
            {{ curCommunityName }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="c" v-for="(c, index) in communitys" :key="index">{{ c.name }}</el-dropdown-item>
            <el-dropdown-item command="moreCommunity" class="moreCommunity">{{ $t('layout.moreCommunity')
              }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown @command="handleCommand">
          <span class="user-info">
            {{ username }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">{{ $t('layout.logout') }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span class="margin-left">{{ systemInfo.version }}</span>

      </div>
    </el-header>

    <el-container>
      <!-- 左侧菜单 width="64px"-->
      <el-aside class="app-aside" width="80">
        <div class="vc-menu flex justify-start" id="menu-nav">
          <div class="vc-menu-main">
            <ul>
              <template v-for="(menu, index) in menuTree">
                <li :key="index" v-if="menu.childs && menu.childs.length > 0" :class="{ active: menu.active }"
                  @click="switchMenu(menu)">
                  <i class="fa " v-bind:class="menu.icon"></i><span class="margin-left-xs">{{ menu.name }}</span>
                </li>
              </template>
            </ul>
          </div>
          <div class="vc-menu-sub" v-if="subMenus && subMenus.length > 0">
            <ul>
              <li class="title">{{ curMenuName }}</li>
              <template v-for="(subMenu, index) in subMenus">
                <li :key="index" v-if="subMenu.isShow == 'Y'" :class="{ active: subMenu.active }"
                  v-on:click="_gotoPage(subMenu.href, subMenu.name)">
                  {{ subMenu.name }}
                </li>
              </template>
              <li class="sub-footer" @click="_closeSubMenu()"><i class="fa fa-dedent"></i></li>
            </ul>
          </div>
        </div>
      </el-aside>

      <!-- 主要内容区 -->
      <el-main class="app-main">
        <!-- 多标签页：单行不换行 -->
        <div class="tabs-wrap" v-if="visitedTabs.length > 0">
          <div class="tabs-list">
            <div
              v-for="tab in visitedTabs"
              :key="tab.path"
              :class="['tabs-item', { active: $route.path === tab.path }]"
              @click="goTab(tab)"
            >
              <span class="tabs-item-title">{{ tab.titleKey ? $t(tab.titleKey) : tab.title }}</span>
              <i class="el-icon-close tabs-item-close" @click.stop="removeTab(tab)" v-if="visitedTabs.length > 1"></i>
            </div>
          </div>
          <el-button type="text" size="mini" class="tabs-close-all" @click="closeAllTabs">
            {{ $t('layout.closeAllTabs') }}
          </el-button>
        </div>
        <router-view />
      </el-main>
    </el-container>
    <more-community ref="moreCommunity" />
    <view-menu-user-list ref="viewMenuUserModel" />
    <search-community-data-list ref="searchCommunityDataModel" />
  </el-container>
</template>

<script>
import { _getMenuCatalog, getMenuTree, jumpToMall, jumpToIot } from '@/api/user/menuApi'
import { getStoreInfo } from "@/api/user/indexApi"
import { listSystemInfo } from '@/api/system/systemInfoManageApi'
import { deepCopy, setCurrentCommunity } from "@/utils/vc"
import { getCommunityName, _loadCommunityInfo } from '@/api/community/communityApi'
import moreCommunity from '@/components/community/moreCommunity.vue'
import viewMenuUserList from '@/components/system/viewMenuUserList.vue'
import searchCommunityDataList from '@/components/system/searchCommunityDataList.vue'
import { initSystem } from '@/api/util/vcApi'
import config from '@/conf/config'

export default {
  name: 'Layout',
  data() {
    return {
      catalogs: [],
      menuTree: [],
      subMenus: [],
      menuWidth: 80,
      menuId: '',
      curMenuName: '',
      activeMenu: '',
      activeSubMenu: 'communityList',
      searchText: '',
      username: '',
      curCommunityName: '',
      communitys: [],
      storeInfo: {
        storeTypeCd: '',
        storeId: ''
      },
      systemInfo: {
        systemSimpleTitle: '',
        companyName: '',
        logoUrl: '',
        version: ''
      },
      visitedTabs: [] // 已打开的页面 { path, titleKey?, title? }
    }
  },
  watch: {
    $route: {
      handler(route) {
        if (!route.path || route.path === '/views/user/login' || route.path === '/login') return
        const path = route.path
        const exists = this.visitedTabs.some(t => t.path === path)
        if (!exists) {
          const info = this.getTabTitle(path, route.meta || {})
          if (info) this.visitedTabs.push({ path, ...info })
        }
      },
      immediate: true
    }
  },
  created() {
    let _user = JSON.parse(localStorage.getItem('user'));
    this.username = _user.name
    this.systemInfo.version = config.version
    this.getSystemInfo()
    this._loadStoreInfo()
    this.loadCatalogs()
    this.curCommunityName = getCommunityName()
    this.loadCommunity()
    initSystem()
  },
  components: {
    moreCommunity,
    viewMenuUserList,
    searchCommunityDataList
  },
  methods: {
    // 标签页名称：仅当路由配置了 meta.title 或 meta.titleKey 时才展示该标签
    getTabTitle(path, meta) {
      if (path === '/views/index/index' || path === '/') {
        return { titleKey: 'layout.home' }
      }
      const m = meta || {}
      if (m.title) return { title: m.title }
      if (m.titleKey) return { titleKey: m.titleKey }
      return null
    },
    goTab(tab) {
      if (this.$route.path === tab.path) return
      this.$router.push(tab.path).catch(() => {})
    },
    removeTab(tab) {
      const list = this.visitedTabs.filter(t => t.path !== tab.path)
      this.visitedTabs = list
      if (this.$route.path === tab.path) {
        const next = list.length ? list[list.length - 1] : { path: '/views/index/index' }
        this.$router.push(next.path).catch(() => {})
      }
    },
    closeAllTabs() {
      this.visitedTabs = []
      this.$router.push('/views/index/index').catch(() => {})
    },
    async getSystemInfo() {
      const { data } = await listSystemInfo({ page: 1, row: 1 });
      this.systemInfo.systemSimpleTitle = data[0].systemSimpleTitle
      this.systemInfo.companyName = data[0].companyName
      this.systemInfo.logoUrl = data[0].logoUrl
    },
    async loadCommunity() {
      const { communitys } = await _loadCommunityInfo()
      this.communitys = communitys
      this.curCommunityName = getCommunityName()

    },
    async _loadStoreInfo() {
      this.loading = true
      try {
        const res = await getStoreInfo()
        deepCopy(res, this.storeInfo);
      } catch (error) {
        console.error('登录失败：', error)
      } finally {
        this.loading = false
      }

    },
    async loadCatalogs() {
      this.loading = true
      try {
        const res = await _getMenuCatalog()
        if (res.code != 0) {
          return;
        }
        this.catalogs = res.data;
        if (this.catalogs && this.catalogs.length > 0) {
          this._changeMenuCatalog(this.catalogs[0])
        }
      } catch (error) {
        console.error('登录失败：', error)

      } finally {
        this.loading = false
      }
    },
    _changeMenuCatalog(_catalog, _isJump) {
      this.activeMenu = _catalog.caId;
      if (this._showModelDiv(_catalog)) {
        return;
      }
      if (_catalog.caId === '1') {
        this.$router.push('/#/pages/mall/product');
      }
      if (_catalog.url == 'IOT') {
        jumpToIot('/');
        return;
      }
      if (_catalog.url == 'MALL') {
        //获取用户名
        jumpToMall('/');
        return;
      }
      console.log(_catalog)
      if (_catalog.url != '#' && _isJump) {
        this._gotoPage(_catalog.url, _catalog.name)
        //return;
      }
      this.loadMenuTree(_catalog)
    },

    handleCommand(command) {
      if (command === 'logout') {
        // 处理退出登录

        localStorage.removeItem('token')
        localStorage.clear();
        this.$router.push('/login')
      } else if (command === 'zh' || command === 'en') {
        // 切换语言
        this.$i18n.locale = command
        localStorage.setItem('language', command)
      }
    },
    changeCommunity(community) {
      if (community == 'moreCommunity') {
        this.$refs.moreCommunity.open()
        return
      }
      setCurrentCommunity(community);
      this.curCommunityName = getCommunityName()
      window.location.href = "/"
    },
    handleMenuSelect(index) {
      // 处理菜单选择
      this.$router.push({ name: index })
    },
    loadMenuTree(_catalog) {
      getMenuTree(_catalog).then(res => {
        let _menus = res.data;
        _menus.sort(function (a, b) {
          return a.seq - b.seq
        });
        this.menuTree = _menus;
      })
    },
    switchMenu(_menu) {
      //设置菜单ID
      this.menuId = _menu.id;
      this.menuTree = this.refreshMenuActive(this.menuTree, _menu.id);
      this.subMenus = _menu.childs;
      console.log(this.subMenus)
      this.curMenuName = _menu.name;

      if (!_menu.childs || _menu.childs.length < 1) {
        return;
      }
      //选中第一个
      this._gotoPage(_menu.childs[0].href, _menu.childs[0].name);
      //vc._fix_height()
    },
    refreshMenuActive(jsonArray, _id) {
      for (let menuIndex = 0; menuIndex < jsonArray.length; menuIndex++) {
        if (jsonArray[menuIndex].childs) {
          let _childs = jsonArray[menuIndex].childs;
          _childs.sort(function (_child, _newChild) {
            return _child.seq - _newChild.seq
          });
          jsonArray[menuIndex].childs = _childs;
        }

        if (_id === jsonArray[menuIndex].id) {
          //如果当前本身是打开状态，说明 需要关闭
          jsonArray[menuIndex].active = true;
          continue;
        }
        jsonArray[menuIndex].active = false;
      }
      return jsonArray;
    },
    _setSelectedMenusChild(_href) {
      for (var menuIndex = 0; menuIndex < this.menuTree.length; menuIndex++) {
        if (this.menuTree[menuIndex].childs) {
          var _childs = this.menuTree[menuIndex].childs;
          for (var childIndex = 0; childIndex < _childs.length; childIndex++) {
            if (_href == _childs[childIndex].href) {
              this.menuTree[menuIndex].childs[childIndex].active = true;
            } else {
              this.menuTree[menuIndex].childs[childIndex].active = false;
            }
          }
        }
      }
      this.$forceUpdate();
    },
    _gotoPage(_href, _tabName) {
      console.log(_href, _tabName)
      // 子菜单默认选中
      this._setSelectedMenusChild(_href);
      if (_href.indexOf('.html') > -1) {
        window.open(_href, '_blank')
        return
      }
      if (_href.indexOf('/#/') > -1) {
        _href = _href.replace('/#/', '/')
      }

      this.$router.push(_href).catch(err => {
        // 忽略重复导航错误
        if (err.name !== 'NavigationDuplicated') {
          throw err
        }
      })
    },
    _showModelDiv: function (_catalog) {
      console.log(_catalog)
      if (_catalog.url.startsWith('?')) {
        let _modelName = _catalog.url.substring(1, _catalog.url.length);
        this.$refs[_modelName].open()
        return true;
      }
      return false;
    },
    _toIndex() {
      location.href = '/'
    },
    _closeSubMenu() {
      this.subMenus = []
      this.curMenuName = ''
    }

  }
}
</script>

<style lang="scss" scoped>
.app-wrapper {
  height: 100vh;
}

.app-header {
  background-color: #1e2132;
  color: #fff;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  width: 100px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  cursor: pointer;
}

.header-menu {
  border: none;
}

.header-right {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.margin-left {
  margin-left: 15px;
  color: #fff;
}

.user-info {
  color: #fff;
  cursor: pointer;
}

.app-aside {
  width: auto;
}

.menu-wrapper {
  height: 100%;
}

.el-menu-vertical {
  border: none;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

.app-main {
  background-color: #f5f7fa;
  height: calc(100vh - 60px);
  padding: 0px;
}

.tabs-wrap {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #ebeef5;
  gap: 8px;
}
.tabs-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
.tabs-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  color: #606266;
  background: #f4f4f5;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tabs-item:hover {
  color: #409EFF;
  background: #ecf5ff;
}
.tabs-item.active {
  color: #409EFF;
  background: #ecf5ff;
  font-weight: 500;
}
.tabs-item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabs-item-close {
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.7;
}
.tabs-item-close:hover {
  opacity: 1;
  color: #f56c6c;
}
.tabs-close-all {
  flex-shrink: 0;
  padding: 4px 8px;
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
}

:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-submenu__title) {
  height: 50px;
  line-height: 50px;
  padding: 0 20px !important;
}

:deep(.el-menu--collapse) {
  width: 64px;
}

:deep(.el-menu--collapse .el-submenu__title) {
  padding: 0 !important;
  text-align: center;
}

:deep(.el-menu--collapse .el-submenu__title i) {
  margin: 0;
  font-size: 20px;
}

:deep(.el-menu--popup) {
  min-width: 200px;
  background-color: #1e2132 !important;
}

:deep(.el-menu--popup .el-menu-item) {
  background-color: #1e2132;
  color: #fff;
}

:deep(.el-menu--popup .el-menu-item:hover) {
  background-color: #2a2f45;
}

:deep(.el-menu--popup .el-menu-item.is-active) {
  color: #409EFF;
}

.vc-menu {
  border-right: 1px solid #EFEFF0;

  .vc-menu-main {
    background-color: #1F2339;
    color: #838A9B;
    text-align: center;
    width: 80px;
    font-size: 14px;
    height: calc(100vh - 60px);
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;

    .active {
      background-color: #3E77FC;
      color: #FFFFFF;
    }
  }

  .vc-menu-main::-webkit-scrollbar {
    display: none;
  }

  ul {
    padding-inline-start: 0px;
    margin: 0;
    padding: 0;
  }

  li {
    margin: 0;
    padding: 0;
  }
}

.moreCommunity {
  font-weight: 600;
  color: #212529;
  font-size: 12px;
}

.vc-menu-main ul li {
  height: 45px;
  line-height: 45px;
  cursor: pointer;
  list-style-type: none;
}

.vc-menu-main ul li:hover {
  background-color: #3E77FC;
  color: #FFFFFF;
}

.vc-menu-main ul li.title {
  color: #FFFFFF;
  height: 60px;
  font-size: 24px;
  line-height: 60px;
}

.vc-menu-main ul li.title a {
  text-decoration: none;
  cursor: pointer;
  color: #FFFFFF;
}

.vc-menu-sub {
  background-color: #FFFFFF;
  color: #545761;
  text-align: start;
  width: 110px;
  font-size: 14px;
  height: calc(100vh - 60px);
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
}

.vc-menu-sub::-webkit-scrollbar {
  display: none;
}

.vc-menu-sub .active {
  background-color: #EAF0FE;
  color: #3E77FC;
}



.vc-menu-sub ul li {
  height: 40px;
  line-height: 40px;
  padding-left: 15px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vc-menu-sub ul li.title {
  color: #4F525C;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  padding-left: 0px;
  border-bottom: 1px solid #F2F2F3;
  margin-bottom: 10px;
}

.vc-menu-sub ul li:hover {
  background-color: #EAF0FE;
  color: #3E77FC;
}

.vc-menu-sub ul li.sub-footer {
  background-color: #F6F6F7;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100px;
}
</style>
