<script lang="ts" setup>
import { ref } from 'vue';
import type { FormInst, FormRules, UploadFileInfo } from 'naive-ui';
import { client, safeClient } from '@/service/api';
import UploadS3 from '@/components/upload/index.vue';

defineOptions({
  name: 'NewsAdd'
});

const emit = defineEmits<{
  (e: 'close'): void;
}>();

type NewsItem = Treaty.Body<typeof client.api.admin.news.post>;

const formRef = ref<FormInst | null>(null);
const loading = ref(false);

const formModel = ref<NewsItem>({
  title: '',
  summary: '',
  content: '',
  hasVideo: false,
  isHot: false,
  isPinned: false,
  thumbnailId: null,
  attachmentIds: [],
  sortOrder: 0
});

const rules: FormRules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  summary: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
  content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
};

async function handleSubmit() {
  await formRef.value?.validate();
  loading.value = true;

  try {
    const result = await safeClient(() =>
      client.api.admin.news.post({
        ...formModel.value
      })
    );

    if (result.data) {
      window.$message?.success('创建成功');
      resetForm();
      emit('close');
    }
  } finally {
    loading.value = false;
  }
}

function resetForm() {
  formModel.value = {
    title: '',
    summary: '',
    content: '',
    hasVideo: false,
    isHot: false,
    isPinned: false,
    attachmentIds: [],
    sortOrder: 0,
    publishedAt: null
  };
}
</script>

<template>
  <div>
    <NForm ref="formRef" :model="formModel" :rules="rules" label-placement="left" :label-width="100">
      <NFormItem label="缩略图" path="thumbnailId">
        <UploadS3
          :model-value="formModel.thumbnailId ? [formModel.thumbnailId] : undefined"
          :max-size="20"
          :max-files="1"
          accept="image/*"
          placeholder="上传图片"
          :fetch-options="{ businessType: 'news_attachment' }"
          @update:model-value="evt => (formModel.thumbnailId = evt.length > 0 ? evt[0] : undefined)"
        />
      </NFormItem>
      <NGrid cols="2" x-gap="16px">
        <NFormItemGi label="标题" path="title">
          <NInput v-model:value="formModel.title" placeholder="请输入标题" />
        </NFormItemGi>

        <NFormItemGi label="摘要" path="summary">
          <NInput v-model:value="formModel.summary" placeholder="请输入摘要" />
        </NFormItemGi>
      </NGrid>

      <NFormItem label="内容" path="content">
        <MarkdownEditor v-model:value="formModel.content" placeholder="请输入新闻内容" :preview="false" />
      </NFormItem>

      <NGrid cols="2" x-gap="16px">
        <NFormItemGi label="是否热门" path="isHot">
          <NSwitch v-model:value="formModel.isHot" />
        </NFormItemGi>

        <NFormItemGi label="是否置顶" path="isPinned">
          <NSwitch v-model:value="formModel.isPinned" />
        </NFormItemGi>
      </NGrid>

      <NFormItem label="排序值" path="sortOrder">
        <NInputNumber v-model:value="formModel.sortOrder" placeholder="请输入排序值" class="w-full" />
      </NFormItem>

      <NFormItem label="附件文件" path="attachmentIds">
        <UploadS3
          :model-value="formModel.attachmentIds || []"
          :max-size="20"
          :max-files="3"
          placeholder="上传附件"
          :fetch-options="{ businessType: 'news_attachment' }"
          @update:model-value="evt => (formModel.attachmentIds = evt.length > 0 ? evt : undefined)"
        />
      </NFormItem>
    </NForm>

    <div class="mt-16px flex justify-end gap-12px">
      <NButton @click="emit('close')">取消</NButton>
      <NButton type="primary" :loading="loading" @click="handleSubmit">确定</NButton>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
