<template>
  <view class="page">
    <NavBar :title="isEdit ? '编辑公告' : '发布公告'" :showBack="true" />
    <scroll-view class="detail-scroll" scroll-y>
      <view class="section">
        <text class="section-title">公告内容</text>
        <view class="form-item">
          <text class="form-label">标题</text>
          <input class="form-input" v-model="form.title" placeholder="请输入公告标题" />
        </view>
        <view class="form-item">
          <text class="form-label">类型</text>
          <picker :range="typeOptions" range-key="label" :value="typeIndex" @change="onTypeChange">
            <view class="form-picker">{{ typeOptions[typeIndex]?.label || '请选择' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="form-label">置顶</text>
          <switch :checked="form.isTop === 1" @change="form.isTop = $event.detail.value ? 1 : 0" color="#FFC107" />
        </view>
        <view class="form-area">
          <text class="form-label" style="margin-bottom: 16rpx">内容</text>
          <textarea class="form-textarea" v-model="form.content" placeholder="请输入公告内容" />
        </view>
      </view>
    </scroll-view>
    <view class="bottom-actions">
      <view class="action-row">
        <view class="save-btn draft" @click="handleSave(true)"><text>保存草稿</text></view>
        <view class="save-btn primary" @click="handlePublish"><text>立即发布</text></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import NavBar from '@/components/NavBar.vue';
import { AnnouncementTypeText } from '@/utils/constants';
import { showToast } from '@/utils/common';
import { post, put } from '@/utils/request';

const typeOptions = [
  { label: AnnouncementTypeText[1], value: 1 },
  { label: AnnouncementTypeText[2], value: 2 },
  { label: AnnouncementTypeText[3], value: 3 },
  { label: AnnouncementTypeText[4], value: 4 }
];

const isEdit = ref(false);
const typeIndex = ref(0);
const form = ref<any>({ title: '', type: 1, content: '', isTop: 0, status: 0 });

onLoad((options?: Record<string, string>) => {
  const id = options?.id ? Number(options.id) : 0;
  if (id > 0) {
    isEdit.value = true;
    loadDetail(id);
  }
});

const loadDetail = async (id: number) => {
  try {
    const res = await (await import('@/utils/request')).get('/announcement/' + id);
    form.value = res;
    typeIndex.value = typeOptions.findIndex(t => t.value === res.type);
    if (typeIndex.value < 0) typeIndex.value = 0;
  } catch { showToast('加载失败'); uni.navigateBack(); }
};

const onTypeChange = (e: any) => { typeIndex.value = e.detail.value; form.value.type = typeOptions[typeIndex.value].value; };

const handleSave = async (isDraft: boolean) => {
  form.value.status = isDraft ? 0 : 1;
  try {
    if (isEdit.value && form.value.id) {
      await put('/announcement/' + form.value.id, form.value);
    } else {
      await post('/announcement', form.value);
    }
    showToast(isDraft ? '已保存草稿' : '已发布', 'success');
    setTimeout(() => uni.navigateBack(), 1500);
  } catch { showToast('操作失败'); }
};

const handlePublish = () => handleSave(false);
</script>

<style lang="scss" scoped>
.page { height: 100vh; background: $bg-color-page; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.detail-scroll { flex: 1; height: 0; }
.section { background: $bg-color-card; margin-bottom: $spacing-2; padding: $spacing-3 $spacing-4; }
.section-title { display: block; font-size: 28rpx; font-weight: 600; color: $text-color-primary; margin-bottom: $spacing-3; padding-bottom: $spacing-2; border-bottom: 1rpx solid $border-color-light; }
.form-item { display: flex; align-items: center; justify-content: space-between; padding: $spacing-2 0; border-bottom: 1rpx solid $border-color-light; }
.form-label { font-size: 28rpx; color: $text-color-secondary; flex-shrink: 0; width: 120rpx; }
.form-input { flex: 1; text-align: right; font-size: 28rpx; color: $text-color-primary; }
.form-picker { flex: 1; text-align: right; font-size: 28rpx; color: $text-color-muted; }
.form-area { padding: $spacing-2 0; }
.form-textarea { width: 100%; height: 400rpx; background: $bg-color-page; border-radius: $radius-base; padding: 20rpx; font-size: 28rpx; box-sizing: border-box; color: $text-color-primary; }
.bottom-actions { padding: $spacing-3 $spacing-4; padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); background: $bg-color-card; border-top: 1rpx solid $border-color-light; flex-shrink: 0; }
.action-row { display: flex; gap: $spacing-2; }
.save-btn { flex: 1; padding: 28rpx 0; border-radius: $radius-xl; display: flex; align-items: center; justify-content: center; }
.save-btn text { font-size: $font-size-lg; font-weight: 600; }
.save-btn.draft { background: $bg-color-page; } .save-btn.draft text { color: $text-color-secondary; }
.save-btn.primary { background: $primary-color; } .save-btn.primary text { color: $text-color-primary; }
</style>

