<template>
  <div class="canvas container-fluid">  
    <CanvasItem
      v-for="(item, index) in items"
      :key="index"
      :title="item.title"
      :titleText="item.title_text"
      :description="item.description"
      :project-id="item.projectId"
      :class="['canvas-item', item.class, 'card', 'shadow', 'p-3']"
      :is_admin=is_admin
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import CanvasItem from "@/components/canvas/CanvasItem.vue";

const props = defineProps<{
  is_admin: number;
}>();

const items = ref([
  { projectId: 1, title: 1, title_text: "1. Problème", description: "3 problèmes essentiels à résoudre pour le client", class: "Probleme" },
  { projectId: 1, title: 2, title_text: "2. Segments", description: "Les segments de clientèle visés", class: "Segments" },
  { projectId: 1, title: 3, title_text: "3. Valeur", description: "La proposition de valeur", class: "Valeur" },
  { projectId: 1, title: 4, title_text: "4. Solution", description: "Les solutions proposées", class: "Solution" },
  { projectId: 1, title: 5, title_text: "5. Avantage", description: "Les avantages concurrentiels", class: "Avantage" },
  { projectId: 1, title: 6, title_text: "6. Canaux", description: "Les canaux de distribution", class: "Canaux" },
  { projectId: 1, title: 7, title_text: "7. Indicateurs", description: "Les indicateurs clés de performance", class: "Indicateurs" },
  { projectId: 1, title: 8, title_text: "8. Coûts", description: "Les coûts associés", class: "Couts" },
  { projectId: 1, title: 9, title_text: "9. Revenus", description: "Les sources de revenus", class: "Revenus" }
]);

onMounted(() => {
  const bootstrapCss = document.createElement('link')
  bootstrapCss.rel = 'stylesheet'
  bootstrapCss.href = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'
  bootstrapCss.integrity = 'sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+Fpc+NC'
  bootstrapCss.crossOrigin = 'anonymous'
  document.head.appendChild(bootstrapCss)

  const bootstrapJs = document.createElement('script')
  bootstrapJs.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js'
  bootstrapJs.integrity = 'sha384-mQ93S0EhrF4Z1nM+fTflmYf0DyzsY5j7F5H3WlClDD6H3WUJh6kxBkF3GDW8n1j6'
  bootstrapJs.crossOrigin = 'anonymous'
  document.body.appendChild(bootstrapJs)
})
</script>

<style scoped>
@import "@/components/canvas/style-project.css";

.canvas {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 12px;
  padding: 30px;
  /*background-color: #f8f9fa;*/
  position: relative;
  height: 90vh;
  overflow: auto;
}

.Probleme { grid-column: 1 / 3; grid-row: 1 / 5; }
.Segments { grid-column: 9 / 11; grid-row: 1 / 5; }
.Valeur { grid-column: 5 / 7; grid-row: 1 / 5; }
.Solution { grid-column: 3 / 5; grid-row: 1 / 3; }
.Avantage { grid-column: 7 / 9; grid-row: 1 / 3; }
.Canaux { grid-column: 7 / 9; grid-row: 3 / 5; }
.Indicateurs { grid-column: 3 / 5; grid-row: 3 / 5; }
.Couts { grid-column: 1 / 6; grid-row: 5 / 7; }
.Revenus { grid-column: 6 / 11; grid-row: 5 / 7; }

.canvas-item {
  /*background-color: white;*/
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
}
</style>
