<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', 'eid', 'entite'],
  data(){
    return {

    }
  },
  computed: {
    ...mapState(ConcernementsStore,['opened_concernement']),
    ...mapState(ConcernementsStore,['ct_concernement']),
    ...mapState(ConcernementsStore,['ct_entite']),
    ...mapState(UserStore,['name']),
    created(){
      let d = new Date(this.opened_concernement.created); 
      console.log('d', d);
      return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
    },
    changed(){
      let d = new Date(this.opened_concernement.changed); 
      console.log('d', d);
      return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
    }
  },
  created () {
    console.log(`terrain de vie content created, id: ${this.id}, eid: ${this.eid}, opened_concernement:`, this.opened_concernement);
  }
}

</script>

<template>
  <!-- concernement -->
  <section
    v-if="!entite"
    class="content-concernement">
    <section class="description">
        <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
        <div v-html="opened_concernement.description"/>
    </section>
    <section class="caillou">
        <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
        <div v-html="opened_concernement.caillou "/>
    </section>
    <section class="infos">
      <p>
        <span class="author"><span>une enquête de</span> {{ opened_concernement.author.username }}</span><br/>
        <span class="structure" v-if="opened_concernement.author.structure"><span>avec</span> {{ opened_concernement.author.structure[0].name }}</span><br/>
        <span class="lieu" v-if="opened_concernement.lieu"><span>à</span> {{ opened_concernement.lieu[0].name }}</span><br/>
        <span class="created"><span>démarrée le</span> {{ created }}</span><br/>
        <span class="changed"><span>mise à jour le</span> {{ changed }}</span>
      </p>
    </section>
  </section>
  <!-- entite -->
  <section
    v-if="entite"
    class="content-entite">
    <section class="action">
        <label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
        <div v-html="entite.action"/>
    </section>
    <section class="menace-maintien">
        <label v-if="ct_entite">{{ ct_entite.field_menace_maintien.description }}</label>
        <div v-html="entite.menacemaintien"/>
    </section>
  </section>
</template>