<template>
  <div class="application-detail-facts">
    <div
      v-for="item in factItems"
      :key="item.key"
      class="application-detail-fact"
      :class="{
        highlight: item.highlight,
        emphasis: item.emphasis,
        editable: canEditItem(item),
        editing: isEditingItem(item)
      }"
    >
      <span>{{ item.label }}</span>
      <strong>
        <template v-if="isEditingItem(item)">
          <ElDatePicker
            v-if="resolveEditorControl(item) === 'date'"
            :model-value="editor.draftValue"
            class="application-detail-editor-control"
            type="date"
            value-format="YYYY-MM-DD"
            format="YYYY/MM/DD"
            popper-class="detail-editor-date-popper"
            :clearable="false"
            :disabled="editor.saving"
            @update:model-value="emit('update-draft', $event)"
            @click.stop
          />
          <EnterpriseSelect
            v-else-if="resolveEditorControl(item) === 'select'"
            :model-value="editor.draftValue"
            class="application-detail-editor-control application-detail-editor-select"
            :options="transportModeOptions"
            clearable
            :teleported="false"
            :disabled="editor.saving"
            @update:model-value="emit('update-draft', $event)"
            @click.stop
          />
          <ElInput
            v-else
            :model-value="editor.draftValue"
            class="application-detail-editor-control"
            clearable
            :disabled="editor.saving"
            @update:model-value="emit('update-draft', $event)"
            @click.stop
            @keydown.enter.stop.prevent="emit('save', item)"
            @keydown.esc.stop.prevent="emit('cancel')"
          />
          <button
            class="application-detail-edit-confirm"
            type="button"
            title="保存"
            aria-label="保存"
            :disabled="editor.saving"
            @click.stop="emit('save', item)"
          >
            <i :class="editor.saving ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-check'"></i>
          </button>
          <button
            class="application-detail-edit-cancel"
            type="button"
            title="取消"
            aria-label="取消"
            :disabled="editor.saving"
            @click.stop="emit('cancel')"
          >
            <i class="mdi mdi-close"></i>
          </button>
        </template>
        <template v-else>
          <span class="application-detail-fact-value">{{ item.value }}</span>
          <button
            v-if="canEditItem(item)"
            class="application-detail-edit-btn"
            type="button"
            title="编辑"
            aria-label="编辑"
            :disabled="actionBusy"
            @click.stop="emit('open', item)"
          >
            <i class="mdi mdi-pencil-outline"></i>
          </button>
        </template>
      </strong>
    </div>
  </div>
</template>

<script setup>
import { ElDatePicker } from 'element-plus/es/components/date-picker/index.mjs'
import { ElInput } from 'element-plus/es/components/input/index.mjs'

import EnterpriseSelect from '../shared/EnterpriseSelect.vue'

defineProps({
  factItems: { type: Array, default: () => [] },
  editor: { type: Object, required: true },
  transportModeOptions: { type: Array, default: () => [] },
  actionBusy: { type: Boolean, default: false },
  canEditItem: { type: Function, required: true },
  isEditingItem: { type: Function, required: true },
  resolveEditorControl: { type: Function, required: true }
})

const emit = defineEmits(['update-draft', 'save', 'cancel', 'open'])
</script>

<style scoped src="../../assets/styles/components/travel-request-application-facts.css"></style>
