<script>

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

import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
import Entite from '@components/contents/Entite.vue';

import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'

export default {
  props: ['id', 'eid', 'entite'],
  data(){
    return {
      history_value: 0,
      history_slider_ops: {
        dotSize:10,
        min: 0,
        max: 100,
      }
    }
  },
  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];
    },
    display_concernement(){
      return this.ct_concernement && !this.entite && this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer';
    }
  },
  created () {
    console.log(`terrain de vie content created, id: ${this.id}, eid: ${this.eid}, opened_concernement:`, this.opened_concernement);
  },
  components: {
    CartoucheLayout,
    Entite,
    VueSlider
  }
}

</script>

<template>
  <CartoucheLayout>
    <template v-slot:header>
      <div class="pre-header">
        <!-- concernement -->
        <label v-if="display_concernement">{{ ct_concernement.title.description }}</label>
        <!-- entite -->
        <h3 v-if="entite">{{ entite.title }}</h3>
        <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">menace</span>
        <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">maintient</span>
      </div>
      
    </template>
    
    <template v-slot:main>
      <!-- concernement -->
      <template v-if="!entite">
        <section v-if="opened_concernement.description" class="description">
            <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
            <div v-html="opened_concernement.description"/>
        </section>
        <section v-if="opened_concernement.caillou" class="caillou">
            <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
            <div v-html="opened_concernement.caillou"/>
        </section>
      </template>

      <!-- entite -->
      <Entite v-if="entite" :entite="entite"/>
    </template>

    <template v-slot:footer>
      <section class="infos">
        <p>
          <span class="author"><span>une enquête de</span> {{ opened_concernement.author.username }}<br/></span>
          <span class="structure" v-if="opened_concernement.author.structure.length"><span>avec</span> {{ opened_concernement.author.structure[0].name }}<br/></span>
          <span class="lieu" v-if="opened_concernement.lieu.length"><span>à</span> {{ opened_concernement.lieu[0].name }}<br/></span>
          <span class="created"><span>démarrée le</span> {{ created }}<br/></span>
          <span class="changed"><span>mise à jour le</span> {{ changed }}</span>
        </p>
      </section>
        
      <!-- <section class="historique">
        <label>Historique</label>
        <vue-slider
          ref="slider"
          v-model="history_value"
          v-bind="history_slider_ops"
        ></vue-slider>
      </section> -->
    </template>
  </CartoucheLayout> 
  
</template>