<template>
  <div class="f-panel">
    <div class="f-panel__header" v-show="header">
      <slot name="header"></slot>
    </div>
    <div class="f-panel__body" ref="panel_body">
      <slot name="body" :bodyHeight="bodyHeight"></slot>
    </div>
    <div class="f-panel__footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
import base from "@/mixins/base";
import Queries from "css-element-queries";
export default {
  props: {
    header: {
      type: Boolean,
      default: true
    }
  },
  name: "f-panel",
  mixins: [base],
  data() {
    return {
      bodyHeight: 0
    };
  },
  watch: {
    winWidth() {
      this.init();
    }
  },
  methods: {
    init() {
      const h = this.$refs.panel_body ? this.$refs.panel_body.clientHeight : 0;
      if (h == 0) return;
      this.bodyHeight = h;
    }
  },
  mounted() {
    this.init();
    this.$nextTick(() => this.init());
    new Queries.ResizeSensor(this.$refs.panel_body, () => {
      this.init();
    });
    if (this.$eventBus) {
      this.$eventBus.$on("on-resize", () => {
        this.init();
      });
    }
  }
};
</script>

<style lang="less">
.f-panel {
  height: 100%;
  display: flex;
  flex-direction: column;

  &__header {
    padding: 5px;
    background-color: #eff3f6;
    border-bottom: 1px solid #ddd;
  }
  &__body {
    flex: 1;
    overflow: hidden;
  }
  &__footer {
  }
}
</style>
