<template>
  <div
    class="sell-layout">
    <div class="side-content">
      <slot name="left"></slot>
    </div>
    <div class="main-content">
      <el-scrollbar>
        <div
          class="inner"
          :style="{height: staticHeight ? '100%' : 'auto'}">
          <slot name="right"></slot>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    staticHeight: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    document.addEventListener('keyup', this.listenKey)
  },
  beforeDestroy () {
    document.removeEventListener('keyup', this.listenKey)
  },
  methods: {
    listenKey (e) {
      console.log(e.key)
      if (document.activeElement === document.body) {
        let re = new RegExp(/^[a-zA-Z0-9]{1}$/)
        if (re.test(e.key)) {
          this.$store.commit('addQuickSearch', e.key)
        } else if (e.key === 'Backspace') {
          this.$store.commit('minusQuickSearch')
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sell-layout {
  position: absolute; top: 0;right: 0;bottom: 0; left: 0;display: flex;
}

.side-content {
  width: 300px; margin-left: 20px;
}

.main-content {
  flex: 1;
}

</style>

<style lang="scss">
.sell-layout {
  .el-scrollbar {
    overflow-x: hidden!important;  flex: 1;
  }
  .el-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-input,.el-select,.el-date-editor,.el-date-editor.el-input,.el-input-number {
    width: 200px;
  }
  .el-card + .el-card {
    margin-top: 20px;
  }
  .el-table__row {
    cursor: pointer;
  }
  .item {
    margin-right: 20px;
  }
  .strong {
    font-size: 1.6em;  color: #65677c;
  }

  .input-space {
    display: inline-block;  width: 200px;  text-align: left;
    * {
      display: inline-block;  vertical-align: middle;
    }
  }
}

</style>
