<script>

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

import REST from '@api/rest-axios'

// import { print } from 'graphql/language/printer'
// import gql from 'graphql-tag'
// import GQL from '@api/graphql-axios'
// import EntiteFields from '@api/gql/entite.fragment.gql'


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

import SvgIcon from '@jamescoyle/vue-icon';
import { mdiArrowLeft } from '@mdi/js';
import { mdiArrowRight } from '@mdi/js';
import { mdiStickerPlusOutline } from '@mdi/js';



import ContentEditable from '@components/editable/ContentEditable.vue';
import DateEditable from '@components/editable/DateEditable.vue';
import SelectEditable from '@components/editable/SelectEditable.vue';
// import CheckboxEditable from '@components/editable/CheckboxEditable.vue';


export default {
  props: ['cid'],
  data(){
    return {
      doleance: null,
      doleance_selected: null,
      doleance_index: null,
      arrowleft_path: mdiArrowLeft,
      arrowright_path: mdiArrowRight,
      mdiStickerPlusOutline_path: mdiStickerPlusOutline,
      reloading_concernements: false
    }
  },
  computed: {
    ...mapState(ConcernementsStore,['map_mode',
                                    'opened_concernement',
                                    'concernementsByID',
                                    'ct_concernement',
                                    'ct_cercle_politique',
                                    'p_groupes_interets',
                                    'p_reception_et_traitement',
                                    'p_mise_en_oeuvre_decision',
                                    'p_reception_application_decision',
                                    'reloadConcernementCerclePol'
                                  ]),
    ...mapState(UserStore,['name',
                           'csrf_token',
                           'isloggedin',
                           'user_entites']),
    ...mapState(CommonStore,['hover_elmt']),
    // 
    opened_dol() {
      return this.opened_concernement.opened_doleance;
    },
    groupeinteret() {
      return this.doleance.groupesinterets[this.opened_dol.field_index];
    },
    receptionettraitment() {
      return this.doleance.reception_traitement[this.opened_dol.field_index];
    },
    miseenoeuvredecision() {
      return this.doleance.mise_en_oeuvre_decision[this.opened_dol.field_index];
    },
    receptionsetapplications() {
      return this.doleance.receptions_et_applications[this.opened_dol.field_index];
    }
  },
  created () {
    this.concernement = this.concernementsByID[this.cid];
    console.log(`Doleancer content created, id: ${this.cid}, doleances:`,this.concernement.doleances, "opened_doleance" ,this.concernement.opened_doleance);
    this.concernement.doleances.forEach((doleance, index) => {
      if (doleance.id === this.concernement.opened_doleance.id) {
        this.doleance = doleance;
        this.doleance_index = index;
      }
    });
    
  },
  mounted() {
    if(this.concernement && this.concernement.doleances.length){
      if (this.doleance_index > 0) 
        this.$refs.prevDoleanceBTN.classList.add('visible');

      if (this.doleance_index < this.concernement.doleances.length-1)
        this.$refs.nextDoleanceBTN.classList.add('visible'); 
    }
  },
  unmounted() {
    if(this.concernement && this.concernement.doleances.length){
      this.setOpenedDoleance(parseInt(this.cid), this.concernement.doleances[0].id);

    }

  },
  watch: {
    opened_concernement: {
      handler (n, o) {
        console.log(`${this.cid} watch opened_concernement o, n`, o, n);
        if (!n) { // if there is no opened concernement
          
        } else {
          this.concernement = this.concernementsByID[this.cid];
          console.log(`Doleancer watched opened_concernement, id: ${this.cid}, doleances:`,this.concernement.doleances, "opened_doleance", this.concernement.opened_doleance);
          this.concernement.doleances.forEach((doleance, index) => {
            if (doleance.id === this.concernement.opened_doleance.id) {
              console.log('yes');
              
              this.doleance = doleance;
              this.doleance_index = index;
            }
          });
        }
      },
      deep: true
    }
  },
  methods: {
    ...mapActions(ConcernementsStore,['setOpenedDoleance',
                                      'setOpenedDoleanceField'
                                    ]),
    nextDoleance(){
      this.doleance_index ++;
      this.$refs.prevDoleanceBTN.classList.add('animeleft');
      this.$refs.nextDoleanceBTN.classList.add('animeleft');
      this.openDoleance();
    },
    prevDoleance(){
      this.doleance_index --;
      this.$refs.prevDoleanceBTN.classList.add('animeright');
      this.$refs.nextDoleanceBTN.classList.add('animeright');
      this.openDoleance()
    },
    openDoleance(){
      this.doleance = this.concernement.doleances[this.doleance_index];
      console.log('openDoleance', this.doleance);
      
      this.setOpenedDoleance(parseInt(this.cid), this.doleance.id);
      setTimeout((function(that){
        return function(){
          console.log('doleance anime end', that);
          that.$refs.prevDoleanceBTN.classList.remove('animeleft', 'animeright');
          that.$refs.prevDoleanceBTN.classList.toggle('visible', that.doleance_index > 0);

          that.$refs.nextDoleanceBTN.classList.remove('animeleft', 'animeright');
          that.$refs.nextDoleanceBTN.classList.toggle('visible', that.doleance_index < that.concernement.doleances.length-1); 
        };
      }(this)), 2000)
    },
    // cercle po
    addCerclePo(e){
      console.log('add cerclepo');
      this.reloading_concernements = true;
      // 1 create entite node
      this.createCerclepoNode()
        .then((cerclepo) => {
          console.log('createCerclepoNode then node', cerclepo);
          // 2 record on concernement field_entites
          this.recordConcernementDoleancerField(cerclepo)
                .then((concernement) => {
                  console.log('concernement', concernement);
                  // reload the map item
                  this.reloadConcernementCerclePol(concernement.nid[0].value)
                    .then(() => {
                      this.reloading_concernements = false;
                    });
                })
        })

    },
    createCerclepoNode(){
      return new Promise((resolve, reject) => {
        // 1 create entite node
        const params_node_cerclepo = {
          type: 'cercle_politique',
          title: [{value:'Titre à personaliser'}]
        };
        
        const configs = {
          headers: {'X-CSRF-Token': this.csrf_token}
        };

        REST.post(`/node?_format=json`, params_node_cerclepo, configs)
          .then(({ data }) => {
            console.log('REST post new node cercle_politique', data);
            resolve(data)
          })
          .catch(error => {
            console.warn(`Issue with post new node cercle_politique`, error)
            reject(error)
          })
      })
    },
    // adresse doleance
    addAdresseDoleance(e){
      this.setOpenedDoleanceField(this.cid, this.doleance.id, "adresse_de_la_doleance");
    },
    // decision
    addDecision(e){
      this.setOpenedDoleanceField(this.cid, this.doleance.id, "decision");
    },
    // adresse de al decision
    addAdresseDecision(e){
      this.setOpenedDoleanceField(this.cid, this.doleance.id, "adresse_de_la_decision");
    },
    // reception et application decision
    addReceptionApplicationDecision(e){
      this.createCerclepoParagGeneric('reception_application_decision', 'field_receptions_et_applications', 'receptions_et_applications');
    },
    // reussite / echec
    addReussiteEchec(e){
      this.setOpenedDoleanceField(this.cid, this.doleance.id, "probleme_initial_resolu");
    },
    // groupe interet
    addgroupInteret(e){
      this.createCerclepoParagGeneric('groupes_interets', 'field_groupes', 'groupesinterets')
        .then(()=>{
          this.setOpenedDoleanceField(this.cid, this.doleance.id, "groupesinterets", this.doleance.groupesinterets.length-1);
        });
    },
    addReceptionEtTraitement(e){
      this.createCerclepoParagGeneric('reception_et_traitement', 'field_receptions_et_traitements', 'reception_traitement');
    },
    addMiseEnOeuvre(e){
      this.createCerclepoParagGeneric('mise_en_oeuvre_decision', 'field_mise_en_oeuvre_decision', 'mise_en_oeuvre_decision');
    },
    createCerclepoParagGeneric(type, prt_field_name, obj_name){
      console.log('createCerclepoParagGeneric',type, prt_field_name, obj_name);
      return new Promise((resolve, reject) => {
        this.reloading_concernements = true;
        // 1 create paragraphe
        this.createParag(type, prt_field_name)
          .then((parag) => {
            console.log('createParag then parag', parag);
            // 3 record on concernement field_entites
            this.recordCerclepoParagField(parag, obj_name, prt_field_name)
              .then((cercle_politique) => {
                console.log('cercle_politique', cercle_politique);
                // reload concernement doleances
                this.reloadConcernementCerclePol(this.concernement.id)
                  .then(() => {
                    this.reloading_concernements = false;
                    resolve();
                  });
              })
          })
      });
    },
    createParag(type, prt_field_name){
      return new Promise((resolve, reject) => {
        // 2 create paragraphe
        const params_parag = {
          type: [{target_id: type}],
          parent_type:{value: 'node'},
          parent_id:{value: this.opened_concernement.opened_doleance.id},
          parent_field_name:{value: prt_field_name}, // entity reference revision
        };
        
        const configs = {
          headers: {'X-CSRF-Token': this.csrf_token}
        };

        REST.post(`/entity/paragraph?_format=json`, params_parag, configs)
          .then(({ data }) => {
            console.log('REST post new parag', data);
            resolve(data)
          })
          .catch(error => {
            console.warn(`Issue with post new paragraph`, error)
            reject(error)
          })
      })
    },
    recordCerclepoParagField(parag, obj_name, field_name){
      return new Promise((resolve, reject) => {
        // 3 record concernement field_entite

        // get all the field_entite values, we don't want to ersae everything
        let parag_records = [];
        this.concernement.doleances.forEach((doleance) =>{
          if (doleance.id === this.opened_concernement.opened_doleance.id) {
            doleance[obj_name].forEach((fied) => {
              console.log('fied',fied);
              
              parag_records.push({
                target_id: fied.id,
                target_revision_id: fied.revision_id
              })
            })
          }
        })
        console.log('parag_records', parag_records);
        
        // add the new field value
        parag_records.push({
          target_id: parag.id[0].value,
          target_revision_id: parag.revision_id[0].value
        })
        console.log('parag_records', parag_records);
        
        const params_node = {
          type: 'cercle_politique',
          nid: [{value: this.opened_concernement.opened_doleance.id}],
          // 'field_groupes': parag_records
        };
        params_node[field_name] = parag_records;
        
        const configs = {
          headers: {'X-CSRF-Token': this.csrf_token}
        };

        REST.patch(`/node/${this.opened_concernement.opened_doleance.id}?_format=json`, params_node, configs)
          .then(({ data }) => {
            console.log('REST patch cercle_politique new parag field', data)
            resolve(data)
          })
          .catch(error => {
            console.warn(`Issue with patch cercle_politique new parag field`, error)
            reject(error)
          })
        // resolve('test')
      })
    },
    recordConcernementDoleancerField(node){
      return new Promise((resolve, reject) => {
        // 2 record concernement field_doleancer

        // get all the field_entite values, we don't want to ersae everything
        let doleances = [];
        this.concernement.doleances.forEach((doleance) =>{
          doleances.push({
            target_id: doleance.id
          })
        })
        // add the new field value
        doleances.push({
          target_id: node.nid[0].value
        })
        console.log('doleances', doleances);
        
        const params_node = {
          type: 'concernement',
          nid: [{value: this.cid}],
          'field_doleancer': doleances
        };
        
        const configs = {
          headers: {'X-CSRF-Token': this.csrf_token}
        };

        REST.patch(`/node/${this.cid}?_format=json`, params_node, configs)
          .then(({ data }) => {
            console.log('REST patch node new field_doleancer', data)
            resolve(data)
          })
          .catch(error => {
            console.warn(`Issue with patch node field_doleancer`, error)
            reject(error)
          })
        // resolve('test')
      })
    },
    reloadConcernementCerclePolAndChangeActiveField(field, field_index){
      this.reloadConcernementCerclePol(this.cid)
        .then((concernement) => {
          // this.opened_concernement.opened_doleance.field = field;
          this.setOpenedDoleanceField(this.cid, this.doleance.id, field, field_index);
        });
    }
  },
  components: {
    CartoucheLayout,
    SvgIcon,
    ContentEditable,
    DateEditable,
    SelectEditable
    // CheckboxEditable,
  }
}

</script>

<template>
  <CartoucheLayout :cid="cid">
    <template v-slot:header>
      <div class="pre-header">
      </div>
      
    </template>
    
    <template v-slot:main>
      <section
        class="content-doleances">
        
        <template v-if="opened_dol && opened_dol.id === doleance.id">
          <ContentEditable
            tag="h3"
            :value="doleance.title" 
            class="doleance-title" 
            :contenteditable="opened_concernement.can_update"
            :data="{
              entitytype: 'node',
              bundle: 'cercle_politique',
              id: doleance.id,
              field: {field_name: 'title', value:'value'}
            }"
            v-on:updated="reloadConcernementCerclePol(cid)"/>
          <section
            v-if="opened_dol.field === 'leprobleme' || !opened_dol.field">
            <!-- <span class="date">{{ doleance.date_leprobleme.start }}</span> -->
            <h5>{{ ct_cercle_politique.field_le_probleme.label }}</h5>
            <DateEditable
              :value="doleance.date_leprobleme.start"
              class="leprobleme-date" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_date_leprobleme'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
            <ContentEditable
              tag="h4"
              :value="doleance.leprobleme" 
              class="doleance-leprobleme" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_le_probleme', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
            
          </section>

          <section
            v-if="opened_dol.field === 'lenquete' 
                  || ((!opened_dol.field 
                      || opened_dol.field === 'leprobleme') 
                      && !doleance.lenquete)"
            class="lenquete">
            <h5>{{ ct_cercle_politique.field_enquete_terraindevie.label }}</h5>
            <!-- <h4 name="lenquete">{{ doleance.lenquete }}</h4> -->
            <ContentEditable
              tag="h4"
              :value="doleance.lenquete" 
              class="doleance-lenquete" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_enquete_terraindevie', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePolAndChangeActiveField('lenquete')"/>
          </section>

          <section 
            v-if="opened_dol.field === 'groupesinterets'"
            class="groupesinterets">
            <h5>Construction de groupes d'intérets avec qui composer la doléance</h5>
            <span class="date">
              <!-- {{ groupeinteret.date.start }}
              &#x2192;
              {{ groupeinteret.date.end }} -->
              <DateEditable
                :value="groupeinteret.date.start"
                :end_value="groupeinteret.date.end"
                class="groupeinteret-date" 
                :contenteditable="opened_concernement.can_update"
                mode="range"
                :data="{
                  entitytype: 'paragraph',
                  bundle: 'groupes_interets',
                  id: groupeinteret.id,
                  revision_id: groupeinteret.revision_id,
                  field: {field_name: 'field_date_groupe_interets'}
                }"
                v-on:updated="reloadConcernementCerclePol(cid)"/>
            </span>
            <section>
              <label for="groupe">{{ p_groupes_interets.field_groupe_interets.label }}</label>
              <!-- <p 
                name="groupe"
                v-html="groupeinteret.groupe_interets" /> -->
              <ContentEditable 
                tag="p"
                name="group"
                :value="groupeinteret.groupe_interets"
                :html="true" 
                :class="{ ellipsed: headerreduced }" 
                :contenteditable="opened_concernement.can_update"
                :data="{
                  entitytype: 'paragraph',
                  bundle: 'groupes_interets',
                  id: groupeinteret.id,
                  revision_id: groupeinteret.revision_id,
                  field: {field_name: 'field_groupe_interets', value:'value'}
                }"
                v-on:updated="reloadConcernementCerclePol(cid)"/>
              
              <label for="accorder">{{ p_groupes_interets.field_accorder_interets.label }}</label>
              <!-- <p 
                name="accorder"
                v-html="groupeinteret.accorder_interets" /> -->
              <ContentEditable 
                tag="p"
                name="accorder"
                :value="groupeinteret.accorder_interets"
                :html="true" 
                :class="{ ellipsed: headerreduced }" 
                :contenteditable="opened_concernement.can_update"
                :data="{
                  entitytype: 'paragraph',
                  bundle: 'groupes_interets',
                  id: groupeinteret.id,
                  revision_id: groupeinteret.revision_id,
                  field: {field_name: 'field_accorder_interets', value:'value'}
                }"
                v-on:updated="reloadConcernementCerclePol(cid)"/>
              
              <label for="formuler">{{ p_groupes_interets.field_formuler.label }}</label>
              <!-- <p 
                name="formuler"
                v-html="groupeinteret.formuler" /> -->
              <ContentEditable 
                tag="p"
                name="formuler"
                :value="groupeinteret.formuler"
                :html="true" 
                :class="{ ellipsed: headerreduced }" 
                :contenteditable="opened_concernement.can_update"
                :data="{
                  entitytype: 'paragraph',
                  bundle: 'groupes_interets',
                  id: groupeinteret.id,
                  revision_id: groupeinteret.revision_id,
                  field: {field_name: 'field_formuler', value:'value'}
                }"
                v-on:updated="reloadConcernementCerclePol(cid)"/>
            </section>
          </section>

          <section v-if="opened_dol.field === 'adresse_de_la_doleance'" class="adresse">
            
            <h5>Adresse de la doléance</h5>

            <!-- <span class="date">{{ doleance.date_adresse.start }}</span> -->
            <DateEditable
              :value="doleance.date_adresse.start"
              class="adressedoleance-date" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_date_adresse_doleance'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
            
            <label for="entite_adresse_doleance">{{ ct_cercle_politique.field_entite_adresse_doleance.label }}</label>
            <!-- <p name="entite_adresse_doleance" v-html="doleance.entite_adresse_doleance" /> -->
            <ContentEditable 
              tag="p"
              name="entite_adresse_doleance"
              :value="doleance.entite_adresse_doleance"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_entite_adresse_doleance', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
            
            <label for="comment_enonce_doleance">{{ ct_cercle_politique.field_comment_enonce_doleance.label }}</label>
            <!-- <p name="comment_enonce_doleance" v-html="doleance.comment_enonce_doleance" /> -->
            <ContentEditable 
              tag="p"
              name="comment_enonce_doleance"
              :value="doleance.comment_enonce_doleance"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_comment_enonce_doleance', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
            
            <label for="a_qui_adresse_doleance">{{ ct_cercle_politique.field_a_qui_adresse_doleance.label }}</label>
            <!-- <p name="a_qui_adresse_doleance" v-html="doleance.a_qui_adresse_doleance" />                -->
            <ContentEditable 
              tag="p"
              name="a_qui_adresse_doleance"
              :value="doleance.a_qui_adresse_doleance"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_a_qui_adresse_doleance', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
          </section>

          <section
            v-if="opened_dol.field === 'reception_traitement'"
            class="reception_traitement">
            <h5>Reception et traitement de la doléance</h5>
            <span class="date">
              <!-- {{ doleance.reception_traitement[opened_dol.field_index].date.start }}
              &#x2192;
              {{ doleance.reception_traitement[opened_dol.field_index].date.end }} -->
              <DateEditable
                :value="receptionettraitment.date.start"
                :end_value="receptionettraitment.date.end"
                class="receptionettraitment-date" 
                :contenteditable="opened_concernement.can_update"
                mode="range"
                :data="{
                  entitytype: 'paragraph',
                  bundle: 'reception_et_traitement',
                  id: receptionettraitment.id,
                  revision_id: receptionettraitment.revision_id,
                  field: {field_name: 'field_date_reception_traite'}
                }"
                v-on:updated="reloadConcernementCerclePol(cid)"/>
            </span>
            <label for="entite_recoit_doleance">{{ p_reception_et_traitement.field_entite_recoit_doleance.label }}</label>
            <!-- <p 
              name="entite_recoit_doleance"
              v-html="doleance.reception_traitement[opened_dol.field_index].entite_recoit_doleance" /> -->
            <ContentEditable 
              tag="p"
              name="entite_recoit_doleance"
              :value="receptionettraitment.entite_recoit_doleance"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'paragraph',
                bundle: 'reception_et_traitement',
                id: receptionettraitment.id,
                revision_id: receptionettraitment.revision_id,
                field: {field_name: 'field_entite_recoit_doleance', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
            <label for="traite_doleance">{{ p_reception_et_traitement.field_traite_doleance.label }}</label>
            <!-- <p 
              name="traite_doleance"
              v-html="doleance.reception_traitement[opened_dol.field_index].traite_doleance" /> -->
            <ContentEditable 
              tag="p"
              name="traite_doleance"
              :value="receptionettraitment.traite_doleance"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'paragraph',
                bundle: 'reception_et_traitement',
                id: receptionettraitment.id,
                revision_id: receptionettraitment.revision_id,
                field: {field_name: 'field_traite_doleance', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
            <label for="doleance_formulee">{{ p_reception_et_traitement.field_doleance_formulee.label }}</label>
            <!-- <p 
              name="doleance_formulee"
              v-html="doleance.reception_traitement[opened_dol.field_index].doleance_formulee" /> -->
            <ContentEditable 
              tag="p"
              name="doleance_formulee"
              :value="receptionettraitment.doleance_formulee"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'paragraph',
                bundle: 'reception_et_traitement',
                id: receptionettraitment.id,
                revision_id: receptionettraitment.revision_id,
                field: {field_name: 'field_doleance_formulee', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
            <label for="entite_adressee">{{ p_reception_et_traitement.field_entite_adressee.label }}</label>
            <!-- <p 
              name="entite_adressee"
              v-html="doleance.reception_traitement[opened_dol.field_index].entite_adressee" /> -->
            <ContentEditable 
              tag="p"
              name="entite_adressee"
              :value="receptionettraitment.entite_adressee"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'paragraph',
                bundle: 'reception_et_traitement',
                id: receptionettraitment.id,
                revision_id: receptionettraitment.revision_id,
                field: {field_name: 'field_entite_adressee', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
          </section>

          <section
            v-if="opened_dol.field === 'decision'"
            class="decision">
            <h5>Décision</h5>
            <!-- <span class="date">{{ doleance.date_decision.start }}</span> -->
            <DateEditable
              :value="doleance.date_decision.start"
              class="decision-date" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_date_decision'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>

            <label for="entites_decisionnaires">{{ ct_cercle_politique.field_entites_decisionnaires.label }}</label>
            <!-- <p name="entites_decisionnaires" v-html="doleance.entites_decisionnaires" /> -->
            <ContentEditable 
              tag="p"
              name="entites_decisionnaires"
              :value="doleance.entites_decisionnaires"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_entites_decisionnaires', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
            <label for="decision_formulee">{{ ct_cercle_politique.field_decision_formulee.label }}</label>
            <!-- <p name="decision_formulee" v-html="doleance.decision_formulee" /> -->
            <ContentEditable 
              tag="p"
              name="decision_formulee"
              :value="doleance.decision_formulee"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_decision_formulee', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
          </section>

          <section
            v-if="opened_dol.field === 'mise_en_oeuvre_decision'"
            class="mise_en_oeuvre_decision">
            <h5>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h5>
            <span class="date">
              <!-- {{ doleance.mise_en_oeuvre_decision[opened_dol.field_index].date.start }}
              &#x2192;
              {{ doleance.mise_en_oeuvre_decision[opened_dol.field_index].date.end }} -->
              <DateEditable
                :value="miseenoeuvredecision.date.start"
                :end_value="miseenoeuvredecision.date.end"
                class="miseenoeuvredecision-date" 
                :contenteditable="opened_concernement.can_update"
                mode="range"
                :data="{
                  entitytype: 'paragraph',
                  bundle: 'mise_en_oeuvre_decision',
                  id: miseenoeuvredecision.id,
                  revision_id: miseenoeuvredecision.revision_id,
                  field: {field_name: 'field_date_miseeoeuvre_decision'}
                }"
                v-on:updated="reloadConcernementCerclePol(cid)"/>
            </span>
            <label for="entite_adresse_decision">{{ p_mise_en_oeuvre_decision.field_entite_adresse_decision.label }}</label>
            <!-- <p name="entite_adresse_decision" v-html="doleance.mise_en_oeuvre_decision[opened_dol.field_index].entite_adresse_decision" /> -->
            <ContentEditable 
              tag="p"
              name="entite_adresse_decision"
              :value="miseenoeuvredecision.entite_adressee_decision"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'paragraph',
                bundle: 'mise_en_oeuvre_decision',
                id: miseenoeuvredecision.id,
                revision_id: miseenoeuvredecision.revision_id,
                field: {field_name: 'field_entite_adresse_decision', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
            <label for="formule_decision">{{ p_mise_en_oeuvre_decision.field_formule_decision.label }}</label>
            <!-- <p name="formule_decision" v-html="doleance.mise_en_oeuvre_decision[opened_dol.field_index].formule_decision" /> -->
            <ContentEditable 
              tag="p"
              name="formule_decision"
              :value="miseenoeuvredecision.formule_decision"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'paragraph',
                bundle: 'mise_en_oeuvre_decision',
                id: miseenoeuvredecision.id,
                revision_id: miseenoeuvredecision.revision_id,
                field: {field_name: 'field_formule_decision', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
            <label for="entite_metenoeuvre_decisio">{{ p_mise_en_oeuvre_decision.field_entite_metenoeuvre_decisio.label }}</label>
            <!-- <p name="entite_metenoeuvre_decisio" v-html="doleance.mise_en_oeuvre_decision[opened_dol.field_index].entite_metenoeuvre_decisio" /> -->
            <ContentEditable 
              tag="p"
              name="entite_metenoeuvre_decisio"
              :value="miseenoeuvredecision.entite_metenoeuvre_decisio"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'paragraph',
                bundle: 'mise_en_oeuvre_decision',
                id: miseenoeuvredecision.id,
                revision_id: miseenoeuvredecision.revision_id,
                field: {field_name: 'field_entite_metenoeuvre_decisio', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
          </section>


          <section 
            v-if="opened_dol.field === 'adresse_de_la_decision'"
            class="adresse_de_la_decision">
            <h5>Adresse de la decision à appliquer</h5>
            <!-- <span class="date">{{ doleance.date_adresse.start }}</span> -->
            <DateEditable
              :value="doleance.date_adresse.start"
              class="adressedecision-date" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_date_adresse_decision'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
          
            <label for="entite_adresse_application">{{ ct_cercle_politique.field_entite_adresse_application.label }}</label>
            <!-- <p name="entite_adresse_application" v-html="doleance.entite_adresse_application" /> -->
            <ContentEditable 
              tag="p"
              name="entite_adresse_application"
              :value="doleance.entite_adresse_doleance"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_entite_adresse_doleance', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
            <label for="aqui_adresse_decision">{{ ct_cercle_politique.field_aqui_adresse_decision.label }}</label>
            <!-- <p name="aqui_adresse_decision" v-html="doleance.aqui_adresse_decision" /> -->
            <ContentEditable 
              tag="p"
              name="aqui_adresse_decision"
              :value="doleance.aqui_adresse_decision"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_aqui_adresse_decision', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
            <label for="comment_formule_decision">{{ ct_cercle_politique.field_comment_formule_decision.label }}</label>
            <!-- <p name="comment_formule_decision" v-html="doleance.comment_formule_decision" /> -->
            <ContentEditable 
              tag="p"
              name="comment_formule_decision"
              :value="doleance.comment_formule_decision"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_comment_formule_decision', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
          </section>

          <section
            v-if="opened_dol.field === 'receptions_et_applications'"
            class="receptions_et_applications">
            <h5>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h5>
            <!-- <span class="date">
              {{ doleance.receptions_et_applications[opened_dol.field_index].date.start }}
              &#x2192;
              {{ doleance.receptions_et_applications[opened_dol.field_index].date.end }}
            </span> -->
            <DateEditable
                :value="receptionsetapplications.date.start"
                :end_value="receptionsetapplications.date.end"
                class="receptionsetapplications-date" 
                :contenteditable="opened_concernement.can_update"
                mode="range"
                :data="{
                  entitytype: 'paragraph',
                  bundle: 'reception_application_decision',
                  id: receptionsetapplications.id,
                  revision_id: receptionsetapplications.revision_id,
                  field: {field_name: 'field_date_date_traitement_decis'}
                }"
                v-on:updated="reloadConcernementCerclePol(cid)"/>


            <label for="applique_decision">{{ p_reception_application_decision.field_applique_decision.label }}</label>
            <!-- <p
              name="applique_decision"
              v-html="doleance.receptions_et_applications[opened_dol.field_index].applique_decision" /> -->
            <ContentEditable 
              tag="p"
              name="applique_decision"
              :value="receptionsetapplications.applique_decision"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'paragraph',
                bundle: 'reception_application_decision',
                id: receptionsetapplications.id,
                revision_id: receptionsetapplications.revision_id,
                field: {field_name: 'field_applique_decision', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>

            <label for="formule_decision_applic">{{ p_reception_application_decision.field_formule_decision_applic.label }}</label>
            <!-- <p
              name="formule_decision_applic"
              v-html="doleance.receptions_et_applications[opened_dol.field_index].formule_decision_applic" /> -->
            <ContentEditable 
              tag="p"
              name="formule_decision_applic"
              :value="receptionsetapplications.formule_decision_applic"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'paragraph',
                bundle: 'reception_application_decision',
                id: receptionsetapplications.id,
                revision_id: receptionsetapplications.revision_id,
                field: {field_name: 'field_formule_decision_applic', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>

            <label for="entite_recoit_decision">{{ p_reception_application_decision.field_entite_recoit_decision.label }}</label>
            <!-- <p
              name="entite_recoit_decision"
              v-html="doleance.receptions_et_applications[opened_dol.field_index].entite_recoit_decision" /> -->
            <ContentEditable 
              tag="p"
              name="entite_recoit_decision"
              :value="receptionsetapplications.entite_recoit_decision"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'paragraph',
                bundle: 'reception_application_decision',
                id: receptionsetapplications.id,
                revision_id: receptionsetapplications.revision_id,
                field: {field_name: 'field_entite_recoit_decision', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>

          </section>
          
          <section
            v-if="opened_dol.field === 'probleme_initial_resolu'"
            class="probleme_initial_resolu">

            <h5>Réussite / échec / reprise du cercle politique</h5>

            <label for="probleme_initial_resolu">{{ ct_cercle_politique.field_probleme_initial_resolu.label }}</label>
            <!-- <p
              name="probleme_initial_resolu"
              v-html="doleance.probleme_initial_resolu" /> -->
            <SelectEditable
              label="résolu"
              :value="doleance.probleme_initial_resolu"
              :options="{
                '0': 'non',
                '1': 'oui'}"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                nid: doleance.id,
                field: 'field_probleme_initial_resolu'}"
              v-on:updated="reloadConcernementCerclePol(cid)"/>

            <label for="oui_nouvelle_situation">{{ ct_cercle_politique.field_oui_nouvelle_situation.label }}</label>
            <!-- <p
              name="oui_nouvelle_situation"
              v-html="doleance.oui_nouvelle_situation" /> -->
            <ContentEditable 
              tag="p"
              name="oui_nouvelle_situation"
              :value="doleance.oui_nouvelle_situation"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_oui_nouvelle_situation', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>

            <label for="non_adresse_doleance">{{ ct_cercle_politique.field_non_adresse_doleance.label }}</label>
            <!-- <p
              name="non_adresse_doleance"
              v-html="doleance.non_adresse_doleance" /> -->
            <ContentEditable 
              tag="p"
              name="non_adresse_doleance"
              :value="doleance.non_adresse_doleance"
              :html="true" 
              :class="{ ellipsed: headerreduced }" 
              :contenteditable="opened_concernement.can_update"
              :data="{
                entitytype: 'node',
                bundle: 'cercle_politique',
                id: doleance.id,
                field: {field_name: 'field_non_adresse_doleance', value:'value'}
              }"
              v-on:updated="reloadConcernementCerclePol(cid)"/>
          </section>
        </template>
      </section>
    </template>

    <template v-slot:footer>

      <template v-if="concernement.can_update && opened_concernement.opened_doleance">

        <template v-if="opened_concernement.opened_doleance.field === 'decision' || opened_concernement.opened_doleance.field === 'mise_en_oeuvre_decision'">
          <div 
            v-if="!reloading_concernements" 
            @click="addMiseEnOeuvre" 
            class="add-miseenoeuvre-btn btn">
              <span>Ajouter une mise-en-œuvre de la décision</span>
              <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
          </div>
          <div v-else class="add-miseenoeuvre-btn btn">
            <div class="loading">Chargement</div>
          </div>
        </template>

        <template v-if="opened_concernement.opened_doleance.field === 'adresse_de_la_doleance' || opened_concernement.opened_doleance.field === 'reception_traitement'">
          <div 
            v-if="!reloading_concernements" 
            @click="addReceptionEtTraitement" 
            class="add-receptiontraitement-btn btn">
              <span>Ajouter réception et traitement</span>
              <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
          </div>
          <div v-else class="add-receptiontraitement-btn btn">
            <div class="loading">Chargement</div>
          </div>
        </template>

        <template v-if="opened_concernement.opened_doleance.field === 'lenquete' || opened_concernement.opened_doleance.field === 'groupesinterets'">
          <div 
            v-if="!reloading_concernements" 
            @click="addgroupInteret" 
            class="add-groupinteret-btn btn">
              <span>Ajouter un group d'intérêt</span>
              <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
          </div>
          <div v-else class="add-groupinteret-btn btn">
            <div class="loading">Chargement</div>
          </div>
        </template>
        
        <template v-if="opened_concernement.opened_doleance.field === 'adresse_de_la_decision' || opened_concernement.opened_doleance.field === 'receptions_et_applications'">
          <div 
            v-if="!reloading_concernements" 
            @click="addReceptionApplicationDecision" 
            class="add-receptionapplicationdecision-btn btn">
              <span>Ajouter réception et application</span>
              <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
          </div>
          <div v-else class="add-receptionapplicationdecision-btn btn">
            <div class="loading">Chargement</div>
          </div>
        </template>

        <template v-if="opened_concernement.opened_doleance.field === 'receptions_et_applications'">
          <div 
            v-if="!reloading_concernements" 
            @click="addReussiteEchec" 
            class="add-receptionapplicationdecision-btn btn">
              <span>Reussite / échec</span>
              <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
          </div>
          <div v-else class="add-receptionapplicationdecision-btn btn">
            <div class="loading">Chargement</div>
          </div>
        </template>

        <template v-if="opened_concernement.opened_doleance.field === 'mise_en_oeuvre_decision'">
          <div 
            v-if="!reloading_concernements" 
            @click="addAdresseDecision" 
            class="add-adressedecision-btn btn">
              <span>Adresse de la décision à appliquer</span>
              <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
          </div>
          <div v-else class="add-adressedecision-btn btn">
            <div class="loading">Chargement</div>
          </div>
        </template>

        <template v-if="opened_concernement.opened_doleance.field === 'reception_traitement'">
          <div 
            v-if="!reloading_concernements" 
            @click="addDecision" 
            class="add-decision-btn btn">
              <span>Décision</span>
              <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
          </div>
          <div v-else class="add-decision-btn btn">
            <div class="loading">Chargement</div>
          </div>
        </template>

        <template v-if="opened_concernement.opened_doleance.field === 'groupesinterets'">
          <div 
            v-if="!reloading_concernements" 
            @click="addAdresseDoleance" 
            class="add-adressedoleance-btn btn">
              <span>Adresse de la doléance</span>
              <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
          </div>
          <div v-else class="add-adressedoleance-btn btn">
            <div class="loading">Chargement</div>
          </div>
        </template>
        
      </template>

      <template v-if="!opened_concernement.opened_doleance || opened_concernement.opened_doleance.field === 'leprobleme' || opened_concernement.opened_doleance.field === 'lenquete'">
        <div v-if="!reloading_concernements" 
          @click="addCerclePo" 
          class="add-cerclepo-btn btn">
            <span>Ajouter un cercle politique</span>
            <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
        </div>
        <div v-else class="add-cerclepo-btn btn">
          <div class="loading">Chargement</div>
        </div>
      </template>

      
      <!-- <vue-plyr>
        <div class="plyr__video-embed"> -->
          <iframe
            v-if="!opened_concernement.opened_doleance || opened_concernement.opened_doleance.field === 'leprobleme' || opened_concernement.opened_doleance.field === 'lenquete'"
            src="https://www.youtube.com/embed/_Uogb4tJ9c4?amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
            allowfullscreen
            allowtransparency
            frameborder="0"
          ></iframe>
        <!-- </div>
      </vue-plyr> -->
    </template>
  </CartoucheLayout> 
  
  <nav v-if="map_mode === 'doleancer'" class="doleance-switch">
    <div 
      @click="prevDoleance"
      class="prev"
      ref="prevDoleanceBTN" />
    <div
      @click="nextDoleance"
      class="next"
      ref="nextDoleanceBTN" />
  </nav>
  
</template>

<style lang="css">
  iframe{
    width:100%;
    /* height:calc() */
    aspect-ratio: 16/9;
  }
</style>