EmailBill/Web/src/components/TransactionDetail.vue

<template>
  <PopupContainerV2
    v-model:show="visible"
    title="交易详情"
    :height="'75%'"
  >
    <div style="padding: 0">
      <van-form style="margin-top: 12px">
        <van-cell-group inset>
          <van-cell
            title="记录时间"
            :value="formatDate(transaction.createTime)"
          />
        </van-cell-group>

        <van-cell-group
          inset
          title="交易明细"
        >
          <van-field
            v-model="occurredAtLabel"
            name="occurredAt"
            label="交易时间"
            readonly
            is-link
            placeholder="请选择交易时间"
            :rules="[{ required: true, message: '请选择交易时间' }]"
            @click="showDatePicker = true"
          />
          <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
            name="type"
            label="交易类型"
          >
            <template #input>
              <van-radio-group
                v-model="editForm.type"
                direction="horizontal"
                @change="handleTypeChange"
              >
                <van-radio :name="0">
                  支出
                </van-radio>
                <van-radio :name="1">
                  收入
                </van-radio>
                <van-radio :name="2">
                  不计
                </van-radio>
              </van-radio-group>
            </template>
          </van-field>

          <van-field
            name="classify"
            label="交易分类"
          >
            <template #input>
              <div style="flex: 1">
                <div
                  v-if="
                    transaction &&
                      transaction.unconfirmedClassify &&
                      transaction.unconfirmedClassify !== editForm.classify
                  "
                  class="suggestion-tip"
                  @click="applySuggestion"
                >
                  <van-icon
                    name="bulb-o"
                    class="suggestion-icon"
                  />
                  <span class="suggestion-text">
                    建议: {{ transaction.unconfirmedClassify }}
                    <span
                      v-if="
                        transaction.unconfirmedType !== null &&
                          transaction.unconfirmedType !== undefined &&
                          transaction.unconfirmedType !== editForm.type
                      "
                    >
                      ({{ getTypeName(transaction.unconfirmedType) }})
                    </span>
                  </span>
                  <div class="suggestion-apply">
                    应用
                  </div>
                </div>
                <span
                  v-else-if="!editForm.classify"
                  style="color: var(--van-gray-5)"
                >请选择交易分类</span>
                <span v-else>{{ editForm.classify }}</span>
              </div>
            </template>
          </van-field>

          <ClassifySelector
            v-model="editForm.classify"
            :type="editForm.type"
            @change="handleClassifyChange"
          />
        </van-cell-group>
      </van-form>
    </div>

    <template #footer>
      <van-button
        round
        block
        type="primary"
        :loading="submitting"
        @click="onSubmit"
      >
        保存修改
      </van-button>
    </template>
  </PopupContainerV2>

  <!-- 日期选择弹窗 -->
  <van-popup
    v-model:show="showDatePicker"
    position="bottom"
    round
    teleport="body"
  >
    <van-date-picker
      v-model="currentDate"
      title="选择日期"
      @confirm="onConfirmDate"
      @cancel="showDatePicker = false"
    />
  </van-popup>

  <!-- 时间选择弹窗 -->
  <van-popup
    v-model:show="showTimePicker"
    position="bottom"
    round
    teleport="body"
  >
    <van-time-picker
      v-model="currentTime"
      title="选择时间"
      @confirm="onConfirmTime"
      @cancel="showTimePicker = false"
    />
  </van-popup>
</template>

<script setup>
import { ref, reactive, watch, defineProps, defineEmits, computed, nextTick } from 'vue'
import { showToast } from 'vant'
import dayjs from 'dayjs'
import PopupContainerV2 from '@/components/PopupContainerV2.vue'
import ClassifySelector from '@/components/ClassifySelector.vue'
import { updateTransaction } from '@/api/transactionRecord'

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 isSyncing = ref(false)

// 日期选择相关
const showDatePicker = ref(false)
const showTimePicker = ref(false)
const currentDate = ref([])
const currentTime = ref([])

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

// 显示用的日期格式化
const occurredAtLabel = computed(() => {
  return formatDate(editForm.occurredAt)
})

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

watch(
  () => props.transaction,
  (newVal) => {
    if (newVal) {
      isSyncing.value = true
      // 填充编辑表单
      editForm.id = newVal.id
      editForm.reason = newVal.reason || ''
      editForm.amount = String(newVal.amount)
      editForm.balance = String(newVal.balance)
      editForm.type = newVal.type
      editForm.classify = newVal.classify || ''

      // 初始化日期时间
      if (newVal.occurredAt) {
        editForm.occurredAt = newVal.occurredAt
        const dt = dayjs(newVal.occurredAt)
        currentDate.value = dt.format('YYYY-MM-DD').split('-')
        currentTime.value = dt.format('HH:mm').split(':')
      }

      // 在下一个 tick 结束同步状态，确保 van-radio-group 的 @change 已触发完毕
      nextTick(() => {
        isSyncing.value = false
      })
    }
  }
)

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

// 处理类型切换
const handleTypeChange = () => {
  if (!isSyncing.value) {
    editForm.classify = ''
  }
}

// 处理日期确认
const onConfirmDate = ({ selectedValues }) => {
  const dateStr = selectedValues.join('-')
  const timeStr = currentTime.value.join(':')
  editForm.occurredAt = dayjs(`${dateStr} ${timeStr}`).format('YYYY-MM-DDTHH:mm:ss')
  showDatePicker.value = false
  // 接着选时间
  showTimePicker.value = true
}

const onConfirmTime = ({ selectedValues }) => {
  currentTime.value = selectedValues
  const dateStr = currentDate.value.join('-')
  const timeStr = selectedValues.join(':')
  editForm.occurredAt = dayjs(`${dateStr} ${timeStr}`).format('YYYY-MM-DDTHH:mm:ss')
  showTimePicker.value = false
}

const applySuggestion = () => {
  if (props.transaction.unconfirmedClassify) {
    editForm.classify = props.transaction.unconfirmedClassify
    if (
      props.transaction.unconfirmedType !== null &&
      props.transaction.unconfirmedType !== undefined
    ) {
      editForm.type = props.transaction.unconfirmedType
    }
  }
}

const getTypeName = (type) => {
  const typeMap = {
    0: '支出',
    1: '收入',
    2: '不计'
  }
  return typeMap[type] || '未知'
}

// 提交编辑
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,
      occurredAt: editForm.occurredAt
    }

    const response = await updateTransaction(data)
    if (response.success) {
      showToast('保存成功')
      visible.value = false
      emit('save', data)
    } else {
      showToast(response.message || '保存失败')
    }
  } catch (error) {
    console.error('保存出错:', error)
    showToast('保存失败')
  } finally {
    submitting.value = false
  }
}

// 分类选择变化
const handleClassifyChange = () => {
  if (editForm.id > 0 && editForm.type >= 0) {
    // 直接保存
    onSubmit()
  }
}

// 清空分类
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>
.suggestion-tip {
  font-size: 12px;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: var(--van-active-color);
  color: var(--van-primary-color);
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
  border: 1px solid var(--van-primary-color);
  width: fit-content;
  opacity: 0.1;
}

.suggestion-tip:active {
  opacity: 0.2;
}

.suggestion-icon {
  margin-right: 4px;
  font-size: 14px;
}

.suggestion-text {
  font-weight: 500;
}

.suggestion-apply {
  margin-left: 8px;
  padding: 0 6px;
  background: var(--van-primary-color);
  color: var(--van-white);
  border-radius: 4px;
  font-size: 10px;
  height: 18px;
  line-height: 18px;
  font-weight: bold;
}
</style>