<script setup>
import { useInvoices } from "~/components/orders/composables/useInvoices";
import PipelinePhase from "~/components/orders/PipelinePhase.vue";

const store = useStore();
const { invoices } = useInvoices();
</script>
<template>
  <div class="card">
    <div class="card-content">
      <p class="fs-16 font-semibold mb-4">Pipeline đơn hàng</p>
      <div class="is-flex is-justify-content-space-evenly">
        <PipelinePhase
          v-for="invoiceStatus in store.Invoice_Status"
          :key="invoiceStatus.id"
          v-bind="invoiceStatus"
        />
      </div>
      <hr class="has-background-grey-85" />
      <div class="is-flex is-justify-content-space-between">
        <p>Tổng đơn hàng</p>
        <p class="fs-18 font-semibold">
          {{ invoices.length }}
        </p>
      </div>
    </div>
  </div>
</template>
