<template>
  <v-container style="position: relative">
    <v-layout justify-space-around row wrap>
      <v-flex
        v-for="coll in colls"
        :key="coll.uid"
        :style="coll.style"
        xs12
        :[getSize(coll)]="true"
        xxxclass="te-coll"
      >
        <!-- <div class="te-coll--menu">
          MOVE
        </div> -->
        <draggable
          class="te-section"
          :list="coll.list"
          :group="{name: 'te-widget'}"
          v-bind="dragOptions"
          @start="drag = true"
          @end="drag = false"
        >
          <transition-group
            type="transition"
            :name="!drag ? 'flip-list' : null"
            tag="v-layout"
            class="column"
          >
            <v-flex v-for="widget in coll.list" :key="widget.uid">
              <component :is="widget.type" v-bind="widget.data" />
            </v-flex>
            <v-flex v-if="!coll.list.length" :key="`${coll.uid}--more`">
              ---
            </v-flex>
          </transition-group>
        </draggable>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
// :grow="coll.size === 'g'" :shrink="coll.size === 's'"
import draggable from 'vuedraggable'
import TeText from './TeText.vue'
import TeImg from './TeImg.vue'

export default {
  components: { draggable, TeText, TeImg },
  props: {
    colls: { type: Array, default: () => [] }
  },
  data: () => ({
    fullText: false,
    text: 'Nisi ex cillum ut mollit. Eiusmod velit ea labore do esse magna commodo occaecat. Irure ex velit culpa elit excepteur incididunt dolore fugiat esse veniam amet. Cupidatat duis voluptate quis dolor dolor veniam duis aliqua eu proident ipsum tempor cupidatat. Occaecat ea officia anim exercitation officia enim quis mollit id veniam id eiusmod qui in. Proident eu do cillum eu quis occaecat ex ipsum adipisicing exercitation ad elit sunt.',
    drag: false
  }),
  computed: {
    dragOptions () {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      }
    }
  },
  mounted () {
  },
  methods: {
    getSize (coll) {
      return `md${coll.size}`
    }
  }
}
</script>

<style scoped>
.te-section {
  min-height: 100px;
  outline: 1px dashed;
  margin-bottom: 1em;
  /* position: relative; */
}
.te-coll {
  /* position: relative; */
}
.te-coll--menu {
  position: absolute;
  height:30px;
  top:-30px;
  background: blue;
}
.item {
  min-width: 100px;
  min-height: 30px;
  margin: 10px;
  text-align: center;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>

<style scoped>
@media (min-width: 1904px) {
  .container {
    max-width: 1300px!important;
    padding: 0;
  }
}
</style>
