<template>
  <div
    id="app">
    <grid-layout
      :layout="layouts.gridLayout"
      :col-num="parseInt(colNum)"
      :row-height="rowHeight"
      :is-draggable="draggable"
      :is-resizable="resizable"
      :vertical-compact="true"
      :use-css-transforms="true">
      <grid-item
        v-for="(item, index) in layouts.gridLayout"
        :key="index"
        :id="item.id"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :min-w="2"
        :min-h="2"
        :i="item.i"
        :options="item.options"
        :model="item.model"
        :schema="item.schema"
        :is-draggable="item.model.draggable"
        :is-resizable="item.model.resizable">
        <div
          slot="header"
          v-if="item.model.title">
          {{ item.model.title }}
        </div>
        <div
          slot="body-left"
          v-if="item.model.bodyLeft">
          {{ item.model.bodyLeft }}
        </div>
        <p v-if="item.model.description">
          {{ item.model.description }}
        </p>
        <div>
          <component
            v-if="item.model.slots.bodyTopComponent"
            :is="item.model.slots.bodyTopComponent"
            :w="item.w"
            :chart-data="item.data"
            :site="item.model.site"
            :facet-options="item.model"
            :facet-id="item.i"
            class="facet" />
        </div>
        <div
          v-if="item.model.footer"
          slot="footer">
          {{ item.model.footer }}
        </div>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script type="application/javascript">
import { mapState } from 'vuex';
import GridItem from './components/GridItem.vue';
import GridLayout from './components/GridLayout.vue';
import TestElement from './components/TestElement.vue';
import LineChart from './components/LineChart.vue';

export default {
  name: 'App',
  components: {
    GridItem,
    GridLayout,
    LineChart,
    TestElement
  },
  data () {
    return {
      draggable: true,
      resizable: true,
      rowHeight: 30,
      colNum: 12,
      index: 0
    };
  },
  computed: {
    // mix the getters into computed with object spread operator
    ...mapState([
      'layouts'
    ])
  },
  watch: {
    layouts: function watchLayout (val, oldVal) {
      console.log('layout: ', val, oldVal);
    }
  },
  mounted () {
    console.log('[grid]     mounted layouts: ', this.layouts);
    this.index = this.layouts.gridLayout.length;
  }
};
</script>

<style type="text/css">
  @import "/docs/bulma.css";

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  .vue-resizable-handle {
    z-index: 5000;
    position: absolute;
    width: 20px !important;
    height: 20px !important;
    bottom: 0;
    right: 0;
    /* background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
    */
    background: url('/docs/resize.png');
    background-position: bottom right;
    padding: 0 3px 3px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: se-resize;
  }

  .vue-draggable-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
    background-position: bottom right;
    padding: 0 8px 8px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: pointer;
  }
</style>
