<script setup>
import NumberCounter from "./components/NumberCounter.vue";
import DragGrid from "../../src/DragGrid.vue";
</script>

<template>
  <div class="row">
    <drag-grid
      v-model="counters"
      :cols="3"
      :rows="2"
      id="c-grid"
      @input="logInput"
      context="counter"
    >
      <template #item="item">
        <number-counter v-model="item.data.num"></number-counter>
      </template>
      <template #highlight>
        <div ref="highlight" class="custom-highlight">
          This is a custom highlight!
        </div>
      </template>
    </drag-grid>
    <span>← Drag here please →</span>
    <drag-grid v-model="counters2" :cols="3" :rows="2" context="counter">
      <template #item="item">
        <number-counter v-model="item.data.num"></number-counter>
      </template>
      <template #highlight>
        <div ref="highlight" class="custom-highlight">
          This is a custom highlight!
        </div>
      </template>
    </drag-grid>
  </div>
</template>

<script>
export default {
  name: "Example3Counters",
  methods: {
    logInput(input) {
      console.log("New movement detected:", input);
    },
  },
  data() {
    return {
      counters: [
        { x: 1, y: 1, w: 1, h: 1, key: "a", data: { num: 1 } },
        { x: 2, y: 1, w: 1, h: 1, key: "b", data: { num: 4 } },
        { x: 3, y: 2, w: 1, h: 1, key: "c", data: { num: -1 } },
      ],
      counters2: [
        { x: 1, y: 2, w: 1, h: 1, key: "d", data: { num: 30 } },
        { x: 3, y: 1, w: 1, h: 1, key: "e", data: { num: 3 } },
      ],
    };
  },
};
</script>

<style scoped>
.row {
  display: flex;
  justify-content: space-between;
}
.custom-highlight {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: aquamarine;
  width: 100%;
  height: 100%;
}
</style>