<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.title" />
              <label>{{ $t("حوزه های تخصصی") }}</label>
            </FloatLabel>
          </div>
          <div class="flex flex-col gap-1">
            <FloatLabel>
              <InputText class="w-full" v-model="data.title" />
              <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.student" 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 { jDate } from "@/utils/jDate";
  import { treeTogglerRTL } from "@/utils/tree-toggler-rtl";
  import {
    inject,
    defineAsyncComponent,
    watchEffect,
    ref,
    watch,
    nextTick,
    reactive,
  } from "vue";
  import { useStaticsStore } from "@/stores/statics";
  import { useRoute } from "vue-router";
  const data = reactive({
    expertise: 0,
    student: 0,
    title: 0,
    hours: 0,
  });
  const save = async (data) => {
    const result = await store.edit(data);
  };
  const expandedKeys = ref({});
  
  const CategoryForm = defineAsyncComponent(() =>
    import("../components/CategoryForm.vue")
  );
  
  const { dialog, confirm, toast, t } = inject("service");
  
  const store = useStaticsStore();
  
  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>
  