EmailBill/Web/src/views/ClassificationEdit.vue

<template>
  <div class="page-container-flex">
    <van-nav-bar
      :title="navTitle"
      left-text="返回"
      left-arrow
      placeholder
      @click-left="handleBack"
    />

    <div class="scroll-content">
      <!-- 第一层：选择交易类型 -->
      <div
        v-if="currentLevel === 0"
        class="level-container"
      >
        <van-cell-group inset>
          <van-cell
            v-for="type in typeOptions"
            :key="type.value"
            :title="type.label"
            is-link
            @click="handleSelectType(type.value)"
          />
        </van-cell-group>
      </div>

      <!-- 第二层：分类列表 -->
      <div
        v-else
        class="level-container"
      >
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
          <van-tag
            type="primary"
            closeable
            style="margin-left: 16px"
            @close="handleBackToRoot"
          >
            {{ currentTypeName }}
          </van-tag>
        </div>

        <!-- 分类列表 -->
        <van-empty
          v-if="categories.length === 0"
          description="暂无分类"
        />

        <van-cell-group
          v-else
          inset
        >
          <van-swipe-cell
            v-for="category in categories"
            :key="category.id"
          >
            <van-cell :title="category.name">
              <template #icon>
                <div
                  v-if="category.icon"
                  class="category-icon"
                  v-html="parseIcon(category.icon)"
                />
              </template>
              <template #default>
                <div class="category-actions">
                  <van-button
                    size="small"
                    type="primary"
                    plain
                    @click="handleIconSelect(category)"
                  >
                    选择图标
                  </van-button>
                  <van-button
                    size="small"
                    @click="handleEditOld(category)"
                  >
                    编辑
                  </van-button>
                </div>
              </template>
            </van-cell>
            <template #right>
              <van-button
                square
                type="danger"
                text="删除"
                @click="handleDelete(category)"
              />
            </template>
          </van-swipe-cell>
        </van-cell-group>
      </div>

      <!-- 底部安全距离 -->
      <div style="height: calc(55px + env(safe-area-inset-bottom, 0px))" />

      <div class="bottom-button">
        <!-- 新增分类按钮 -->
        <van-button
          type="primary"
          size="large"
          icon="plus"
          @click="handleAddCategory"
        >
          新增分类
        </van-button>
      </div>

      <!-- 新增分类对话框 -->
      <PopupContainer
        v-model:show="showAddDialog"
        title="新增分类"
        show-cancel-button
        show-confirm-button
        confirm-text="确认"
        cancel-text="取消"
        @confirm="handleConfirmAdd"
        @cancel="resetAddForm"
      >
        <van-form ref="addFormRef">
          <van-field
            v-model="addForm.name"
            name="name"
            label="分类名称"
            placeholder="请输入分类名称"
            :rules="[{ required: true, message: '请输入分类名称' }]"
          />
        </van-form>
      </PopupContainer>

      <!-- 编辑分类对话框 -->
      <PopupContainer
        v-model:show="showEditDialog"
        title="编辑分类"
        show-cancel-button
        show-confirm-button
        confirm-text="保存"
        cancel-text="取消"
        @confirm="handleConfirmEdit"
        @cancel="showEditDialog = false"
      >
        <van-form ref="editFormRef">
          <van-field
            v-model="editForm.name"
            name="name"
            label="分类名称"
            placeholder="请输入分类名称"
            :rules="[{ required: true, message: '请输入分类名称' }]"
          />
        </van-form>
      </PopupContainer>

      <!-- 删除确认对话框 -->
      <PopupContainer
        v-model:show="showDeleteConfirm"
        title="删除分类"
        show-confirm-button
        show-cancel-button
        confirm-text="确定"
        cancel-text="取消"
        @confirm="handleConfirmDelete"
        @cancel="showDeleteConfirm = false"
      >
        <p style="text-align: center; padding: 20px; color: var(--van-text-color-2)">
          删除后无法恢复，确定要删除吗？
        </p>
      </PopupContainer>

      <!-- 删除图标确认对话框 -->
      <PopupContainer
        v-model:show="showDeleteIconConfirm"
        title="删除图标"
        show-confirm-button
        show-cancel-button
        confirm-text="确定"
        cancel-text="取消"
        @confirm="handleConfirmDeleteIcon"
        @cancel="showDeleteIconConfirm = false"
      >
        <p style="text-align: center; padding: 20px; color: var(--van-text-color-2)">
          确定要删除图标吗？
        </p>
      </PopupContainer>

      <!-- 图标选择对话框 -->
      <PopupContainer
        v-model:show="showIconDialog"
        title="选择图标"
        :closeable="false"
      >
        <div class="icon-selector">
          <div
            v-if="currentCategory && currentCategory.icon"
            class="icon-list"
          >
            <div
              v-for="(icon, index) in parseIconArray(currentCategory.icon)"
              :key="index"
              class="icon-item"
              :class="{ active: selectedIconIndex === index }"
              @click="selectedIconIndex = index"
            >
              <div
                class="icon-preview"
                v-html="icon"
              />
            </div>
          </div>
          <div
            v-else
            class="empty-icons"
          >
            <van-empty description="暂无图标" />
          </div>
        </div>
        <template #footer>
          <div class="icon-actions">
            <van-button
              type="primary"
              size="small"
              :loading="isGeneratingIcon"
              :disabled="isGeneratingIcon"
              @click="handleGenerateIcon"
            >
              {{ isGeneratingIcon ? 'AI生成中...' : '生成新图标' }}
            </van-button>
            <van-button
              v-if="currentCategory && currentCategory.icon"
              type="danger"
              size="small"
              plain
              :disabled="isDeletingIcon"
              style="margin-left: 20px;"
              @click="handleDeleteIcon"
            >
              {{ isDeletingIcon ? '删除中...' : '删除图标' }}
            </van-button>
            <van-button
              size="small"
              plain
              style="margin-left: 10px;"
              @click="showIconDialog = false"
            >
              关闭
            </van-button>
          </div>
        </template>
      </PopupContainer>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showSuccessToast, showToast, showLoadingToast, closeToast } from 'vant'
import {
  getCategoryList,
  createCategory,
  deleteCategory,
  updateCategory,
  generateIcon,
  updateSelectedIcon,
  deleteCategoryIcon
} from '@/api/transactionCategory'
import PopupContainer from '@/components/PopupContainer.vue'

const router = useRouter()

// 交易类型选项
const typeOptions = [
  { value: 0, label: '支出' },
  { value: 1, label: '收入' },
  { value: 2, label: '不计收支' }
]

// 层级状态
const currentLevel = ref(0) // 0=类型选择, 1=分类管理
const currentType = ref(null) // 当前选中的交易类型
const currentTypeName = computed(() => {
  const type = typeOptions.find((t) => t.value === currentType.value)
  return type ? type.label : ''
})

// 分类数据
const categories = ref([])

// 编辑对话框
const showAddDialog = ref(false)
const addFormRef = ref(null)
const addForm = ref({
  name: ''
})

// 删除确认
const showDeleteConfirm = ref(false)
const deleteTarget = ref(null)

// 编辑对话框
const showEditDialog = ref(false)
const editFormRef = ref(null)
const editForm = ref({
  id: 0,
  name: ''
})

// 图标选择对话框
const showIconDialog = ref(false)
const currentCategory = ref(null) // 当前正在编辑图标的分类
const selectedIconIndex = ref(0)
const isGeneratingIcon = ref(false)

// 删除图标确认对话框
const showDeleteIconConfirm = ref(false)
const isDeletingIcon = ref(false)

// 计算导航栏标题
const navTitle = computed(() => {
  if (currentLevel.value === 0) {
    return '编辑分类'
  }
  return currentTypeName.value
})

/**
 * 选择交易类型，进入分类管理
 */
const handleSelectType = async (type) => {
  currentType.value = type
  currentLevel.value = 1
  await loadCategories()
}

/**
 * 加载分类列表
 */
const loadCategories = async () => {
  try {
    showLoadingToast({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    })

    const { success, data } = await getCategoryList(currentType.value)
    if (success) {
      categories.value = data || []
    } else {
      showToast('加载分类失败')
    }
  } catch (error) {
    console.error('加载分类错误:', error)
    showToast('加载分类失败: ' + (error.message || '未知错误'))
  } finally {
    closeToast()
  }
}

/**
 * 返回上一级
 */
const handleBack = () => {
  if (currentLevel.value === 1) {
    currentLevel.value = 0
    currentType.value = null
    categories.value = []
  } else {
    if (window.history.length > 1) {
      router.back()
    } else {
      router.replace('/')
    }
  }
}

/**
 * 返回到根目录（类型选择）
 */
const handleBackToRoot = () => {
  currentLevel.value = 0
  currentType.value = null
  categories.value = []
}

/**
 * 新增分类
 */
const handleAddCategory = () => {
  addForm.value = {
    name: ''
  }
  showAddDialog.value = true
}

/**
 * 确认新增
 */
const handleConfirmAdd = async () => {
  try {
    // 表单验证
    await addFormRef.value?.validate()

    showLoadingToast({
      message: '创建中...',
      forbidClick: true,
      duration: 0
    })

    const { success, message } = await createCategory({
      name: addForm.value.name,
      type: currentType.value
    })

    if (success) {
      showSuccessToast('创建成功')
      showAddDialog.value = false
      resetAddForm()
      await loadCategories()
    } else {
      showToast(message || '创建失败')
    }
  } catch (error) {
    console.error('创建失败:', error)
    showToast('创建失败: ' + (error.message || '未知错误'))
  } finally {
    closeToast()
  }
}

/**
 * 编辑分类
 */
const handleEdit = (category) => {
  editForm.value = {
    id: category.id,
    name: category.name
  }
  showEditDialog.value = true
}

/**
 * 打开图标选择器
 */
const handleIconSelect = (category) => {
  currentCategory.value = category
  selectedIconIndex.value = 0
  showIconDialog.value = true
}

/**
 * 生成新图标
 */
const handleGenerateIcon = async () => {
  if (!currentCategory.value) {
    return
  }

  try {
    isGeneratingIcon.value = true
    showLoadingToast({
      message: 'AI正在生成图标...',
      forbidClick: true,
      duration: 0
    })

    const { success, data, message } = await generateIcon(currentCategory.value.id)

    if (success) {
      showSuccessToast('图标生成成功')
      // 重新加载分类列表以获取最新的图标
      await loadCategories()
      // 更新当前分类引用
      const updated = categories.value.find((c) => c.id === currentCategory.value.id)
      if (updated) {
        currentCategory.value = updated
      }
    } else {
      showToast(message || '生成图标失败')
    }
  } catch (error) {
    console.error('生成图标失败:', error)
    showToast('生成图标失败: ' + (error.message || '未知错误'))
  } finally {
    isGeneratingIcon.value = false
    closeToast()
  }
}

/**
 * 确认选择图标
 */
const handleConfirmIconSelect = async () => {
  if (!currentCategory.value) {
    return
  }

  try {
    showLoadingToast({
      message: '保存中...',
      forbidClick: true,
      duration: 0
    })

    const { success, message } = await updateSelectedIcon(
      currentCategory.value.id,
      selectedIconIndex.value
    )

    if (success) {
      showSuccessToast('图标保存成功')
      showIconDialog.value = false
      await loadCategories()
    } else {
      showToast(message || '保存失败')
    }
  } catch (error) {
    console.error('保存图标失败:', error)
    showToast('保存图标失败: ' + (error.message || '未知错误'))
  } finally {
    closeToast()
  }
}

/**
 * 删除图标
 */
const handleDeleteIcon = () => {
  if (!currentCategory.value || !currentCategory.value.icon) {
    return
  }
  showDeleteIconConfirm.value = true
}

/**
 * 确认删除图标
 */
const handleConfirmDeleteIcon = async () => {
  if (!currentCategory.value) {
    return
  }

  try {
    isDeletingIcon.value = true
    showLoadingToast({
      message: '删除中...',
      forbidClick: true,
      duration: 0
    })

    const { success, message } = await deleteCategoryIcon(currentCategory.value.id)

    if (success) {
      showSuccessToast('图标删除成功')
      showDeleteIconConfirm.value = false
      showIconDialog.value = false
      await loadCategories()
    } else {
      showToast(message || '删除失败')
    }
  } catch (error) {
    console.error('删除图标失败:', error)
    showToast('删除图标失败: ' + (error.message || '未知错误'))
  } finally {
    isDeletingIcon.value = false
    closeToast()
  }
}

/**
 * 编辑分类
 */
const handleEditOld = (category) => {
  editForm.value = {
    id: category.id,
    name: category.name
  }
  showEditDialog.value = true
}

/**
 * 确认编辑
 */
const handleConfirmEdit = async () => {
  try {
    await editFormRef.value?.validate()

    showLoadingToast({
      message: '保存中...',
      forbidClick: true,
      duration: 0
    })

    const { success, message } = await updateCategory({
      id: editForm.value.id,
      name: editForm.value.name
    })

    if (success) {
      showSuccessToast('保存成功')
      showEditDialog.value = false
      await loadCategories()
    } else {
      showToast(message || '保存失败')
    }
  } catch (error) {
    console.error('保存失败:', error)
    showToast('保存失败: ' + (error.message || '未知错误'))
  } finally {
    closeToast()
  }
}

/**
 * 删除分类
 */
const handleDelete = async (category) => {
  deleteTarget.value = category
  showDeleteConfirm.value = true
}

/**
 * 确认删除
 */
const handleConfirmDelete = async () => {
  if (!deleteTarget.value) {
    return
  }

  try {
    showLoadingToast({
      message: '删除中...',
      forbidClick: true,
      duration: 0
    })

    const { success, message } = await deleteCategory(deleteTarget.value.id)

    if (success) {
      showSuccessToast('删除成功')
      showDeleteConfirm.value = false
      deleteTarget.value = null
      await loadCategories()
    } else {
      showToast(message || '删除失败')
    }
  } catch (error) {
    console.error('删除失败:', error)
    showToast('删除失败: ' + (error.message || '未知错误'))
  } finally {
    closeToast()
  }
}

/**
 * 重置新增表单
 */
const resetAddForm = () => {
  addForm.value = {
    name: ''
  }
}

/**
 * 解析图标数组（第一个图标为当前选中的）
 */
const parseIcon = (iconJson) => {
  if (!iconJson) {
    return ''
  }
  try {
    const icons = JSON.parse(iconJson)
    return Array.isArray(icons) && icons.length > 0 ? icons[0] : ''
  } catch {
    return ''
  }
}

/**
 * 解析图标数组为完整数组
 */
const parseIconArray = (iconJson) => {
  if (!iconJson) {
    return []
  }
  try {
    const icons = JSON.parse(iconJson)
    return Array.isArray(icons) ? icons : []
  } catch {
    return []
  }
}

onMounted(() => {
  // 初始化时显示类型选择
  currentLevel.value = 0
})
</script>

<style scoped>
.level-container {
  min-height: calc(100vh - 50px);
  margin-top: 16px;
}

.breadcrumb {
  padding: 8px 0;
}

.breadcrumb .van-tag {
  cursor: pointer;
}

.category-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.category-icon :deep(svg) {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.category-actions {
  display: flex;
  gap: 8px;
}

.icon-selector {
  padding: 16px;
}

.icon-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.icon-item {
  width: 60px;
  height: 60px;
  border: 2px solid var(--van-border-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.icon-item:hover {
  border-color: var(--van-primary-color);
  background-color: var(--van-primary-color-light);
}

.icon-item.active {
  border-color: var(--van-primary-color);
  background-color: var(--van-primary-color-light);
  box-shadow: 0 2px 8px rgba(25, 137, 250, 0.3);
}

.icon-preview {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-preview :deep(svg) {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.empty-icons {
  padding: 20px 0;
}

.icon-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 0;
}

/* PopupContainer 的 footer 已有边框，所以这里不需要重复 */

/* 深色模式 */
/* @media (prefers-color-scheme: dark) {
  .level-container {
    background: var(--van-background);
  }
} */

/* 设置页面容器背景色 */
:deep(.van-nav-bar) {
  background: transparent !important;
}
</style>