<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { NButton, NForm, NFormItem, NInput, NText, useMessage } from 'naive-ui'
import { getCustomStyle, setCustomStyle } from '@/api/system/customStyle'
import type { CustomStyle } from '@/api/system/customStyle'
import { t } from '@/locales'

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

const form = ref<CustomStyle>({
  css: '',
  js: '',
})

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

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

<template>
  <div class="p-4">
    <NText depth="3" class="block mb-3 text-sm">
      {{ t('apps.customStyle.tip') }}
    </NText>
    <NForm label-placement="top">
      <NFormItem :label="t('apps.customStyle.cssLabel')">
        <NInput
          v-model:value="form.css"
          type="textarea"
          :rows="10"
          :placeholder="t('apps.customStyle.cssPlaceholder')"
          style="font-family: monospace; font-size: 13px;"
        />
      </NFormItem>
      <NFormItem :label="t('apps.customStyle.jsLabel')">
        <NInput
          v-model:value="form.js"
          type="textarea"
          :rows="10"
          :placeholder="t('apps.customStyle.jsPlaceholder')"
          style="font-family: monospace; font-size: 13px;"
        />
      </NFormItem>
      <NFormItem>
        <NButton type="primary" :loading="saving" @click="handleSave">
          {{ t('common.save') }}
        </NButton>
      </NFormItem>
    </NForm>
  </div>
</template>
