﻿<template>
  <van-popup 
    v-model:show="visible" 
    position="bottom"
    :style="{ height: '85%' }"
    round
    closeable
    @update:show="handleVisibleChange"
  >
    <div class="transaction-detail" v-if="transaction">
      <div class="detail-header" style="margin-top: 10px;margin-left: 10px;">
        <h3>交易详情</h3>
      </div>
      
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-cell title="卡号" :value="transaction.card" />
          <van-cell title="交易时间" :value="formatDate(transaction.occurredAt)" />
          <van-cell title="记录时间" :value="formatDate(transaction.createTime)" />
        </van-cell-group>

        <van-cell-group inset title="交易明细">
          <van-field
            v-model="editForm.reason"
            name="reason"
            label="交易摘要"
            placeholder="请输入交易摘要"
            type="textarea"
            rows="2"
            autosize
            maxlength="200"
            show-word-limit
          />
          <van-field
            v-model="editForm.amount"
            name="amount"
            label="交易金额"
            placeholder="请输入交易金额"
            type="number"
            :rules="[{ required: true, message: '请输入交易金额' }]"
          />
          <van-field
            v-model="editForm.balance"
            name="balance"
            label="交易后余额"
            placeholder="请输入交易后余额"
            type="number"
            :rules="[{ required: true, message: '请输入交易后余额' }]"
          />
          <van-field
            v-model="editForm.typeText"
            is-link
            readonly
            name="type"
            label="交易类型"
            placeholder="请选择交易类型"
            @click="showTypePicker = true"
            :rules="[{ required: true, message: '请选择交易类型' }]"
          />
          <van-field
            v-model="editForm.classify"
            is-link
            readonly
            name="classify"
            label="交易分类"
            placeholder="请选择或输入交易分类"
            @click="openClassifyPicker"
          />
          <van-field
            v-model="editForm.subClassify"
            is-link
            readonly
            name="subClassify"
            label="交易子分类"
            placeholder="请选择或输入交易子分类"
            @click="showSubClassifyPicker = true"
          />
        </van-cell-group>

        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" :loading="submitting">
            保存修改
          </van-button>
        </div>
      </van-form>
    </div>
  </van-popup>

  <!-- 交易类型选择器 -->
  <van-popup v-model:show="showTypePicker" position="bottom" round>
    <van-picker
      show-toolbar
      :columns="typeColumns"
      @confirm="onTypeConfirm"
      @cancel="showTypePicker = false"
    />
  </van-popup>

  <!-- 交易分类选择器 -->
  <van-popup v-model:show="showClassifyPicker" position="bottom" round>
    <van-picker
      ref="classifyPickerRef"
      :columns="classifyColumns"
      @confirm="onClassifyConfirm"
      @cancel="showClassifyPicker = false"
    >
      <template #toolbar>
        <div class="picker-toolbar">
          <van-button class="toolbar-cancel" size="small" @click="clearClassify">清空</van-button>
          <van-button class="toolbar-add" size="small" type="primary" @click="showAddClassify = true">新增</van-button>
          <van-button class="toolbar-confirm" size="small" type="primary" @click="confirmClassify">确认</van-button>
        </div>
      </template>
    </van-picker>
  </van-popup>

  <!-- 交易子分类选择器 -->
  <van-popup v-model:show="showSubClassifyPicker" position="bottom" round>
    <van-picker
      ref="subClassifyPickerRef"
      :columns="subClassifyColumns"
      @confirm="onSubClassifyConfirm"
      @cancel="showSubClassifyPicker = false"
    >
      <template #toolbar>
        <div class="picker-toolbar">
          <van-button class="toolbar-cancel" size="small" @click="clearSubClassify">清空</van-button>
          <van-button class="toolbar-add" size="small" type="primary" @click="showAddSubClassify = true">新增</van-button>
          <van-button class="toolbar-confirm" size="small" type="primary" @click="confirmSubClassify">确认</van-button>
        </div>
      </template>
    </van-picker>
  </van-popup>

  <!-- 新增分类对话框 -->
  <van-dialog 
    v-model:show="showAddClassify" 
    title="新增交易分类" 
    show-cancel-button
    @confirm="addNewClassify"
  >
    <van-field v-model="newClassify" placeholder="请输入新的交易分类" />
  </van-dialog>

  <!-- 新增子分类对话框 -->
  <van-dialog 
    v-model:show="showAddSubClassify" 
    title="新增交易子分类" 
    show-cancel-button
    @confirm="addNewSubClassify"
  >
    <van-field v-model="newSubClassify" placeholder="请输入新的交易子分类" />
  </van-dialog>
</template>

<script setup>
import { ref, reactive, watch, defineProps, defineEmits } from 'vue'
import { showToast } from 'vant'
import { updateTransaction } from '@/api/transactionRecord'
import { getCategoryTree, createCategory } from '@/api/transactionCategory'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  transaction: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update:show', 'save'])

const visible = ref(false)
const submitting = ref(false)

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

// 分类相关
const classifyColumns = ref([])
const subClassifyColumns = ref([])
const showTypePicker = ref(false)
const showClassifyPicker = ref(false)
const showSubClassifyPicker = ref(false)
const showAddClassify = ref(false)
const showAddSubClassify = ref(false)
const newClassify = ref('')
const newSubClassify = ref('')
const classifyPickerRef = ref(null)
const subClassifyPickerRef = ref(null)

// 编辑表单
const editForm = reactive({
  id: 0,
  reason: '',
  amount: '',
  balance: '',
  type: 0,
  typeText: '',
  classify: '',
  subClassify: ''
})

// 监听props变化
watch(() => props.show, (newVal) => {
  visible.value = newVal
})

watch(() => props.transaction, (newVal) => {
  if (newVal) {
    // 填充编辑表单
    editForm.id = newVal.id
    editForm.reason = newVal.reason || ''
    editForm.amount = String(newVal.amount)
    editForm.balance = String(newVal.balance)
    editForm.type = newVal.type
    editForm.typeText = getTypeName(newVal.type)
    editForm.classify = newVal.classify || ''
    editForm.subClassify = newVal.subClassify || ''
    
    // 根据交易类型加载分类
    loadClassifyList(newVal.type)
  }
})

watch(visible, (newVal) => {
  emit('update:show', newVal)
})

// 监听交易类型变化，重新加载分类
watch(() => editForm.type, (newVal) => {
  // 清空已选的分类和子分类
  editForm.classify = ''
  editForm.subClassify = ''
  // 重新加载对应类型的分类列表
  loadClassifyList(newVal)
})

const handleVisibleChange = (newVal) => {
  emit('update:show', newVal)
}

// 加载分类列表（从分类树中提取）
const loadClassifyList = async (type = null) => {
  try {
    const response = await getCategoryTree(type)
    if (response.success) {
      // 从树形结构中提取分类名称（Level 2）
      classifyColumns.value = (response.data || []).map(item => ({
        text: item.name,
        value: item.name,
        id: item.id,
        children: item.children || []
      }))
    }
  } catch (error) {
    console.error('加载分类列表出错:', error)
  }
}

// 加载子分类列表（根据选中的分类）
const loadSubClassifyList = async (classifyName) => {
  try {
    // 从已加载的分类树中查找对应的子分类
    const classifyItem = classifyColumns.value.find(item => item.value === classifyName)
    if (classifyItem && classifyItem.children) {
      subClassifyColumns.value = classifyItem.children.map(child => ({
        text: child.name,
        value: child.name,
        id: child.id
      }))
    } else {
      subClassifyColumns.value = []
    }
  } catch (error) {
    console.error('加载子分类列表出错:', error)
  }
}

// 提交编辑
const onSubmit = async () => {
  try {
    submitting.value = true
    
    const data = {
      id: editForm.id,
      reason: editForm.reason,
      amount: parseFloat(editForm.amount),
      balance: parseFloat(editForm.balance),
      type: editForm.type,
      classify: editForm.classify,
      subClassify: editForm.subClassify
    }
    
    const response = await updateTransaction(data)
    if (response.success) {
      showToast('保存成功')
      visible.value = false
      emit('save')
      // 重新加载分类列表
      await loadClassifyList(editForm.type)
    } else {
      showToast(response.message || '保存失败')
    }
  } catch (error) {
    console.error('保存出错:', error)
    showToast('保存失败')
  } finally {
    submitting.value = false
  }
}

// 打开分类选择器
const openClassifyPicker = async () => {
  // 先根据当前交易类型加载分类
  await loadClassifyList(editForm.type)
  showClassifyPicker.value = true
}

// 交易类型选择确认
const onTypeConfirm = ({ selectedValues, selectedOptions }) => {
  editForm.type = selectedValues[0]
  editForm.typeText = selectedOptions[0].text
  showTypePicker.value = false
}

// 交易分类选择确认
const onClassifyConfirm = async ({ selectedOptions }) => {
  if (selectedOptions && selectedOptions[0]) {
    editForm.classify = selectedOptions[0].text
    // 加载对应的子分类
    await loadSubClassifyList(selectedOptions[0].value)
  }
  showClassifyPicker.value = false
}

// 交易子分类选择确认
const onSubClassifyConfirm = ({ selectedOptions }) => {
  if (selectedOptions && selectedOptions[0]) {
    editForm.subClassify = selectedOptions[0].text
  }
  showSubClassifyPicker.value = false
}

// 新增分类
const addNewClassify = async () => {
  if (!newClassify.value.trim()) {
    showToast('请输入分类名称')
    return
  }
  
  try {
    const categoryName = newClassify.value.trim()
    
    // 调用API创建分类
    const response = await createCategory({
      name: categoryName,
      parentId: 0,
      type: editForm.type,
      level: 2,
      sortOrder: 0
    })
    
    if (response.success) {
      showToast('分类创建成功')
      // 重新加载分类列表
      await loadClassifyList(editForm.type)
      editForm.classify = categoryName
    } else {
      showToast(response.message || '创建分类失败')
    }
  } catch (error) {
    console.error('创建分类出错:', error)
    showToast('创建分类失败')
  } finally {
    newClassify.value = ''
    showAddClassify.value = false
    showClassifyPicker.value = false
  }
}

// 新增子分类
const addNewSubClassify = async () => {
  if (!newSubClassify.value.trim()) {
    showToast('请输入子分类名称')
    return
  }
  
  if (!editForm.classify) {
    showToast('请先选择分类')
    return
  }
  
  try {
    const subCategoryName = newSubClassify.value.trim()
    
    // 找到父分类的ID
    const parentCategory = classifyColumns.value.find(c => c.value === editForm.classify)
    if (!parentCategory || !parentCategory.id) {
      showToast('未找到父分类信息')
      return
    }
    
    // 调用API创建子分类
    const response = await createCategory({
      name: subCategoryName,
      parentId: parentCategory.id,
      type: editForm.type,
      level: 3,
      sortOrder: 0
    })
    
    if (response.success) {
      showToast('子分类创建成功')
      // 重新加载子分类列表
      await loadSubClassifyList(editForm.classify)
      editForm.subClassify = subCategoryName
    } else {
      showToast(response.message || '创建子分类失败')
    }
  } catch (error) {
    console.error('创建子分类出错:', error)
    showToast('创建子分类失败')
  } finally {
    newSubClassify.value = ''
    showAddSubClassify.value = false
    showSubClassifyPicker.value = false
  }
}

// 清空分类
const clearClassify = () => {
  editForm.classify = ''
  showClassifyPicker.value = false
  showToast('已清空分类')
}

// 清空子分类
const clearSubClassify = () => {
  editForm.subClassify = ''
  showSubClassifyPicker.value = false
  showToast('已清空子分类')
}

// 确认分类（从 picker 中获取选中值）
const confirmClassify = () => {
  if (classifyPickerRef.value) {
    const selectedValues = classifyPickerRef.value.getSelectedOptions()
    if (selectedValues && selectedValues[0]) {
      editForm.classify = selectedValues[0].text
    }
  }
  showClassifyPicker.value = false
}

// 确认子分类（从 picker 中获取选中值）
const confirmSubClassify = () => {
  if (subClassifyPickerRef.value) {
    const selectedValues = subClassifyPickerRef.value.getSelectedOptions()
    if (selectedValues && selectedValues[0]) {
      editForm.subClassify = selectedValues[0].text
    }
  }
  showSubClassifyPicker.value = false
}

// 获取交易类型名称
const getTypeName = (type) => {
  const typeMap = {
    0: '支出',
    1: '收入',
    2: '不计入收支'
  }
  return typeMap[type] || '未知'
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', { 
    year: 'numeric', 
    month: '2-digit', 
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
.transaction-detail {
  padding-bottom: 20px;
}

.detail-header h3 {
  margin: 10px 0;
}

.picker-toolbar {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid #ebedf0;
}

.toolbar-cancel {
  margin-right: auto;
}

.toolbar-confirm {
  margin-left: auto;
}
</style>
