<script setup lang="ts">
/**
 * 添加/编辑分组
 *
 * 使用 van-form + van-field 收集分组名称，
 * 支持添加和编辑两种模式。
 */
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'

const route = useRoute()
const router = useRouter()

/** 页面标题（添加/编辑） */
const title = computed(() => (route.params.title as string) || '添加')
const pageTitle = computed(() => `${title.value}分组`)

/** 分组 ID（编辑模式时存在） */
const groupId = ref<string>((route.query.groupId as string) || '')

/** 分组名称 */
const menuTitle = ref<string>((route.query.name as string) || '')

/** 是否正在提交 */
const isSubmitting = ref(false)

/**
 * 提交表单
 */
function onSubmit() {
  const trimmedTitle = menuTitle.value.trim()
  if (!trimmedTitle) {
    showToast('分组名称不能为空')
    return
  }
  if (trimmedTitle.length > 10) {
    showToast('分组名称最多10个字符')
    return
  }
  if (isSubmitting.value) return
  isSubmitting.value = true

  setTimeout(() => {
    isSubmitting.value = false
    if (groupId.value) {
      showToast('编辑成功')
    } else {
      showToast('添加成功')
    }
    router.back()
  }, 300)
}

/**
 * 删除分组（仅编辑模式）
 */
function onDelete() {
  // showConfirmDialog would be used here with real API
  showToast('删除功能待接入')
}
</script>

<template>
  <div class="add-group-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar :title="pageTitle" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />

    <div class="add-group-content">
      <!-- 分组名称输入 -->
      <div class="form-section">
        <van-field
          v-model="menuTitle"
          maxlength="10"
          placeholder="请输入分组名称"
          label="分组名称"
        />
      </div>

      <!-- 操作按钮 -->
      <div class="action-section" v-if="title === '添加'">
        <van-button
          round
          block
          type="primary"
          :loading="isSubmitting"
          loading-text="保存中..."
          @click="onSubmit"
        >
          保存
        </van-button>
      </div>

      <div class="action-section-edit" v-if="title === '编辑'">
        <van-button
          round
          block
          type="danger"
          @click="onDelete"
        >
          删除
        </van-button>
        <van-button
          round
          block
          type="primary"
          :loading="isSubmitting"
          loading-text="保存中..."
          @click="onSubmit"
        >
          保存
        </van-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.add-group-page {
  min-height: 100vh;
  background: #f4f7f8;

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }
}

.add-group-content {
  width: 100%;
}

.form-section {
  margin: 12px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.action-section {
  padding: 10px 16px;
}

.action-section-edit {
  padding: 10px 16px;
  display: flex;
  gap: 12px;

  .van-button {
    flex: 1;
  }

  .van-button--danger {
    flex: 0 0 30%;
  }

  .van-button--primary {
    flex: 1;
  }
}
</style>
