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>
                <Icon
                  v-if="category.icon"
                  :icon-identifier="category.icon"
                  :size="20"
                />
              </template>
              <template #default>
                <div class="category-actions">
                  <van-button
                    size="small"
                    type="primary"
                    plain
                    @click="handleIconSelect(category)"
                  >
                    选择图标
                  </van-button>
                  <van-button
                    size="small"
                    @click="handleEdit(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>

    <!-- 新增分类按钮 -->
    <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-cancel-button
      show-confirm-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>

    <!-- 图标选择对话框 -->
    <IconSelector
      v-model:show="showIconDialog"
      :icons="iconCandidates"
      :title="`为「${currentCategory?.name || ''}」选择图标`"
      :default-icon-identifier="currentCategory?.icon || ''"
      @confirm="handleConfirmIconSelect"
      @cancel="handleCancelIconSelect"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showSuccessToast, showToast, showLoadingToast, closeToast } from 'vant'
import Icon from '@/components/Icon.vue'
import IconSelector from '@/components/IconSelector.vue'
import PopupContainer from '@/components/PopupContainer.vue'
import {
  getCategoryList,
  createCategory,
  deleteCategory,
  updateCategory
} from '@/api/transactionCategory'
import {
  generateSearchKeywords,
  searchIcons,
  updateCategoryIcon as updateCategoryIconApi
} from '@/api/icons'

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 iconCandidates = ref([])
const isLoadingIcons = 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 resetAddForm = () => {
  addForm.value = {
    name: ''
  }
}

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

  try {
    isLoadingIcons.value = true

    const { success: keywordsSuccess, data: keywordsResponse } = await generateSearchKeywords(category.name)

    if (!keywordsSuccess || !keywordsResponse || !keywordsResponse.keywords || keywordsResponse.keywords.length === 0) {
      showToast('生成搜索关键字失败')
      return
    }

    const { success: iconsSuccess, data: icons } = await searchIcons(keywordsResponse.keywords)

    console.log('图标搜索响应:', { iconsSuccess, icons, iconsType: typeof icons, iconsIsArray: Array.isArray(icons) })

    if (!iconsSuccess) {
      showToast('搜索图标失败')
      return
    }

    if (!icons || icons.length === 0) {
      console.warn('图标数据为空')
      showToast('未找到匹配的图标')
      return
    }

    iconCandidates.value = icons
  } catch (error) {
    console.error('搜索图标错误:', error)
    showToast('搜索图标失败')
    isLoadingIcons.value = false
  }
}

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

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

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

    if (success) {
      showSuccessToast('图标保存成功')
      showIconDialog.value = false
      currentCategory.value = null
      iconCandidates.value = []
      await loadCategories()
    } else {
      showToast(message || '保存失败')
    }
  } catch (error) {
    console.error('保存图标失败:', error)
    showToast('保存图标失败')
  } finally {
    closeToast()
  }
}

/**
 * 取消图标选择
 */
const handleCancelIconSelect = () => {
  showIconDialog.value = false
  currentCategory.value = null
  iconCandidates.value = []
}

/**
 * 编辑分类
 */
const handleEdit = (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()
  }
}
</script>

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

.breadcrumb {
  padding: 8px 0;
}

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

.scroll-content {
  flex: 1;
  overflow-y: auto;
}

.bottom-button {
  padding: 16px;
}

.category-actions {
  display: flex;
  gap: 8px;
}
</style>