<template>
  <div v-if="draft">
    <BaseForm
      v-model="draft"
      :isChanged="isChanged"
      @onApply="onApply"
      @cancel="$emit('cancel')"
    >
      <div class="tw:space-y-6">
        <!-- Максимальное количество страниц -->
        <FormItem label="Максимальное количество страниц">
          <template #default>
            <InputNumber
              v-model="draft.data.max_page_count"
              :min="1"
              :max="100"
              placeholder="10"
              :showButtons="true"
            />
            <span class="tw:text-gray-600 tw:whitespace-nowrap">страниц</span>
          </template>

          <template #help>
            Укажите, сколько страниц товаров можно подгружать при бесконечной прокрутки.
            После достижения этого лимита подгрузка остановится.
            Ограничение страниц снижает нагрузку на сервер.
          </template>
        </FormItem>
      </div>
    </BaseForm>
  </div>
</template>

<script setup>
import {computed, defineExpose, onMounted, ref} from "vue";
import {md5} from "js-md5";
import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
import {InputNumber} from "primevue";
import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";

const draft = ref(null);
const model = defineModel();
const emit = defineEmits(['cancel']);

const isChanged = computed(() => {
  const normalize = (obj) => {
    return JSON.stringify(obj, (key, value) => {
      if (['max_page_count'].includes(key)) {
        return value !== null && value !== undefined && value !== '' ? parseInt(value) : value;
      }
      return value;
    });
  };
  return md5(normalize(model.value)) !== md5(normalize(draft.value));
});

function onApply() {
  model.value = JSON.parse(JSON.stringify(draft.value));
}

onMounted(() => {
  draft.value = JSON.parse(JSON.stringify(model.value));
  if (draft.value.data) {
    if (draft.value.data.max_page_count) draft.value.data.max_page_count = parseInt(draft.value.data.max_page_count);
  }
});

defineExpose({isChanged});
</script>
