<template>
  <div class="form-part">
    <div class="form-part-title">
      <h4>Sayfa Durumu</h4>
      <div class="form-part-title-buttons"></div>
    </div>
    <div class="form-part-content" v-if="siteManagementPageStore.loaded">
      <form-select
        v-model="siteManagementPageStore.pageForm.status"
        :listData="pageStatus"
        listVal="id"
        listText="deger"
        modelKey="status"
        label="Durum"
        @change="OnKeyup" />
      <form-select
        v-model="siteManagementPageStore.pageForm.parentPageId"
        :listData="siteManagementPageStore.allPagesList"
        listVal="id"
        listText="title"
        modelKey="parentPageId"
        label="Üst Sayfa"
        @change="OnKeyup" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, onBeforeMount } from 'vue'

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

  const pageStatus = ref<Record<string,any>[]>([
    { id: 1, deger: 'Taslak' },
    { id: 2, deger: 'Yayınla' }
  ])

  const OnKeyup = () => {
    siteManagementPageStore.formChanged = true
  }
  onBeforeMount(async () => {
    await siteManagementPageService.GetAllPages()
  })

</script>
