<script>

import { mapActions, mapState } from 'pinia'
import { ConcernementsStore } from '@stores/concernements'
import { UserStore } from '@/stores/user'
import { CommonStore } from '@/stores/common'

export default {
  props: ['id'],
  data(){
    return {

    }
  },
  computed: {
    ...mapState(ConcernementsStore,['opened_concernement']),
    ...mapState(ConcernementsStore,['ct_concernement']),
    ...mapState(ConcernementsStore,['ct_entite']),
  },
  created () {
    console.log(`puissance d'agir content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
  }
}

</script>

<template>
  <section
    class="content-besoins">
      <ul class="besoins">
        <li
          v-for="besoin in opened_concernement.besoins"
          :key="besoin.id"
          class="besoin"
          :id="besoin.id"
          :class="besoinClass(besoin.id)"
        >
          <span 
            class="open-btn mdi"
            :class="{ 'mdi-chevron-right': besoin.id !== opened_besoin_id, 'mdi-chevron-down': besoin.id === opened_besoin_id } "
            @click="onClickBesoin(besoin.id)"
            />
          <header>
            <label 
              class="mdi mdi-rhombus"
              :class="{ hover: hover_elmt && hover_elmt.type === 'besoin' && (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }"
              @click="onClickBesoin(besoin.id)"
              >
                Besoin de l'enqueteur
            </label>
            <h4 class="besoin-description" v-html="besoin.description"/>
            <a 
              v-if="isloggedin"
              :href="'/api/node/add/reponse?besoin_id='+besoin.id" 
              target="_blank" 
              rel="noopener noreferrer"
              class="contribute-link mdi mdi-pencil-plus">
                contribuer à ce besoin
            </a>
          </header>
          <ul class="reponses">
            <li
              v-for="reponse in besoin.reponses"
              :key="reponse.id"
              class="reponse"
              :id="reponse.id"
            >
              <label class="mdi mdi-rhombus-outline">Ressource</label>
              <section v-if="reponse.qui">
                <label for="reponse-qui">Qui</label>
                <p name="reponse-qui" v-html="reponse.qui" />
              </section>
              <section v-if="reponse.quoi">
                <label for="reponse-quoi">Quoi</label>
                <p name="reponse-quoi" v-html="reponse.quoi" />
              </section>    
              <section v-if="reponse.ou">
                <label for="reponse-ou">Où</label>
                <p name="reponse-ou" v-html="reponse.ou" />
              </section>    
              <section v-if="reponse.avec">
                <label for="reponse-avec">Avec</label>
                <p name="reponse-avec" v-html="reponse.avec" />
              </section>    
            </li>
          </ul>
        </li>
      </ul>
    </section>
</template>