<template>
  <el-container class="crm-container">
    <el-header v-show="headerVisible" class="crm-header">{{header}}</el-header>
    <el-main class="crm-main" v-if="handleFlag">
      <div class="filter-container">
        <slot name="query"></slot>
      </div>
    </el-main>
    <hr class="hr-style"/>
    <el-footer class="crm-footer"  v-if="footerFlag">
      <slot name="table"></slot>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  components: {
  },
  props: {
    handleFlag: {
      type: [Boolean]
    },
    footerFlag: {
      type: [Boolean],
      default () {
        return true
      }
    },
    header: {
      type: [String],
      default () {
        return ''
      }
    },
    headerVisible: {
      type: Boolean,
      default () {
        return true
      }
    }
  },
  data () {
    return {
    }
  },
  computed: {
    curHandleFlag: {
      get: function () {
        return this.handleFlag
      },
      set: function (value) {
        this.$emit('update:handleFlag', value)
      }
    }
  }
}
</script>
<style scope>
.hr-style {
  margin: 0px;
  height: 10px;
  border: 0px;
  /*background-color: rgb(198, 218, 255);*/
  color: rgb(198, 218, 255);
}
</style>
