X-Financial/web/src/components/travel/TravelReimbursementMessageItem.vue

<template>
  <article
  class="message-row"
  :class="message.role"
>
    <span class="message-avatar">
      <img
        :src="message.role === 'assistant' ? ui.aiAvatar : ui.userAvatar"
        :alt="message.role === 'assistant' ? '财务助手头像' : '用户头像'"
      />
    </span>

    <div class="message-bubble" :class="ui.buildMessageBubbleClass(message)">
    <header class="message-meta">
      <strong>{{ message.role === 'assistant' ? (message.assistantName || ui.ASSISTANT_DISPLAY_NAME) : '我' }}</strong>
      <time>{{ message.time }}</time>
    </header>
    <div
      v-if="message.text && message.role === 'assistant' && message.reviewPayload && ui.buildReviewMainMessageText(message)"
      class="review-summary message-answer-content message-answer-markdown"
      v-html="ui.renderMarkdown(ui.buildReviewMainMessageText(message))"
      @click="ui.handleAssistantMarkdownClick($event, message)"
    ></div>

    <div
      v-else-if="message.text && message.role !== 'assistant'"
      class="message-answer-content message-answer-markdown message-rich-text"
      v-html="ui.renderMarkdown(message.text)"
    ></div>

    <div
      v-else-if="message.text && message.role === 'assistant'"
      class="message-answer-content message-answer-markdown"
      v-html="ui.renderMarkdown(message.text)"
      @click="ui.handleAssistantMarkdownClick($event, message)"
    ></div>

    <BudgetAssistantReport
      v-if="message.role === 'assistant' && message.budgetReport"
      :report="message.budgetReport"
    />

    <div
      v-if="message.role === 'assistant' && message.applicationPreview"
      class="application-preview-table"
      role="table"
      aria-label="申请信息核对表"
    >
      <div class="application-preview-row head" role="row">
        <span role="columnheader">字段</span>
        <span role="columnheader">内容</span>
      </div>
      <div
        v-for="row in ui.resolveApplicationPreviewRows(message)"
        :key="`${message.id}-${row.key}`"
        class="application-preview-row"
        :class="{
          missing: row.missing,
          editable: row.editable && !ui.submitting && !ui.reviewActionBusy && !ui.sessionSwitchBusy,
          highlight: row.highlight
        }"
        role="row"
        :tabindex="row.editable && !ui.submitting && !ui.reviewActionBusy && !ui.sessionSwitchBusy ? 0 : -1"
        :aria-label="row.editable ? `编辑${row.label}` : row.label"
        @click.stop="row.editable && !ui.isApplicationPreviewEditing(message, row.key) && !ui.submitting && !ui.reviewActionBusy && !ui.sessionSwitchBusy && ui.openApplicationPreviewEditor(message, row.key, row.value)"
        @keydown.enter.prevent="row.editable && !ui.isApplicationPreviewEditing(message, row.key) && !ui.submitting && !ui.reviewActionBusy && !ui.sessionSwitchBusy && ui.openApplicationPreviewEditor(message, row.key, row.value)"
        @keydown.space.prevent="row.editable && !ui.isApplicationPreviewEditing(message, row.key) && !ui.submitting && !ui.reviewActionBusy && !ui.sessionSwitchBusy && ui.openApplicationPreviewEditor(message, row.key, row.value)"
      >
        <span class="application-preview-label" role="cell">{{ row.label }}</span>
        <span class="application-preview-value" role="cell">
          <input
            v-if="ui.isApplicationPreviewEditing(message, row.key) && ui.resolveApplicationPreviewEditorControl(row.key) === 'text'"
            v-model="ui.applicationPreviewEditor.draftValue"
            class="application-preview-input"
            type="text"
            autofocus
            @click.stop
            @keydown.stop="ui.handleApplicationPreviewEditorKeydown($event, message)"
            @blur="ui.commitApplicationPreviewEditor(message)"
          />
          <EnterpriseSelect
            v-else-if="ui.isApplicationPreviewEditing(message, row.key) && ui.resolveApplicationPreviewEditorControl(row.key) === 'select'"
            v-model="ui.applicationPreviewEditor.draftValue"
            class="application-preview-select"
            :options="ui.resolveApplicationPreviewEditorOptions(row.key)"
            clearable
            :teleported="false"
            autofocus
            @click.stop
            @change="ui.commitApplicationPreviewEditor(message)"
            @keydown.stop="ui.handleApplicationPreviewEditorKeydown($event, message)"
            @blur="ui.commitApplicationPreviewEditor(message)"
          />
          <template v-else>
            <span
              class="application-preview-text"
              :class="{ 'application-preview-date-chip': row.key === 'time' && !row.missing }"
            >{{ row.value }}</span>
            <button
              v-if="row.editable"
              type="button"
              class="application-preview-edit-btn"
              title="修改内容"
              aria-label="修改内容"
              :disabled="ui.submitting || ui.reviewActionBusy || ui.sessionSwitchBusy"
              @click.stop="ui.openApplicationPreviewEditor(message, row.key, row.value)"
            >
              <i class="mdi mdi-pencil-outline"></i>
            </button>
          </template>
        </span>
      </div>
    </div>

    <div
      v-if="message.role === 'assistant' && message.applicationPreview && ui.resolveApplicationPreviewMissingFields(message)?.length"
      class="application-preview-footer application-preview-footer-missing"
      aria-live="polite"
    >
      <span class="application-preview-missing-prefix">当前还需要补充：</span>
      <span class="application-preview-missing-list">
        <template
          v-for="(field, index) in ui.resolveApplicationPreviewMissingFields(message)"
          :key="`${message.id}-missing-${field}`"
        >
          <span class="application-preview-missing-chip">{{ field }}</span>
          <span
            v-if="index < ui.resolveApplicationPreviewMissingFields(message).length - 1"
            class="application-preview-missing-separator"
          >、</span>
        </template>
      </span>
      <span class="application-preview-missing-suffix">。补齐后我再帮您提交申请。</span>
    </div>
    <div
      v-else-if="message.role === 'assistant' && message.applicationPreview && ui.buildApplicationPreviewFooterText(message)"
      class="application-preview-footer message-answer-content message-answer-markdown"
      v-html="ui.renderMarkdown(ui.buildApplicationPreviewFooterText(message))"
      @click="ui.handleAssistantMarkdownClick($event, message)"
    ></div>

    <div
      v-if="message.role === 'assistant' && message.welcomeQuickActions?.length"
      class="welcome-quick-actions"
    >
      <p class="welcome-quick-actions-title">您可以对我进行以下操作：</p>
      <div class="welcome-quick-action-grid">
        <button
          v-for="action in message.welcomeQuickActions"
          :key="`${message.id}-${action.label}`"
          type="button"
          class="welcome-quick-action-btn"
          :disabled="ui.submitting || ui.reviewActionBusy || ui.sessionSwitchBusy"
          @click="ui.runWelcomeQuickAction(action)"
        >
          <i :class="action.icon"></i>
          <span>{{ action.label }}</span>
        </button>
      </div>
    </div>

    <div
      v-if="message.role === 'assistant' && !message.reviewPayload && !message.queryPayload && message.suggestedActions?.length"
      class="message-suggested-actions"
    >
      <button
        v-for="action in message.suggestedActions"
        :key="`${message.id}-${action.action_type}-${action.label}`"
        type="button"
        class="message-suggested-action-btn"
        :class="{
          selected: ui.isSuggestedActionSelected(message, action),
          locked: message.suggestedActionsLocked
        }"
        :disabled="message.suggestedActionsLocked || ui.submitting || ui.reviewActionBusy || ui.sessionSwitchBusy"
        @click="ui.handleSuggestedAction(message, action)"
      >
        <span class="message-suggested-action-icon" aria-hidden="true">
          <i :class="action.icon || 'mdi mdi-shape-outline'"></i>
        </span>
        <span class="message-suggested-action-copy">
          <span class="message-suggested-action-title">{{ action.label }}</span>
          <small v-if="action.description">{{ action.description }}</small>
        </span>
        <i class="message-suggested-action-arrow mdi mdi-arrow-right" aria-hidden="true"></i>
      </button>
    </div>

    <div v-if="message.role === 'assistant' && !message.reviewPayload && message.riskFlags?.length" class="message-detail-block">
      <strong>风险标签</strong>
      <div class="message-detail-chip-row">
        <span v-for="item in message.riskFlags" :key="item" class="message-risk-chip">{{ item }}</span>
      </div>
    </div>

    <details
      v-if="message.role === 'assistant' && !message.reviewPayload && !message.queryPayload && message.citations?.length"
      class="message-detail-block message-citation-disclosure"
    >
      <summary>
        <strong>引用依据</strong>
        <span>{{ message.citations.length }} 项</span>
        <i class="mdi mdi-chevron-down"></i>
      </summary>
      <div class="message-citation-list">
        <article v-for="item in message.citations" :key="`${message.id}-${item.code}`" class="message-citation-card">
          <header>
            <span>{{ item.title }}</span>
            <small>{{ item.version || item.source_type }}</small>
          </header>
          <p>{{ item.excerpt || item.code }}</p>
        </article>
      </div>
    </details>

    <div
      v-if="message.role === 'assistant' && !message.reviewPayload && message.queryPayload?.resultType === 'expense_claim_list'"
      class="message-detail-block expense-query-block"
    >
      <strong>
        {{ message.queryPayload.title || (message.queryPayload.selectionMode === 'draft_association' ? '选择关联草稿' : '最近 5 条筛选结果') }}
      </strong>

      <p v-if="ui.buildExpenseQueryWindowLabel(message.queryPayload)" class="expense-query-window-label">
        {{ ui.buildExpenseQueryWindowLabel(message.queryPayload) }}
      </p>

      <div v-if="message.queryPayload.statusGroups?.length" class="expense-query-summary-row">
        <span
          v-for="item in message.queryPayload.statusGroups"
          :key="`${message.id}-${item.key}`"
          class="expense-query-summary-chip"
          :class="item.key"
        >
          {{ item.label }} {{ item.count }}
        </span>
      </div>

      <div v-if="message.queryPayload.records?.length" class="expense-query-record-list compact">
        <button
          v-for="record in ui.getExpenseQueryVisibleRecords(message.queryPayload)"
          :key="`${message.id}-${record.claimId}`"
          type="button"
          class="expense-query-record-card"
          :class="{
            selectable: message.queryPayload.selectionMode === 'draft_association',
            selected: message.selectedQueryRecordId === record.claimId || message.queryPayload.selectedClaimId === record.claimId,
            locked: message.querySelectionLocked || message.queryPayload.selectionLocked
          }"
          :disabled="message.queryPayload.selectionMode === 'draft_association' && (message.querySelectionLocked || message.queryPayload.selectionLocked)"
          @click="ui.handleExpenseQueryRecordClick(message, record)"
        >
          <div class="expense-query-record-main">
            <div class="expense-query-record-top">
              <strong>{{ record.claimNo }}</strong>
              <span class="expense-query-record-status" :class="record.statusGroup || 'other'">
                {{ record.statusLabel }}
              </span>
            </div>
            <p>{{ record.summary }}</p>
            <div class="expense-query-record-meta">
              <span>{{ record.expenseTypeLabel }}</span>
              <span>{{ record.dateDisplay }}</span>
              <span>{{ record.amountDisplay }}</span>
            </div>
            <div v-if="record.riskItems?.length" class="expense-query-risk-row">
              <button
                v-for="risk in record.riskItems"
                :key="`${message.id}-${record.claimId}-${risk.key}`"
                type="button"
                class="expense-query-risk-chip"
                :class="risk.level"
                @click.stop="ui.appendExpenseQueryRiskToConversation(record, risk)"
              >
                <span>{{ record.claimNo }}</span>
                <strong>{{ risk.levelLabel }}</strong>
                <em>{{ risk.title }}</em>
              </button>
            </div>
          </div>
          <i class="mdi mdi-chevron-right"></i>
        </button>

        <div
          v-if="ui.getExpenseQueryTotalPages(message.queryPayload) > 1"
          class="expense-query-pager"
        >
          <button
            type="button"
            class="expense-query-pager-btn"
            :disabled="ui.getExpenseQueryActivePage(message.queryPayload) === 1"
            aria-label="上一页"
            @click="ui.shiftExpenseQueryPage(message, -1)"
          >
            <i class="mdi mdi-chevron-left"></i>
          </button>

          <div class="expense-query-pager-dots" aria-label="单据分页">
            <button
              v-for="page in ui.getExpenseQueryTotalPages(message.queryPayload)"
              :key="`${message.id}-query-page-${page}`"
              type="button"
              class="expense-query-pager-dot"
              :class="{ active: ui.getExpenseQueryActivePage(message.queryPayload) === page }"
              :aria-label="`第 ${page} 页`"
              @click="ui.setExpenseQueryPage(message, page)"
            ></button>
          </div>

          <button
            type="button"
            class="expense-query-pager-btn"
            :disabled="ui.getExpenseQueryActivePage(message.queryPayload) === ui.getExpenseQueryTotalPages(message.queryPayload)"
            aria-label="下一页"
            @click="ui.shiftExpenseQueryPage(message, 1)"
          >
            <i class="mdi mdi-chevron-right"></i>
          </button>
        </div>
      </div>

      <div v-else class="expense-query-empty">
        <i class="mdi mdi-file-search-outline"></i>
        <span>{{ message.queryPayload.emptyText || '当前没有可直接展开的近期待办单据。' }}</span>
      </div>

      <p
        v-if="ui.buildExpenseQueryHint(message.queryPayload)"
        class="expense-query-hint message-answer-markdown"
        v-html="ui.renderMarkdown(ui.buildExpenseQueryHint(message.queryPayload))"
        @click="ui.handleAssistantMarkdownClick($event, message)"
      >
      </p>
    </div>

    <div
      v-if="message.role === 'assistant' && ui.shouldShowDraftSavedCard(message)"
      class="draft-preview application-draft-preview"
      :class="{ 'reimbursement-draft-preview': !ui.isApplicationDraftPayload(message.draftPayload) }"
    >
      <template v-if="ui.isApplicationDraftPayload(message.draftPayload)">
        <header class="application-draft-head">
          <span class="application-draft-icon" aria-hidden="true">
            <i class="mdi mdi-file-document-check-outline"></i>
          </span>
          <span class="application-draft-title">
            <strong>申请单据已生成</strong>
            <small>已为本次业务生成申请单，请按需查看完整详情。</small>
          </span>
          <span class="application-draft-status">{{ ui.resolveApplicationDraftStatusLabel(message.draftPayload) }}</span>
        </header>
        <div class="application-draft-brief" role="group" aria-label="申请单据简要信息">
          <div
            v-for="item in ui.buildApplicationDraftSummaryItems(message.draftPayload)"
            :key="`${message.id}-application-draft-${item.label}`"
            class="application-draft-brief-item"
            :class="{ 'is-primary': item.label === '单号' }"
          >
            <span>{{ item.label }}</span>
            <strong>{{ item.value }}</strong>
          </div>
        </div>
        <footer class="application-draft-footer">
          <p>
            完整审批链、附件和明细可在单据详情中
            <button
              type="button"
              class="application-draft-detail-link"
              :disabled="ui.submitting || ui.reviewActionBusy || ui.sessionSwitchBusy"
              @click="ui.openApplicationDraftDetail(message)"
            >查看</button>。
          </p>
        </footer>
      </template>
      <template v-else>
        <div class="reimbursement-draft-card" role="group" aria-label="报销草稿已生成">
          <span class="reimbursement-draft-icon" aria-hidden="true">
            <i class="mdi mdi-file-document-edit-outline"></i>
          </span>
          <div class="reimbursement-draft-main">
            <strong>报销草稿已生成</strong>
            <p>
              单号：<span>{{ ui.resolveReimbursementDraftClaimNo(message.draftPayload) }}</span>
              <button
                type="button"
                class="reimbursement-draft-link"
                :disabled="ui.submitting || ui.reviewActionBusy || ui.sessionSwitchBusy"
                @click="ui.openApplicationDraftDetail(message)"
              >查看详情</button>
            </p>
          </div>
        </div>
      </template>
    </div>

    <div v-if="message.role === 'assistant' && message.reviewPayload" class="message-detail-block review-message-block">
      <div class="review-plain-followup">
        <template
          v-for="followup in [ui.buildReviewPlainFollowupForMessage(message)]"
          :key="`${message.id}-review-followup`"
        >
          <h3
            class="review-plain-lead"
            :class="{ danger: followup.tone === 'danger' }"
          >
            {{ followup.lead }}
          </h3>
          <p v-if="followup.summary" class="review-plain-summary">
            {{ followup.summary }}
          </p>
          <ul v-if="followup.items.length" class="review-plain-list">
            <li
              v-for="item in followup.items"
              :key="`${message.id}-${item.key}`"
            >
              <span class="review-plain-label">{{ item.label }}：</span>
              <span>{{ item.text }}</span>
            </li>
          </ul>
          <p
            v-for="line in followup.notes"
            :key="`${message.id}-note-${line}`"
            class="review-plain-note"
          >
            {{ line }}
          </p>
          <p v-if="ui.canUseInlineSaveDraft(message)" class="review-inline-save-copy">
            请核查上面的关键信息。您也可以暂时不处理上述的这些内容，我可以帮你先保存为
            <button
              type="button"
              class="review-inline-draft-link"
              :disabled="ui.submitting || ui.reviewActionBusy || ui.sessionSwitchBusy"
              @click="ui.handleInlineSaveDraft(message)"
            >
              草稿
            </button>
            。
          </p>
        </template>

        <div
          v-if="ui.buildReviewNextStepRichCopyForMessage(message)"
          class="review-next-step-rich-copy message-answer-markdown"
          v-html="ui.renderMarkdown(ui.buildReviewNextStepRichCopyForMessage(message))"
          @click="ui.handleAssistantMarkdownClick($event, message)"
        ></div>

        <div
          v-if="ui.resolveReviewFooterActions(message.reviewPayload).length"
          class="review-footer-actions"
        >
          <div class="review-footer-btn-row">
            <button
              v-for="action in ui.resolveReviewFooterActions(message.reviewPayload)"
              :key="`${message.id}-${action.action_type}`"
              type="button"
              :class="['review-footer-btn', action.emphasis === 'primary' ? 'primary' : '']"
              :disabled="ui.submitting || ui.reviewActionBusy || ui.sessionSwitchBusy"
              @click="ui.handleReviewAction(message, action)"
            >
              {{ action.label || ui.buildReviewPrimaryButtonLabel(message.reviewPayload, message.draftPayload) }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <div v-if="message.attachments?.length" class="message-files">
      <span v-for="file in message.attachments" :key="file" class="file-chip">
        <i class="mdi mdi-paperclip"></i>
        {{ file }}
      </span>
    </div>
    </div>

    <div
      v-if="ui.isOperationFeedbackVisible(message)"
      class="message-feedback-bubble"
    >
      <OperationFeedbackInlineCard
        :busy="Boolean(message.operationFeedback?.submitting)"
        :error-message="message.operationFeedback?.error || ''"
        :submitted="Boolean(message.operationFeedback?.submitted)"
        :submitted-rating="Number(message.operationFeedback?.rating || 0)"
        :reset-key="`${message.id}-${message.operationFeedback?.context?.runId || message.operationFeedback?.context?.run_id || ''}`"
        @dismiss="ui.dismissOperationFeedbackForMessage(message)"
        @submit="ui.submitOperationFeedbackForMessage(message, $event)"
      />
    </div>
  </article>
</template>

<script>
import BudgetAssistantReport from './BudgetAssistantReport.vue'
import EnterpriseSelect from '../shared/EnterpriseSelect.vue'
import OperationFeedbackInlineCard from '../shared/OperationFeedbackInlineCard.vue'

export default {
  name: 'TravelReimbursementMessageItem',
  components: {
    BudgetAssistantReport,
    EnterpriseSelect,
    OperationFeedbackInlineCard
  },
  props: {
    message: {
      type: Object,
      required: true
    },
    ui: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped src="../../assets/styles/components/travel-reimbursement-message-item.css"></style>