<template>
  <view class="create-post">
    <view class="form">
      <input class="input" v-model="title" placeholder="标题" />
      <textarea class="textarea" v-model="content" placeholder="内容..." />
      <input class="input" v-model="tags" placeholder="标签（逗号分隔）" />
      <button class="btn-primary" @tap="submit" :loading="loading">发布</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { api } from '../../api/index'

const title = ref('')
const content = ref('')
const tags = ref('')
const loading = ref(false)

async function submit() {
  if (!title.value || !content.value) {
    uni.showToast({ title: '请填写标题和内容', icon: 'none' })
    return
  }
  loading.value = true
  try {
    await api.community.createPost({
      title: title.value,
      content: content.value,
      tags: tags.value,
    })
    uni.showToast({ title: '发布成功', icon: 'success' })
    uni.navigateBack()
  } catch (e: any) {
    uni.showToast({ title: e.message || '发布失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.create-post { padding: 30rpx; }
.form { }
.input {
  background: var(--card); border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
  margin-bottom: 24rpx; border: 1rpx solid var(--border);
}
.textarea {
  background: var(--card); border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
  margin-bottom: 24rpx; border: 1rpx solid var(--border); min-height: 300rpx;
}
.btn-primary {
  background: var(--brand); color: var(--card); border-radius: 12rpx; padding: 24rpx;
  font-size: 30rpx; text-align: center; margin-top: 30rpx; border: none;
}
</style>
