<template>
  <h1>{{ msg }}</h1>
  <div>
    <button
      class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
      @click="inc1"
    >
      order product n°{{ products }}
    </button>
    <button
      class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
      @click="price++"
    >
      inc price {{ price }}€
    </button>
    <button
      class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
      @click="decPrice"
    >
      dec price {{ price }}€
    </button>
  </div>
  <p>
    TOTAL HT = {{ global.state.count }}€ <br />
    TOTAL TTC = {{ global.getters.ttc.value }}€
  </p>
  <button
    class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
    @click="global.actions.reset()"
  >
    RESET
  </button>
</template>

<script lang="ts">
import global from '@/stores/global'
import { defineComponent, ref } from 'vue'
export default defineComponent({
  props: {
    msg: { type: String, required: true }
  },
  setup() {
    const products = ref(1)
    const price = ref(5)
    return { products, price, global }
  },
  methods: {
    inc1() {
      this.products++
      global.actions.inc(this.price)
    },
    decPrice() {
      if (this.price > 1) this.price--
    }
  }
})
</script>
