<template>
  <section class="flex flex-col gap-7 pt-5 w-96">
    <div class="flex flex-col gap-1">
      <FloatLabel>
        <InputText v-model="name" class="w-full" />
        <label>{{ $t("name") }}</label>
      </FloatLabel>
      <small v-if="errors.name">{{ errors.name }}</small>
    </div>
    <div class="w-full flex gap-2 mt-4">
      <Button
        :label="$t('back')"
        outlined
        severity="secondary"
        class="ml-auto"
        @click="dialog.close()"
      />
      <Button
        :label="$t('save')"
        icon="pi pi-save"
        severity="success"
        @click="save()"
        :loading="saving"
      />
    </div>
  </section>
</template>
  
  <script setup>
import { useCategoriesStore } from "@/stores/categoreis";
import { inject, reactive, ref } from "vue";
const name = ref("");
const dialog = inject("dialogRef");
const { toast, t } = inject("service");
const errors = reactive({});
const saving = ref(false);
const store = useCategoriesStore();
const save = async () => {
  saving.value = true;
  const { status, data } = await store.create(name);
  saving.value = false;
  if (status === 201 || status === 200)
    toast.add({
      life: 2000,
      severity: "success",
      summary: t("successful"),
      detail: t("دسته بندی جدید ایجاد شد"),
    });
  dialog.value.close();
};
</script>
  
  <style lang="scss" scoped></style>