<template>
  <div class="grid-layout-view">
    <div class="vue-grid-layout">
      <GirdCard v-for="item in layouts" :key="item.i" :element="item" />
    </div>
    <!-- <VueGridLayout
      :layout.sync="layouts"
      :col-num="24"
      :row-height="10"
      :is-draggable="false"
      :is-resizable="false"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[0, 0]"
      :use-css-transforms="true"
    >
      <VueGridItem
        v-for="item in layouts"
        :key="item.url"
        :x="item.x"
        :y="item.y"
        :w="item.w || 5"
        :h="item.h || 5"
        :i="item.i"
      >
        <GirdCard :element="item" />
      </VueGridItem>
    </VueGridLayout> -->
  </div>
</template>

<script>
import GirdCard from "./GridCard.vue";

export default {
  components: {
    GirdCard,
  },
  props: {
    components: {
      // required: true,
      type: Array,
      default: () => [],
    },
    layout: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      layouts: [],
    };
  },
  watch: {
    components: {
      handler(val) {
        this.layouts = val;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleOpensSet() {
      this.$emit("handleOpensSet");
    },
    layoutUpdatedEvent(...args) {
      this.$emit("layout-updated-event", this.layout, ...args);
    },
  },
};
</script>

<style lang="less" scoped>
.grid-layout-view {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 5px;
  background: #fff;
  /deep/.vue-grid-layout {
    min-height: 100%;
  }
}
</style>
