<template>
<div>
  <div>grid/template</div>
   <grid-layout
      :layout='layout'
      :col-num='12'
      :row-height='30'
      :is-draggable='true'
      :is-resizable='true'
      :vertical-compact='true'
      :margin='[20, 20]'
      :use-css-transforms='true'
    >
      <grid-item v-for='item in layout'
        :x='item.x'
        :y='item.y'
        :w='item.w'
        :h='item.h'
        :i='item.i'
        @resize='$emit("resize")'
        @move='$emit("move")'
        @resized='$emit("resized")'
        @moved='$emit("moved")'
        >
        <slot></slot>
      </grid-item>
    </grid-layout>
    <el-button @click = 'createGrid()'>create</el-button>
</div>
</template>
<script>
import {GridItem, GridLayout} from 'vue-grid-layout'
export default {
  components: {
    GridItem,
    GridLayout
  }
  // data () {
  //   return {
  //     layout: [
  //       {'x': 0, 'y': 0, 'w': 2, 'h': 2, 'i': '0'},
  //       {'x': 2, 'y': 0, 'w': 2, 'h': 4, 'i': '1'},
  //       {'x': 4, 'y': 0, 'w': 2, 'h': 5, 'i': '2'},
  //       {'x': 6, 'y': 0, 'w': 2, 'h': 3, 'i': '3'},
  //       {'x': 8, 'y': 0, 'w': 2, 'h': 3, 'i': '4'},
  //       {'x': 10, 'y': 0, 'w': 2, 'h': 3, 'i': '5'}
  //     ]
  //   }
  // },
  // methods: {
  //   createGrid () {
  //     this.layout.push({'x': 0, 'y': 0, 'w': 2, 'h': 2, 'i': this.layout.length + ''})
  //   },
  //   moveEvent (i, newX, newY) {
  //     console.log('MOVE i=' + i + ', X=' + newX + ', Y=' + newY)
  //   },
  //   resizeEvent (i, newH, newW) {
  //     console.log('RESIZE i=' + i + ', H=' + newH + ', W=' + newW)
  //   },
  //   movedEvent (i, newX, newY) {
  //     console.log('MOVED i=' + i + ', X=' + newX + ', Y=' + newY)
  //   },
  //   resizedEvent (i, newH, newW, newHPx, newWPx) {
  //     console.log('RESIZED i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx)
  //   }
  // }
}
</script>
<style lang='less' scoped>
  .vue-grid-item {
    border: 1px solid #cbcbcb;
  }
</style>
