<template>
  <div class="box">
    <div class="title"
         :class="{border:tBorder}"
         v-show="showHeader"
         :style="styleT">
      <slot name="header"></slot>
    </div>
    <div class="search_form"
         :class="{border:fBorder}"
         v-show="showForm">
      <slot name="form_content"></slot>
    </div>
    <div class="tableInfo"
         :class="{border:cBorder}"
         v-show="showTable">
      <slot name="table_content"></slot>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name:'BaseLayout',
  data () {
    return {};
  },
  mounted () { },
  computed: {},
  props: {
    showForm: {
      type: Boolean,
      default: true
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    showTable: {
      type: Boolean,
      default: true
    },
    tBorder: {
      type: Boolean,
      default: true
    },
    fBorder: {
      type: Boolean,
      default: true
    },
    cBorder: {
      type: Boolean,
      default: true
    },
    styleT: {}
  }
};
</script>

<style scoped>
.title {
  height: 70px;
  line-height: 70px;
  padding-left: 20px;
  font-size: 16px;
}

.search_form,
.tableInfo {
  margin: 0 17px 14px;
  position: relative;
  font-size: 16px;
}
.border {
  border: 1px solid #e7e7e7;
  margin-bottom: 14px;
}
.box {
  height: 100%;
}
</style>
