<template>
  <div class="step_title">Mode de livraison</div>

  <div v-if="store.productList.length === 0" class="alert alert-danger" role="alert">
    Nous sommes désolé le service est temporairement indisponible
    </div>

  <div v-else class="d-flex flex-lg-row flex-column align-items-stretch">
    <FlexCard v-for="(product, i) in store.productList" :card="product">

      <template v-slot:card-image><img :alt="product.name" :src="product.media_list[0].filename" class="me-2"
                                       height="50"/></template>

      <template v-slot:card-body>
        <div class="fw-bold mb-2 text-primary"><i class="fa-solid fa-calendar-days"></i> {{ store.msgDelivery[i] }}
        </div>
        <div v-html="(store.withPrescription ? product.description1 : product.description2)"></div>
      </template>

      <template v-slot:btn-card>
        <button class="btn btn-primary" @click="goNexStep(product.id)">
          {{ formatPrice(store.withPrescription ? product.price : product.price2) }} TTC
        </button>
      </template>

    </FlexCard>
  </div>
</template>

<script>
import {useMMCMStore} from '../stores/mmcm.js'
import FlexCard from "../components/FlexCard.vue";


export default {
  setup() {
    const store = useMMCMStore()
    return {
      store
    }
  },
  components: {FlexCard},
  name: "delivery-option-step-2",
  methods: {
    goNexStep: function (idProduct) {
      this.store.setIdProduct(idProduct);
      this.$router.push({path: '/delivery-option-step-3'});
    },
    formatPrice(price) {
      return new Intl.NumberFormat('fr-FR', {
        style: 'currency',
        currency: 'EUR',
        minimumFractionDigits: 2
      }).format(price)
    }
  }
}
</script>

<style scoped>

</style>
