<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { ModelFbx } from 'vue-3d-model';
import { useProductStore } from './stores/product';
import type { ProductInfo } from './stores/product';
import { SERVER_URL } from './constants'

type StateType = {
  active_product?: ProductInfo
}

const products = useProductStore()

const state: StateType = reactive({
  active_product: undefined
})

const setActive = (id: number) => {
  state.active_product = products.list.find(el => el.id == id)
}

onMounted(async () => {
  products.getData()
})
</script>

<template>
  <div class="container">
    <div class="sidebar">
      <ul>
        <li v-for="item in products.list">
          <a @click.stop.prevent="setActive(item.id)" :href="item.id.toString()">
            {{ item.title }}
          </a>
        </li>
      </ul>
    </div>
    <div class="header">Проекты Кустарщины</div>
    <div class="product">
      <div v-if="state.active_product">
        <model-fbx v-if="state.active_product.model3d" class="product-model"
          :src="`${SERVER_URL}/${state.active_product.model3d.replace('/back', '')}`"></model-fbx>
        <div class="model-image" v-if="state.active_product.image1">
          <img :src="state.active_product.image1" />
        </div>
        <div class="product-description">
          {{ state.active_product.description }}
        </div>
      </div>
    </div>
  </div>
</template>