<template>
  <Panel :header="$t('تاریخچه ی تخفیف ها')">
    <DataTable :value="store.items.discount">
      <Column field="code" :header="$t('کد تخفیف')" />
      <Column
      :field="({ admin }) => admin.name"
      :header="$t('سازنده')"
      />
      <Column :field="({startDate}) => jDate(startDate)" :header="$t('تاریخ شروع')" />
        <Column :field="({endDate}) => jDate(endDate)" :header="$t('تاریخ پایان')" />
      <Column
        field="statusText"
        :header="$t('status')"
      /> 
      <template #empty>
        <p>{{ store.fetching ? $t("loading") : $t("emptyTable") }}</p>
      </template>
    </DataTable>
  </Panel>
</template>


<script setup>
import { watchEffect } from "vue";
import { useDiscountStore } from "../stores/discounts";
const store = useDiscountStore();
import { jDate } from "@/utils/jDate";
watchEffect(async () => {
  await store.history();
 
});
</script>