<template>
  <div class="grid-container" :style="gridStyle">
    <div
      v-for="(cell, index) in cells"
      :key="index"
      class="grid-cell"
      :style="cellStyle"
      @dblclick="toggleFullScreen(index)"
    >
      <div v-if="fullScreenIndex === index" class="full-screen">
        <div class="content">
          <canvas class="canvas" :ref="`canvas-${fullScreenIndex}`"></canvas>
          <!-- 这里可以放置单元格的内容 -->
          <!-- Cell {{ index + 1 }} -->
          <!-- <button @click="toggleFullScreen(null)">Exit Full Screen</button> -->
        </div>
      </div>
      <div v-else class="content">
        <!-- Cell {{ index + 1 }} -->
        <canvas class="canvas" :ref="`canvas-${index}`"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    rows: {
      type: Number,
      default: 1,
    },
    cols: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      fullScreenIndex: null,
    };
  },
  computed: {
    gridStyle() {
      return {
        display: 'grid',
        gridTemplateRows: `repeat(${this.rows}, 1fr)`,
        gridTemplateColumns: `repeat(${this.cols}, 1fr)`,
        height: '100vh',
        width: '100vw',
      };
    },
    cellStyle() {
      return {
        border: '1px solid #ccc',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      };
    },
    cells() {
      return Array(this.rows * this.cols).fill(0);
    },
  },
  methods: {
    toggleFullScreen(index) {
      this.fullScreenIndex = this.fullScreenIndex === index ? null : index;
    },
  },
};
</script>

<style scoped>
.grid-container {
  display: grid;
  height: 100vh;
  width: 100vw;
}

.grid-cell {
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  /* text-align: center; */
  width: 100%;
  height: 100%;
}
</style>