<template>
    <div :style="styles" class="ui-layout" :class="className">
        <div class="ui-layout__top">
            <slot name="top"></slot>
        </div>
        <div class="ui-layout__center">
            <slot name="left"></slot>
            <slot name="center"></slot>
            <slot name="right"></slot>
        </div>
        <div class="ui-layout__bottom">
            <slot name="bottom"></slot>
        </div>
    </div>
</template>
<script>
/**
 * Created by fuzl on 2017-11-9.
 */
const LayoutTypes = {
  Wrap_Content: 'wrap_content',
  Fill_Parent: 'fill_parent',
  Full_Screen: 'full_screen',
};

export default {
  name: 'Layout',
  props: {
    width: [String, Number],
    height: [String, Number],
    layout: {
      type: String,
      default: LayoutTypes.Wrap_Content,
    },
  },
  data() {
    return {};
  },
  mounted() {
    const $parent = this.$el.parentElement;
    const $offsetParent = this.$el.offsetParent;
    if ($parent !== $offsetParent && this.layout === LayoutTypes.Fill_Parent) {
      // 需要给上级元素添加定位
      $parent.style.position = 'relative';
    }
  },
  computed: {
    styles() {
      const styles = [];
      const height = parseFloat(this.height);
      const width = parseFloat(this.width);
      if (this.layout === LayoutTypes.Full_Screen) {
        styles.push('position: fixed');
      } else {
        if (height) {
          styles.push(`height: ${height}px`);
        }
        if (width) {
          styles.push(`width: ${width}px`);
        }
        if (this.layout === LayoutTypes.Fill_Parent) {
          styles.push('position: absolute');
        }
      }
      return styles.join(';');
    },
    className() {
      switch (this.layout) {
        case LayoutTypes.Wrap_Content:
          return 'ui-layout--wrap-content';
        case LayoutTypes.Fill_Parent:
          return 'ui-layout--fill-parent';
        case LayoutTypes.Full_Screen:
          return 'ui-layout--full-screen';
      }
    },
  },
};
</script>
<style></style>
