<template>
  <div class="main-wrap">
    <div :class="['main-wrap-inner', { noFooter: !$slots.footer }]">
      <div v-if="$slots.filterItem || $slots.filterBtn" class="search-box">
        <div class="left-box"><slot name="filterItem"></slot></div>
        <div class="right-box"><slot name="filterBtn"></slot></div>
      </div>
      <div class="table-wrap"><slot></slot></div>
    </div>
    <div v-if="$slots.footer" class="footer-wrap">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'list-layout',
};
</script>

<style lang="scss">
@import '../../assets/styles/variables.scss';

#app {
  .search-box {
    margin: 22px 12px 0;
    background-color: #fff;
    border-radius: 8px;
    padding: 12px 8px 0;
    display: flex;
    // min-width: 1748px;
    .left-box {
      flex: 1;
      display: flex;
      flex-wrap: wrap;

      // .el-input {
      //   .el-input__suffix .el-input__icon {
      //     line-height: 22px;
      //   }
      // }
    }
    .right-box {
      display: flex;
      flex-wrap: wrap;
      width: 108px;
    }
    // .el-input__inner,
    // .el-button {
    //   height: 22px;
    //   line-height: 22px;
    //   font-size: 12px;
    // }
    .el-button {
      padding: 0 8px;
      & + & {
        margin-left: 8px;
      }
    }
  }
}
@media screen and (min-width: $bigScreenWidth) {
  #app {
    .search-box {
      margin: 18px 20px 0;
      padding: 20px 20px 0;
      .left-box {
        .el-input {
          .el-input__suffix .el-input__icon {
            line-height: 40px;
          }
        }
      }
      .right-box {
        width: 178px;
      }
      // .el-input__inner,
      // .el-button {
      //   height: 40px;
      //   line-height: 40px;
      //   font-size: 14px;
      // }
      .el-button {
        line-height: 1;
        padding: 12px 20px;
        & + & {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
