<template>
  <div class="grid-layout-view">
    <div class="vue-grid-layout" :style="{ height: !multiple && 'inherit' }">
      <GirdCard v-for="item in layouts" :key="item.i" :element="item" />
    </div>
    <!-- <VueGridLayout
      :layout.sync="layouts"
      :col-num="24"
      :row-height="10"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="true"
      :use-css-transforms="true"
      :margin="[0, 0]"
      @click.native.self.stop="handleShowModal"
      @layout-created="layoutCreatedEvent"
      @layout-before-mount="layoutBeforeMountEvent"
      @layout-mounted="layoutMountedEvent"
      @layout-ready="layoutReadyEvent"
      @layout-updated="layoutUpdatedEvent"
      @breakpoint-changed="breakpointChangedEvent"
    >
      <VueGridItem
        v-for="item in layouts"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        @resize="resizeEvent"
        @move="moveEvent"
        @resized="resizedEvent"
        @container-resized="containerResizedEvent"
        @moved="movedEvent"
      >
        <GirdCard :element="item" :is-design="true" />
      </VueGridItem>
    </VueGridLayout> -->

    <a-button
      v-show="!layouts.length"
      type="primary"
      class="grid-add-component-btn"
      @click="handleAdd"
    >
      {{ $t("ADD") }}
    </a-button>
  </div>
</template>

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

export default {
  components: {
    GirdCard,
    // CompTable,
  },
  inject: ["multiple"],
  props: {
    components: {
      type: Array,
      default: () => [],
    },
    layout: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      layouts: [],
      modalVisible: false,
    };
  },
  watch: {
    components: {
      handler(val) {
        this.layouts = val;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleAdd() {
      this.$emit("addFn");
    },
    handleShowModal() {
      this.modalVisible = true;
    },
    handleSelectComponent() {
      this.modalVisible = false;
      this.$emit("selected-component", [
        {
          key: "1",
          url: "COLLECT_1Test",
        },
      ]);
    },
    handleOpensSet() {
      this.$emit("handleOpensSet");
    },
    layoutCreatedEvent(...args) {
      // console.log("layoutCreatedEvent", ...args);
    },
    layoutBeforeMountEvent(...args) {
      // console.log("layoutBeforeMountEvent", ...args);
    },
    layoutMountedEvent(...args) {
      // console.log("layoutMountedEvent", ...args);
    },
    layoutReadyEvent(...args) {
      // console.log("layoutReadyEvent", ...args);
    },
    layoutUpdatedEvent(...args) {
      this.$emit("layout-updated-event", ...args);
      // console.log("layoutUpdatedEvent", ...args);
    },
    breakpointChangedEvent(...args) {
      // console.log("breakpointChangedEvent", ...args);
    },
    resizeEvent(...args) {
      // console.log("resizeEvent", ...args);
    },
    moveEvent(...args) {
      // console.log("moveEvent", ...args);
    },
    resizedEvent(...args) {
      // console.log("resizedEvent", ...args);
    },
    containerResizedEvent(...args) {
      // console.log("containerResizedEvent", ...args);
    },
    movedEvent(...args) {
      // console.log("movedEvent", ...args);
    },
  },
};
</script>

<style lang="less" scoped>
.grid-layout-view {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 12px;
  overflow: auto;
}
</style>

<style lang="less">
.grid-layout-view {
  .vue-grid-layout {
    min-height: 100%;
  }
  .vue-grid-item > .vue-resizable-handle {
    background-size: 100%;
  }
  .grid-add-component-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
