<!--
 * @Author       : xh
 * @Date         : 2022-12-05 10:44:04
 * @LastEditors: y001554
 * @FileName     :   主页面只负责布局
-->
<template>
  <div class="pageContainer" :style="containerStyle">
    <div id="container__header" class="pageContainer__header">
      <slot name="pageHeader" />
    </div>
    <div id="container__searchBar" class="pageContainer__searchBar" :class="tableMode ? 'hiddenSearch' : ''">
      <slot name="pageSearch" />
    </div>
    <div id="container__content" class="pageContainer__content">
      <slot name="pageContent" :sticky="searchH" />
    </div>
    <div v-if="$slots['pageFooter']" class="pageContainer__footer flex">
      <div style="flex: 1">
        <slot name="pageFooter" />
      </div>
    </div>
  </div>
</template>

<script>
// import style from '@/styles/e-variables.scss'
// let timer = null
export default {
  name: 'Workbench',
  components: {},
  data() {
    return {
      loading: false,
      otherSelect: false,
      tableMode: false, //不显示全表格
      // bindProps: {},
      h: 0,
      // headerH: 0,
      searchH: 0,
      // contentH: 0,
      containerStyle: {},
      mode: true
    }
  },
  created() {
    const that = this
    // this.$bus.$on('reLayout', () => {
    //   that.$nextTick(() => {
    //     // debugger
    //     that.init()
    //   })
    // })
    // window.addEventListener('mousewheel', this.getScroll)
    this.init()
    // console.log(this.$slots)
  },
  destroyed() {
    // window.removeEventListener('mousewheel', this.getScroll)
    // this.$bus.$off('reLayout')
  },
  methods: {
    toggle(e) {
      // this.tableMode = !this.tableMode
      if (e !== !this.tableMode) {
        this.tableMode = !e
      }
      // this.init()
    },
    init() {
      this.loading = true
      const that = this
      const h = window.innerHeight

      // setTimeout(() => {
      that.$nextTick(() => {
        // const headerH = document.querySelector('#container__header').offsetHeight

        // debugger
        const searchH = document.querySelector('#container__searchBar').offsetHeight
        // const contentH = h - style.headerHeightNum - style.breadheightNum - headerH - searchH - 48
        // that.headerH = headerH
        that.searchH = searchH
        // that.contentH = contentH
        // that.containerStyle = {
        //   width: '100%',
        //   height: '100%'
        //   // height: `${h - style.headerHeightNum - style.breadheightNum}px`
        // }
        // that.bindProps = {
        //   height: '100%'
        // }
        // console.log(123, headerH, searchH, contentH)
        that.loading = false
      })
      // }, 500)
    }
    // getScroll(e) {
    //   // console.log('e', e)
    //   const { target = null } = e
    //   const parentNode = document.querySelector('#app-main')
    //   const res = parentNode.contains(target)
    //   // console.log('e', target, parentNode, res)
    //   if (!res) return
    //   const that = this
    //   const { deltaY } = e
    //   if (!this.mode) return

    //   let ress = false
    //   if (deltaY > 0) {
    //     ress = true
    //   }

    //   if (timer) {
    //     clearTimeout(timer)
    //     timer = null
    //   }
    //   timer = setTimeout(() => {
    //     if (ress == this.tableMode) return
    //     that.tableMode = ress
    //   }, 100)

    //   // const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

    //   // // console.log(scrollTop)
    //   // if (scrollTop >= this.searchH - 2) {
    //   //   // debugger
    //   //   this.bindProps = {
    //   //     height: this.h
    //   //   }
    //   //   // console.log(window.innerHeight, style.headerHeightNum, style.breadheightNum)
    //   // } else {
    //   //   this.bindProps = {}
    //   // }
    // },
  }
}
</script>

<style lang="scss" scoped>
@import '~/style/e-variables';

.pageContainer {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  background: #fff;
  overflow: hidden;
  // background: gree
  position: relative;
  box-shadow: 0 0 8px rgb(212, 212, 212);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  transform: all 0.3s ease;
  box-sizing: border-box;

  .toggleIcon {
    // position: absolute;
    // left: 10px;
    // bottom: 10px;
    // z-index: 100;
    padding: 10px;
    font-size: 12px;
    color: #5c5c5c;
    transform: scale(0.9);
    display: flex;

    // align-content: center;
    justify-content: flex-start;
    align-items: center;
    span {
      display: block;
    }
    .actions {
      margin-right: 15px;
      margin-left: 4px;
    }
    // width: 30px;
    // height: 30px;
    // color: #fff;
    // background: #d45214;
    // border-radius: 50%;
    // overflow: hiddenSearch;
    // box-shadow: 0 0 8px solid #eee;
  }
  &__searchBar {
    // transition: all ease 0.5s;
    height: auto;
    overflow: hidden;
    width: 100%;
  }
  &__pad {
    padding-top: $headerHeight + $breadheight;
  }
  &__content {
    width: 100%;
    height: 100%;
    flex: 1;
    // padding-bottom: 48px;
    overflow: hidden;
    // background: red;
    transition: height ease 0.5s;
    // background: green;
    // overflow: hiddenSearch;
    // .el-scrollbar {
    //   width: 100%;
    //   height: 100%;
    //   overflow-y: auto;
    // }
  }
  &__header {
    // width: 100%;
    // position: fixed;
    z-index: 10;
    top: $headerHeight + $breadheight;
    left: $sideBarWidth + 10px;
    right: 10px;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    // box-sizing: border-box;
  }

  &__footer {
    width: 100%;
    // position: fixed;
    // z-index: 10;
    // bottom: 0;
    // left: $sideBarWidth + 10px;
    right: 10px;
    background: #fff;
    box-sizing: border-box;
    align-items: center;
    text-align: right;
    width: 100%;
    overflow: hidden;
    // box-sizing: border-box;
  }
  .hiddenSearch {
    height: 1px;
    // transform: scaleY(0);
  }
}
.fr {
  float: right;
}
.hideSidebar {
  .pageContainer__header,
  .pageContainer__footer {
    left: 54px;
  }
}
</style>
