<!--
  @description: 电商门户框架
  @Modifier：haoFx
  @routerPath:
  @date：  2019/9/27-14:10
-->
<template>
  <div id="layout" ref="layout" class="layout" @scroll="handleScroll">
    <!-- navbar -->
    <div class="top">
      <navbar :is-show="isShow" class="portalLayout_navbar" />
    </div>
    <!-- body -->
    <div class="bottom">
      <appMain :fixed="fixed" />
    </div>
    <!-- footer -->
    <div class="footer">
      <footerbar :is-show="isShow" />
    </div>
  </div>
</template>

<script>
import { navbar, appMain, banner, sidebar, footerbar } from './shopComponents'
// import $ from 'jquery'
export default {
  name: 'PortalLayout',
  components: {
    navbar,
    appMain,
    banner,
    sidebar,
    footerbar
  },
  data() {
    return {
      fixed: false,
      isShow: true
    }
  },
  watch: {
    '$route'() {
      this.$route.path === '/shop/shopHome' ? this.isShow = true : this.isShow = false
      this.$refs.layout.scrollTop = 0
    }
  },
  created() {
    this.$route.path === '/shop/shopHome' ? this.isShow = true : this.isShow = false
  },
  methods: {
    handleScroll() {
      if (this.$route.path === '/shop/shopHome') {
        // const eTop = $('.index_goods').eq(0).offset().top
        // const sTop = $('.layout').scrollTop()

        // if (eTop <= sTop) {
        //   this.fixed = true
        // } else {
        //   this.fixed = false
        // }
        // if (sTop > 584 && sTop < 1173) {
        //   $('.nav_fixed ul').find('li').eq(0).addClass('active').siblings().removeClass('active')
        // }
        // if (sTop > 1173 && sTop < 1762) {
        //   $('.nav_fixed ul').find('li').eq(1).addClass('active').siblings().removeClass('active')
        // }
        // if (sTop > 1762) {
        //   $('.nav_fixed ul').find('li').eq(2).addClass('active').siblings().removeClass('active')
        // }
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/style/common/maincommon.less";
.layout {
  height: 100%;
  overflow: auto;
  .top {
    background-color: #f7f8fa;
    .portalLayout_navbar {
      max-width: 1190px;
      margin: 0 auto;
      height: 40px;
    }
  }
  .bottom {
    min-height: calc(100vh - 167px);
    //font-size: 12px;
    .banner_wrap {
      background-color: @orange;
      // background-color: #05aaca;
    }
    .content {
      margin-top: 26px;
      display: flex;
      justify-content: space-between;
      .left {
        width: 20%;
        padding: 30px 0 300px 0;
        background: #ffffff;
      }
      .right {
        width: 79%;
        background: #ffffff;
      }
    }
  }
  .footer {
    background-color: #f8f8f8;
    width: 100%;
  }
}
</style>

