<template>
  <div class="rt-grid-item" :style="computedStyle">
    <div :class="classes" :style="contentStyle">
      <slot />
    </div>
  </div>
</template>
<script>
const ALIGNLIST = ['left', 'center', 'right']
export default {
  name: 'RtGridItem',
  props: {
    align:{
      validator(value) {
        return rt.oneOf(value, ALIGNLIST)
      },
      default: 'left'
    }
  },
  computed: {
    computedStyle() {
      let { gutter, columnNum, gridItemFloatLift } = this.$parent; 
      let precent = 100 / columnNum;
      if(gridItemFloatLift) {
        return {
          paddingRight: `${gutter}px`
        }
      }
      return {
        paddingRight: `${gutter}px`,
        flexBasis: `${precent}%`
      };
    },
    classes() {
      let { center, border } = this.$parent;
      return [
        'rt-grid-item__content',
        {
          'has-border': border,
          'is-center': center
        }
      ];
    },
    contentStyle() {
      let { align } = this;
      let justifyContent =  'flex-start';
      if(align === 'center') {
        justifyContent = 'center';
      }
      if(align === 'right'){
        justifyContent = 'flex-end';
      }
      return {
        justifyContent,
        textAlign: align
      };
    }
  }
};
</script>
<style lang="less">
.rt-grid-item {
  position: relative;
  .rt-grid-item__content {
    display: flex;
    align-items: center;
    &.is-center {
      justify-content: center;
    }
    &.has-border::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      top: -50%;
      right: -50%;
      bottom: -50%;
      left: -50%;
      border: 0 solid #f9f9f9;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
    }
  }
}
</style>
