<template>
  <div class="matrix grid" :class="classes" :style="styles">
    <div class="relative" v-for="(node, index) in options.children" :key="index">
      <component :is="getComponent(node, 'image')" :options="node"></component>
      <div v-if="node.text" class="matrix-text flex justify-center items-center p-4">
        <v-text :options="typeof node.text === 'string' ? { text: node.text } : node.text"></v-text>
      </div>
    </div>
  </div>
</template>
<script>
import Base from './base';
import { mixinStyle } from './utils';

// eslint-disable-next-line no-unused-vars
const _cols = [
  'grid-cols-1',
  'grid-cols-2',
  'grid-cols-3',
  'grid-cols-4',
  'grid-cols-5',
  'grid-cols-6',
  'grid-cols-7',
  'grid-cols-8',
  'grid-cols-9',
  'grid-cols-10',
  'grid-cols-11',
  'grid-cols-12',
  'grid-cols-none',
]

export default {
  name: 'v-matrix',
  extends: Base,
  computed: {
    classes(){
      const { cols = 2 } = this.options;
      return `grid-cols-${cols}`;
    },
    styles() {
      const { gap = 4, style } = this.options;
      return mixinStyle({
        'gap': `${gap/4}rem`,
      }, style)
    }
  }
}
</script>
<style lang="less">
.matrix {
  .image {
    margin-bottom: 0;
  }
  .matrix-text {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    font-size: 1.3rem;
    pointer-events: none;
  }
}
</style>
