<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { NButton, NForm, NFormItem, NInput, useMessage } from 'naive-ui'
import { getSiteCustomize, setSiteCustomize } from '@/api/system/siteCustomize'
import type { SiteCustomize } from '@/api/system/siteCustomize'
import { t } from '@/locales'

const ms = useMessage()
const saving = ref(false)

const form = ref<SiteCustomize>({
  siteTitle: '',
  faviconUrl: '',
  loginDescription: '',
})

onMounted(async () => {
  try {
    const res = await getSiteCustomize<SiteCustomize>()
    if (res.code === 0 && res.data)
      form.value = res.data
  }
  catch {}
})

async function handleSave() {
  saving.value = true
  try {
    const res = await setSiteCustomize<any>(form.value)
    if (res.code === 0)
      ms.success(t('apps.siteCustomize.saveSuccess'))
  }
  catch {}
  finally {
    saving.value = false
  }
}
</script>

<template>
  <div class="p-4">
    <NForm label-placement="top">
      <NFormItem :label="t('apps.siteCustomize.siteTitle')">
        <NInput
          v-model:value="form.siteTitle"
          :placeholder="t('apps.siteCustomize.siteTitlePlaceholder')"
        />
      </NFormItem>
      <NFormItem :label="t('apps.siteCustomize.faviconUrl')">
        <NInput
          v-model:value="form.faviconUrl"
          :placeholder="t('apps.siteCustomize.faviconUrlPlaceholder')"
        />
      </NFormItem>
      <NFormItem :label="t('apps.siteCustomize.loginDescription')">
        <NInput
          v-model:value="form.loginDescription"
          type="textarea"
          :rows="3"
          :placeholder="t('apps.siteCustomize.loginDescriptionPlaceholder')"
        />
      </NFormItem>
      <NFormItem>
        <NButton type="primary" :loading="saving" @click="handleSave">
          {{ t('common.save') }}
        </NButton>
      </NFormItem>
    </NForm>
  </div>
</template>
