<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.count"
              :min="0"
              :max="100"
              placeholder="10"
              :showButtons="true"
            />
            <span class="tw:text-gray-600 tw:whitespace-nowrap">шт.</span>
          </template>

          <template #help>
            Количество категорий, которое нужно выводить в блоке. Если поставить 0, то будет
            выводиться только кнопка "Каталог".
          </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, Panel} from "primevue";
import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";

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

const isChanged = computed(() => md5(JSON.stringify(model.value)) !== md5(JSON.stringify(draft.value)));

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

onMounted(() => {
  draft.value = JSON.parse(JSON.stringify(model.value));
});

defineExpose({isChanged});
</script>
