<template>
<div id="create-month" >
    <div class="month-presentation" id="new-month">
      <div class="date">
          <input type="month" v-model="monthDate">
      </div>
      <div class="datas">
        <ul>
            <li> 
                <label for="ca-theo">CA théorique</label>
                <input type="number" v-model.number="monthCopy.ca_theo"  id="ca-theo" class="value" >
            </li>
            <li> 
                <label for="ca-retro">CA rétrocession</label>
                <input type="number" v-model.number="monthCopy.ca_retro" id="ca-retro" class="value" >
            </li>
            <li> 
                <label for="ca-react">CA réactualisé</label>
                <input type="number" v-model.number="monthCopy.ca_react" id="ca-react" class="value" >
            </li>
            <li> 
                <label for="nbr-seances">Nombre de séances effectuées</label>
                <input type="number" v-model.number="monthCopy.nbr_seances" id="nbr-seances" class="value" >
            </li>
            <li> 
                <label for="retro">Montant de la rétrocession</label>
                <input type="number" v-model.number="monthCopy.retro" id="retro" class="value" >
            </li>
            <li> 
                <label for="remuneration">Rémunération effectuée</label>
                <input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value">
            </li>
        </ul>
      </div>
      <div class="actions">
        <button class="validate" @click="save"> Valider </button>
        <button class="cancel" @click="cancel"> Annuler </button>
      </div>
    </div>
</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
const today = new Date();
function formatDate(date) {
    var y = ''+date.getFullYear()
    var m = ''+(date.getMonth()+1)
    if (m.length < 2) { m = '0'+m}
    return [y, m].join('-')
}

export default {
  name: 'NewMonth',
  props: {
  },
  components: {
  },
  data () {
      return {
            monthDate: formatDate(today),
            monthCopy: Object,
          }
  },
  mounted () {
      this.monthCopy = this.theEmptyMonth
  },
  computed: {
    ...mapGetters('travail', {
        'theEmptyMonth': 'TheEmptyMonth',
    }),
  },
  methods: {
    ...mapActions('travail', {
        'createMonth': 'createMonth',
    }),
    ...mapActions('config', {
        'writeData': 'writeData',
    }),
    save: function () {
        console.log("save")
        console.log(this.monthCopy)
        this.createMonth({date: this.monthDate, month: this.monthCopy})
        this.writeData()
    },
    cancel: function () {
      this.monthCopy = this.theEmptyMonth
    },
  },
}
</script>

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

    .date > input {
        font-size: 1.2em;
        font-weight: bold;
        display: inline-flex;
        width: 6rem;
        flex-wrap: wrap;
        align-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
    }
    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;
    }
</style>
