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>

    <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="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) !== 'select'"
            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)"
            v-model="ui.applicationPreviewEditor.draftValue"
            class="application-preview-input 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">{{ 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.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.meta?.length" class="message-meta-row">
      <span
        v-for="item in message.meta"
        :key="item"
        class="message-meta-chip"
        :class="message.metaTone"
      >
        {{ item }}
      </span>
    </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' && 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.role === 'assistant' && !message.reviewPayload && message.draftPayload" class="draft-preview">
      <header>
        <strong>{{ message.draftPayload.title }}</strong>
        <span>待人工确认</span>
      </header>
      <pre>{{ message.draftPayload.body }}</pre>
    </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>
  </article>
</template>

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

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

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