<script setup lang="ts">
  import BackButton from '~/components/BackButton.vue';
  import { MdEditor } from 'md-editor-v3';
  import 'md-editor-v3/lib/style.css';

  const emit = defineEmits(['articleEditFinish']);
  const { baseContent, baseTitle, saveButton } = defineProps({
    baseContent: {
      type: String,
      default: '',
    },
    baseTitle: {
      type: String,
      default: '',
    },
    saveButton: {
      type: String,
      default: '保存文章',
    },
  });
  const content = ref(baseContent);
  const title = ref(baseTitle);

  async function saveArticle() {
    if (title.value === '' || content.value === '') {
      await MessagePlugin.error('标题和正文不能为空');
      return;
    }
    emit('articleEditFinish', {
      title: title.value,
      content: content.value,
    });
  }
</script>

<template>
  <div class="p-6">
    <back-button class="ml-3" />
    <div
      class="m-2 bg-white rounded-xl p-6 border-gray-200 border-2 min-h-[300px] dark:bg-neutral-800 dark:border-zinc-600"
    >
      <t-form @submit="saveArticle">
        <t-form-item name="title" label="标题">
          <t-input v-model="title"></t-input>
        </t-form-item>
        <t-form-item name="content" label="正文">
          <MdEditor v-model="content" :theme="useColorMode().preference"/>
        </t-form-item>
        <t-form-item>
          <t-button theme="primary" type="submit">{{ saveButton }}</t-button>
        </t-form-item>
      </t-form>
    </div>
  </div>
</template>
