<template>
  <div
    v-if="runtime.selectedFileCards.length"
    class="workbench-ai-file-strip"
    :class="{ inline }"
    aria-label="已选择附件"
  >
    <article
      v-for="file in runtime.selectedFileCards"
      :key="file.key"
      class="workbench-ai-file-card"
      role="button"
      tabindex="0"
      :aria-label="`预览附件 ${file.name}`"
      @click="runtime.openAiModeFilePreview(file.key)"
      @keydown.enter.prevent="runtime.openAiModeFilePreview(file.key)"
      @keydown.space.prevent="runtime.openAiModeFilePreview(file.key)"
    >
      <span class="workbench-ai-file-card__icon" :class="`type-${file.tone}`" aria-hidden="true">
        <i :class="file.icon"></i>
      </span>
      <span class="workbench-ai-file-card__body">
        <strong :title="file.name">{{ file.name }}</strong>
        <small>{{ file.typeLabel }}</small>
        <small
          v-if="file.ocrState?.label"
          class="workbench-ai-file-card__ocr"
          :class="`is-${file.ocrState.status || 'idle'}`"
          :title="file.ocrState.title || file.ocrState.label"
        >
          <i v-if="file.ocrState.status === 'recognizing'" class="mdi mdi-loading"></i>
          <i v-else-if="file.ocrState.status === 'recognized'" class="mdi mdi-text-recognition"></i>
          <i v-else-if="file.ocrState.status === 'failed'" class="mdi mdi-alert-circle-outline"></i>
          <span>{{ file.ocrState.label }}</span>
        </small>
      </span>
      <button
        type="button"
        class="workbench-ai-file-card__remove"
        :disabled="runtime.isAiModeInputLocked"
        :aria-label="`移除附件 ${file.name}`"
        @click.stop="runtime.removeAiModeFile(file.key)"
      >
        <i class="mdi mdi-close"></i>
      </button>
    </article>
  </div>
</template>

<script setup>
defineProps({
  inline: { type: Boolean, default: false },
  runtime: { type: Object, required: true }
})
</script>

<style scoped src="../../../assets/styles/components/personal-workbench-ai-mode.css"></style>
