<template>
<div class="month-presentation">
  <div class="date">
    {{ TheDate }}
  </div>
  <div id="display">
    <ul>
        <li> 
            <label for="ca-theo">CA "Séances effectuées"</label>
            <span class="value" v-show="!editing">{{ TheMonth.ca_theo ?? "∅"}}€</span>
            <input type="number" v-model.number="monthCopy.ca_theo"  id="ca-theo" class="value" v-show="editing">
        </li>
        <li> 
            <label for="ca-retro">CA "Séances facturées"</label>
            <span class="value" v-show="!editing">{{ TheMonth.ca_retro ?? "∅"}}€</span>
            <input type="number" v-model.number="monthCopy.ca_retro" id="ca-retro" class="value" v-show="editing">
        </li>
        <li> 
            <label for="ca-react">CA "Séances facturées" réactualisé</label>
            <span class="value" v-show="!editing">{{ TheMonth.ca_react ?? "∅"}}€</span>
            <input type="number" v-model.number="monthCopy.ca_react" id="ca-react" class="value" v-show="editing">
        </li>
        <li> 
            <label for="nbr-seances">Nombre de séances effectuées</label>
            <span class="value" v-show="!editing">{{ TheMonth.nbr_seances ?? "∅"}}</span>
            <input type="number" v-model.number="monthCopy.nbr_seances" id="nbr-seances" class="value" v-show="editing">
        </li>
        <li> 
            <label for="retro">Montant de la rétrocession</label>
            <span class="value" v-show="!editing">{{ TheMonth.retro ?? "∅"}}€</span>
            <input type="number" v-model.number="monthCopy.retro" id="retro" class="value" v-show="editing">
        </li>
        <li> 
            <label for="remuneration">Rémunération </label>
            <span class="value" v-show="!editing">{{ TheMonth.remuneration ?? "∅"}}€</span>
            <input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value" v-show="editing">
        </li>
    </ul>
  </div>
  <div class="actions">
    <button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button>
    <button class="validate" @click="save" v-show="editing"> Valider </button>
    <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
  </div>
</div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'MonthPresentation',
  props: {
      TheDate: String,
      TheMonth: {
          type: Object,
      }
  },
  data () {
      return {
          editing: false,
          monthCopy: Object,
      }
  },
  mounted: function () {
        this.monthCopy =  {...this.TheMonth}
      },
  computed: {
  },
  methods: {
    ...mapActions('travail', {
        'updateMonth': 'updateMonth',
    }),
    ...mapActions('config', {
        'loadData': 'loadData',
    }),
      toggleEdit: function () {
          this.editing = !this.editing
          },
      save: function () {
          this.updateMonth({date: this.TheDate, month: {...this.monthCopy}})
          this.toggleEdit()
          },
      cancel: function () {
          this.monthCopy =  {...this.TheMonth}
          this.toggleEdit()
          },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .month-presentation {
        display: inline-flex;
        flex-direction: row;
        background-color: mintcream;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-radius: 10px;
        }
    .month-presentation > * {
        margin: 20px;
    }

    .date {
        font-size: 1.5em;
        font-weight: bold;
    }

    ul {
        list-style-type: none;
        padding: 0;
        display: flex;
        flex-flow: row wrap;
    }
    li {
        margin: 3px;
        width: 30%;
        display: flex;
        flex-direction: column-reverse;
    }
    .value {
        font-size: 1.5em;
        font-weight: bold;
    }

    .novisible {
        display: None;
    }
</style>
