<template>
  <div class="layout-container">
    <vue-gic-header class="user-header-pop" style="z-index: 1999;" :projectName="projectName" :collapseFlag="collapseFlag" @collapseTag="collapseTagHandler" @toRouterView="toRouterView"></vue-gic-header>
    <div class="layout">
      <vue-gic-aside-menu class="layout-left" v-if="asideShow" :projectName="projectName" :leftModulesName="leftModulesName" :collapseFlag.sync="collapseFlag"></vue-gic-aside-menu>
      <div class="layout-right" :class="[{'asideShow': asideShow},{'collapseFlag':asideShow && collapseFlag}]">
        <div class="layout-title">
          <el-breadcrumb class="dm-breadcrumb" separator="/">
            <el-breadcrumb-item :to="{ path: '' }"><a href="/report/#/memberSummary">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item :class="{'no-link':!v.path}" v-for="(v,i) in breadcrumb" :key="i"  :to="{ path: v.path }">{{v.name}}</el-breadcrumb-item>
          </el-breadcrumb>
          <h3><span>{{contentTitle}}</span></h3>
        </div>
        <div class="layout-content__wrap">
          <div class="layout-content" :class="[{'asideShow': asideShow},{'collapseFlag':asideShow && collapseFlag}]">
            <router-view></router-view>
          </div>
        </div>

        <vue-gic-footer></vue-gic-footer>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        collapseFlag: false,
        projectName: "integral-mall",
        leftModulesName: '公众号配置',
      }
    },
    created(){
      $bus.$on('aside-menu',val => {
        this.leftMenuRouter = val
      })
    },
    destroyed() {
       $bus.$off('aside-menu');
    },
    computed: {
      asideShow() {
        console.log(this.$store.state)
        return this.$store.state.marketing.asideShow;
      },
      contentTitle() {
          return this.$route.name
      },
      breadcrumb() {
        return this.$store.state.marketing.breadcrumb;
      }
    },
    // watch:{
    //   asideShow(val) {
    //     this.collapseFlag =  this.asideShow;
    //   }
    // },
    methods: {
      // 处理路由跳转
      toRouterView(val) {
        var that = this;
        // 模拟检查数据
        // //有两个参数
        //{
        //  name:,
        //  path:
        //}
        that.$router.push({
          path: val
        })
      },
      // 处理路由跳转
      toRouterView(val) {
        //有两个参数
        //{
        //  name:,
        //  path:
        //}
        this.$router.push({
          path: val.path
        })
      },
      // 折叠事件
      collapseTagHandler(val){
        this.collapseFlag = val
      }
    }
  }
</script>
<style lang="scss">
  .layout-container{
    height:100%;
    display:flex;
  }
  .layout {
    display: flex;
    flex-direction: row;
    background-color: #f0f2f5;
    height: calc(100% - 64px);
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 64px;
    width: 100%;
    &-left {
      width: 200px;
      display: inline-block;
      position: fixed;
      left: 0;
      z-index: 9;
    }
    &-right{
      position: relative;
      flex: 1;
      overflow-x:auto;
      transition: width 0.5s;
      -moz-transition: width 0.5s;
      -webkit-transition: width 0.5s;
      -o-transition: width 0.5s;
      height: 100%;
      // overflow-y: auto;
      margin-left:0px;
      &.asideShow{
        margin-left: 200px;
      }
      &.collapseFlag{
        margin-left: 64px;
      }
    }
    &-title{
      // position: absolute;
      // width: 100%;
      // top:0;
      // left:0;
      height:85px;
      background:#fff;
      // box-shadow: 0 3px 5px rgba(147,165,184,.13);
      padding:15px 0 0 30px;
      border-bottom: 1px solid #e4e7ed;
      h3 {
        color:#303133;
        font-size:20px;
        padding:24px 0;
        font-weight:500;
        span{
          color:#303133;
          font-size:20px;
          font-weight:500;
        }
        i{
          font-size:20px;
          color:#c0c4ce;
          cursor: pointer;
          &:hover{
            color:#909399;
          }
        }
      }
    }
    &-content__wrap {
      overflow-y: auto;
      position: relative;
      top:-1px;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    &-content {
      // margin-top: 100px;
      min-height: calc(100% - 200px);
      min-width: 1400px;
      &.asideShow{
        min-width: 1200px;
      }
      &.collapseFlag{
        min-width: 1336px;
      }
    }
  }
  .dm-breadcrumb{
    display: inline-block;
    vertical-align: middle;
  }


.user-header-pop {
  min-width: 95px;
}
.el-popover.user-header-pop {
  min-width: 95px;
}

</style>
