<template>
	<div class="main-page" id="main-page" style="height:100%;">
		<el-container  style="height:100%;">
			<el-header style="height:100px; padding:0;">
					<headerBusiness></headerBusiness>
			</el-header>

			<el-container >
        <!-- <transition name="slideTransition"> -->
				<el-aside v-show="asideState" :class="{'sidebar-close-width': classObj.hideSidebar}" class="aside-part" style="width:235px;">
          <div class="scrollbar-title" :class="{'titleStyle': isCollapse}"><i class="iconfont iconliangyou"></i><span v-if='!isCollapse'>{{menu}}</span></div>
					<!-- <sidebar id="menuHeight" :class="{hide:state}"></sidebar> -->
          <sidebar id="menuHeight" :class="{'hideSidebar':classObj.hideSidebar}"  :style="'height:'+(fullHeights)+'px'"></sidebar>
				</el-aside>
        <!-- </transition> -->
        <el-container style="width: 100%;">
          <el-header style="height: 35px; padding: 0;">
            <breadcrumb class="bread" style="width: 100%;"></breadcrumb>
          </el-header>
          <el-main id="bigBox" style="width: 100%; padding:0; overflow-x:hidden;" :style="'height:'+(fullHeightInit)+'px'">
            <app-main></app-main>
          </el-main>
          <el-footer style="height: 25px;padding: 0 0;"><div class="footer">技术支持：紫光软件系统有限公司</div></el-footer>
        </el-container>
        
      </el-container>
      <!-- <el-footer style="height:40px;padding: 0;">
          <div class="footer">技术支持：紫光软件系统有限公司</div>
      </el-footer> -->
		</el-container>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { Navbar, Sidebar, AppMain } from './components'
import headerBusiness from './indexBusinessAssem/headerBusiness'
	// import ResizeMixin from './mixin /ResizeHandler'
import Breadcrumb from '@/components/Breadcrumb'
export default {
  name: 'layout',
  data() {
    return {
      fullHeight: document.documentElement.clientHeight,
      fullHeights:document.documentElement.clientHeight-135,
      fullHeightInit: document.documentElement.clientHeight-160,
      state: '',
      menu:'粮食业务管理平台'
    }
  },
  components: {
    Sidebar,
    Navbar,
    AppMain,
    Breadcrumb,
    headerBusiness
  },
  // mixins: [ResizeMixin],
  computed: {
    ...mapGetters(['sidebar', 'navbar', 'formDatas']),
    routes() {
      return this.formDatas
    },
    isCollapse() {
      return !this.sidebar.opened
    },
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    asideState() {
      return this.sidebar.asideState
    }
  },
  created() {
  
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('CloseSideBar', {
        withoutAnimation: false
      })
    }
  },
  mounted() {
    this.menu=window.sessionStorage.getItem('levelListTit')
    // document.getElementById('bigBox').style.height = (this.fullHeight - 160) + 'px'
    // document.getElementById('menuHeight').style.height = (this.fullHeight - 135) + 'px'
    const that = this
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight
        that.fullHeight = window.fullHeight
      })()
    }
  },
  watch: {
    fullHeight(val) {
      console.log(val)
      this.fullHeight=val
      this.fullHeights=val-135
      this.fullHeightInit=val-160
      // if (!this.timer) {
      //   this.fullHeight = val
      //   this.timer = true
      //   const that = this
      //   setTimeout(function() {
      //     that.timer = false
      //     document.getElementById('bigBox').style.height = (val - 160) + 'px'
      //     if (document.getElementById('menuHeight')!=null) {
      //         document.getElementById('menuHeight').style.height = (val - 135) + 'px'
      //     }
        
      //   }, 400)
      // }
    },
    $route(to,from){
      setTimeout(() =>{
        this.menu=window.sessionStorage.getItem('levelListTit')
      },10)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .hide {
		display: none;
  }
  .main-page .aside-part{
    // width: 235px !important;
  }
.app-wrapper {
		/* // @include clearfix; */
		/* // position: absolute; */
		/* // overflow: hidden; */
		/* // top: 0; */
		/* // height: 100%; */
		/* // width: 100%; */
		/* // margin: 0 auto; */
		/* // min-width: 1200px; */
		height: 100%;
		/* // min-height: 600px; */
	}
	.navbar{ 
		width: 100%;
		height: 60px;
	}

	.main-container {
		margin-top: 40px !important;
	}
	.drawer-bg {
		background: #000;
		opacity: 0.3;
		width: 100%;
		top: 0;
		height: 100%;
		position: absolute;
		z-index: 999;
	}

	.main-container {
		background-color: rgb(228, 232, 238);
		height: 100%;
	}

	.bread {
		background-color: #1ea9b5;
		width: 100%;
		height: 35px;
		color:#fff;
		line-height: 35px;
		//position: absolute;
		//top: 60px;
		//z-index:1002;
	}
	.footer {
    width: 100%;
    height: 25px;
    padding: 0 0;
    border: none;
    line-height: 25px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background-color: #7f7f7f;
	}
  .scrollbar-title {
    background: #028c98;
    //padding: 20px 0;
    height: 35px;
    line-height: 35px;
    padding-left: 15px;
    color: #fff;
    font-size: 14px;
  }
  .titleStyle{
    text-align: center;
    padding-left: 0;
  }
  .sidebar-close-width {
    width: 36px !important;
  }
</style>
