<template>
  <figure class="sv-grid-cell" ref="gridCellRef">
    <div class="cell-icon" :class="cellIconClass" :style="cellIconStyle">
      <slot name="icon"></slot>
    </div>
    <figcaption class="cell-text">
      <slot></slot>
    </figcaption>
  </figure>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'svGridCell',
    props: {
      icon: String,
      align: {
        type: String,
        default: 'center'
      }
    },
    data () {
      return {
        cellIconStyle: {
          display: 'block'
        }
      }
    },
    computed: {
      cellIconClass () {
        return this.icon ? `sv-icon-${this.icon}` : ''
      }
    },
    methods: {
      setCellStyle () {
        let alignItems
        if (this.align === 'left') {
          alignItems = 'flex-start'
        } else if (this.align === 'right') {
          alignItems = 'flex-end'
        } else {
          alignItems = 'center'
        }

        this.$refs.gridCellRef.style.alignItems = alignItems
      }
    },
    mounted () {
      if (!this.$el.children[0].innerHTML && !this.icon) {
        this.cellIconStyle.display = 'none'
      }
      this.setCellStyle()
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss"></style>
