<template>
  <div class="q-mt-lg">
    <q-card v-for="expense in expenses" :key="expense.date" class="q-mb-md cc-card" @click="ccToggle(expense)">
      <q-card-title>
        R$ {{ expense.amount }}
         <span :class="{ done: expense.done }" slot="subtitle" v-html="dateFormat(expense.date)"></span>
      </q-card-title>
      <q-card-separator />
      <q-card-main :class="{ done: expense.done }">
        {{ expense.description }}
      </q-card-main>
        <q-card-separator />
        <q-card-actions>
          <q-btn @click="askRemove(expense)" flat color="negative" label="Remover" />
          <q-btn @click="ccToggle(expense)" flat color="positive" label="Feito" />
        </q-card-actions>
    </q-card>
  </div>
</template>

<script>
import { date, Dialog } from 'quasar'
import { mapState, mapActions } from 'vuex'

export default {
  mounted () {
    this.setExpenses()
  },
  computed: {
    ...mapState('expenses', ['expenses'])
  },
  methods: {
    ...mapActions('expenses', ['setExpenses', 'removeExpense']),
    dateFormat (dateString) {
      return date.formatDate(dateString, 'DD/MM/YYYY HH:MM')
    },
    askRemove (expense) {
      Dialog.create({
        title: 'Confirmar',
        message: 'Deseja excluir?',
        ok: 'Confirmar',
        cancel: 'Cancelar'
      }).then(() => {
        this.remove(expense)
        this.$q.notify('Removido!')
      }).catch(() => {
        this.$q.notify('Cancelado...')
      })
    },
    remove (expense) {
      this.removeExpense(expense)
    },
    ccToggle (expense) {
      expense.done = !expense.done
    }
  }
}
</script>

<style scoped>
  .cc-card {
    cursor: pointer;
  }
  .done {
    text-decoration: line-through;
    color: #ccc;
  }
</style>