<template>
  <div class="form-part form-title" v-if="siteManagementPageStore.loaded">
    <form-input
      required
      modelKey="title"
      v-model="siteManagementPageStore.pageForm.title"
      :invalidText="siteManagementPageValidationStore.invalidTexts.title"
      placeholder="Sayfa Başlığı"
      @keyup="siteManagementPageStore.CreateSlug()" />
    <div class="title-second">
      <strong>Sayfa Linki:</strong>
      <span class="page-slug">
        {{ siteManagementPageStore.pageForm.slug }}
      </span>
    </div>
  </div>
  <div
    :class="[
      'form-part',
      siteManagementPageStore.formChanged && !siteManagementPageStore.isNew
        ? 'changed'
        : ''
    ]">
    <div class="form-part-title">
      <h4>Sayfa İçeriği</h4>
      <div class="form-part-title-buttons"></div>
    </div>
    <div class="form-part-content" v-if="siteManagementPageStore.loaded">
      <form-summer
        label="İçerik"
        modelKey="content"
        v-model="siteManagementPageStore.pageForm.content"
        @change="OnKeyup" />
      <form-input
        modelKey="etiket"
        v-model="siteManagementPageStore.pageForm.etiket"
        label="Etiketler"
        description="Etiketleri , ile ayırark yazınız"
        @keyup="OnKeyup" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onBeforeMount } from 'vue'
  import { useRoute } from 'vue-router'
  const route = useRoute()

  import { useSiteManagementPageStore } from '../../stores/siteManagementPageStore'
  const siteManagementPageStore = useSiteManagementPageStore()
  import { useSiteManagementPageValidationStore } from '../../validation/siteManagementPageValidationStore'
  const siteManagementPageValidationStore = useSiteManagementPageValidationStore()
  import { useSiteManagementPageService } from '../../service/siteManagementPageService'
  const siteManagementPageService = useSiteManagementPageService()

  const OnKeyup = () => {
    siteManagementPageStore.formChanged = true
  }

  onBeforeMount(async () => {
    if (!siteManagementPageStore.isNew) {
      await siteManagementPageService.GetData()
    } else {
      siteManagementPageStore.ResetForm()
      siteManagementPageStore.loaded = true
    }
  })
</script>
