<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<!--    <sidebar class="sidebar-container"/>-->
    <div class="horizontal-menu">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
        :router="true"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">

        <!-- 一级菜单项 -->
        <el-menu-item index="/assetManagement/materialManage">素材管理</el-menu-item>

        <!-- 带子菜单的导航项 -->
        <el-submenu index="2">
          <template slot="title">推广管理</template>
          <el-menu-item index="/intelligentDelivery/account-manager">媒体账号管理</el-menu-item>
          <el-menu-item index="/intelligentDelivery/campaign-task">计划投放</el-menu-item>
          <el-menu-item index="/intelligentDelivery/campaign-template">计划模板</el-menu-item>
        </el-submenu>

        <!-- 带子菜单的导航项 -->
        <el-submenu index="4">
          <template slot="title">资产管理</template>
          <el-menu-item index="/assetManagement/material-group">素材组管理</el-menu-item>
          <el-menu-item index="/assetManagement/resource-group">资源组管理</el-menu-item>
          <el-menu-item index="/assetManagement/copywritingLibrary">文案管理</el-menu-item>
          <el-menu-item index="/assetManagement/app-group">产品组管理</el-menu-item>
          <el-menu-item index="/assetManagement/location-group">地域组管理</el-menu-item>
          <el-menu-item index="/assetManagement/title-group">标题组管理</el-menu-item>
          <el-menu-item index="/assetManagement/description-group">描述组管理</el-menu-item>
          <el-menu-item index="/assetManagement/material-tag">标签管理</el-menu-item>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">工具</template>
          <el-menu-item index="/tools/googleOauthYoutube">Youtube账号管理</el-menu-item>
          <el-menu-item index="/tools/uploadYoutube">Youtube视频上传</el-menu-item>
          <el-menu-item index="/tools/YoutubeVideoManage">Youtube视频管理</el-menu-item>
        </el-submenu>
        
        <!-- 头像菜单 - 放在最右边 -->
        <div class="avatar-container">
          <el-dropdown trigger="click">
            <div class="avatar-wrapper">
              <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
              <i class="el-icon-caret-bottom"/>
            </div>
            <el-dropdown-menu slot="dropdown" class="user-dropdown">
              <router-link class="inlineBlock" to="/">
                <el-dropdown-item>
                  Home
                </el-dropdown-item>
              </router-link>
              <el-dropdown-item divided>
                <span style="display:block;" @click="logout">LogOut</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-menu>
    </div>
    <div class="content-wrapper">
      <!-- 面包屑导航 -->
      <div class="breadcrumb-container">
        <breadcrumb />
      </div>
      <div class="main-container">
        <!-- <navbar/> -->
        <app-main/>
      </div>
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain,
    Breadcrumb
  },
  data() {
    return {
      activeIndex: '1' // 默认激活的菜单项
    };
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapGetters([
      'avatar'
    ]),
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
    },
    handleSelect(key) {
      console.log('选中菜单:', key);
      // 此处添加路由跳转或业务逻辑
    },
    logout() {
      this.$store.dispatch('FedLogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100vh; /* 使用视口高度而不是百分比 */
    width: 100%;
    &.mobile.openSidebar{
      position: fixed;
      top: 0;
    }
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }
  .horizontal-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    background-color: #545c64;
    height: 60px; /* 明确指定高度 */
  }
  
  .breadcrumb-container {
    padding: 0px 20px;
    margin-bottom: 5px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
    height: 50px; /* 明确指定面包屑容器高度 */
  }

  .content-wrapper {
    position: absolute;
    top: 60px; /* 菜单栏高度 */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .main-container {
    min-height: calc(100% - 55px); /* 减去面包屑高度 */
  }
  
  .el-menu--horizontal {
    display: flex;
    justify-content: center;
  }

  .el-submenu .el-menu-item {
    min-width: 120px;
  }
  
  .el-menu--horizontal {
    display: flex;
    justify-content: center;
    position: relative;
  }
  
  /* 头像菜单样式 */
  .avatar-container {
    position: absolute;
    right: 20px;
    height: 60px;
    display: flex;
    align-items: center;
    
    .avatar-wrapper {
      cursor: pointer;
      position: relative;
      
      .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }
      
      .el-icon-caret-bottom {
        position: absolute;
        right: -20px;
        top: 25px;
        font-size: 12px;
        color: #fff;
      }
    }
  }
</style>
