<template>
  <section class="flex flex-col gap-4">
    <Panel :header="$t('اطلاعات صفحه ی درباره ما')">
      <div class="grid grid-cols-2 gap-7">
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="data.expertise" />
            <label>{{ $t("تعداد حوزه های تخصصی") }}</label>
          </FloatLabel>
        </div>
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="data.student" />
            <label>{{ $t("تعداد دانشجو ها") }}</label>
          </FloatLabel>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-7 mt-7">
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText v-model="data.title" class="w-full" />
            <label>{{ $t("تعداد عناوین آموزشی") }}</label>
          </FloatLabel>
        </div>
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="data.hours" />
            <label>{{ $t("تعداد ساعات آموزشی") }}</label>
          </FloatLabel>
        </div>
      </div>
      <div class="flex pt-4 justify-end">
        <Button
          :label="$t('edit')"
          icon="pi pi-save"
          severity="success"
          :loading="saving"
          @click="save(data)"
        />
      </div>
    </Panel>
  </section>
</template>
  
  <script setup>
import { inject, watchEffect, ref, reactive } from "vue";
import { useStaticsStore } from "@/stores/statics";
const { toast, t } = inject("service");
const store = useStaticsStore();
const data = reactive({
  expertise: 0,
  student: 0,
  title: 0,
  hours: 0,
});
const saving = ref(false);
const save = async (data) => {
  saving.value = true;
  const result = await store.edit(data);

  if (result.data === true) {
    toast.add({
      life: 2000,
      severity: "success",
      summary: t("successful"),
      detail: t("اطلاعات با موفقیت ویرایش شد"),
    });
  } else
    return toast.add({
      life: 2000,
      severity: "error",
      summary: t("error"),
      detail: data.msg,
    });

  saving.value = false;
};

watchEffect(async () => {
  await store.index();
  data.expertise = store.items.expertise;
  data.student = store.items.student;
  data.title = store.items.title;
  data.hours = store.items.hours;
});
</script>
  