<template>
  <Transition name="drawer-fade">
    <div v-if="open" class="rule-drawer-backdrop" @click.self="emit('close')">
      <aside class="rule-drawer timeline-drawer">
        <header class="rule-drawer-head">
          <div>
            <span>修改记录</span>
            <h3>文档操作记录</h3>
          </div>
          <button type="button" @click="emit('close')">
            <i class="mdi mdi-close"></i>
          </button>
        </header>

        <TableLoadingState
          v-if="loading"
          class="rule-drawer-state"
          variant="drawer"
          message="正在加载操作记录"
          icon="mdi mdi-history"
          :show-skeleton="false"
        />
        <div v-else-if="error" class="rule-drawer-state error">
          <i class="mdi mdi-alert-circle-outline"></i>
          <span>{{ error }}</span>
        </div>
        <div v-else-if="items.length" class="rule-timeline-list">
          <article
            v-for="item in items"
            :key="`${item.event_type}-${item.version}-${item.event_time}`"
            class="rule-timeline-item"
          >
            <i :class="[item.meta.icon, item.meta.tone]"></i>
            <div>
              <header>
                <strong>{{ item.meta.label }}</strong>
                <span>{{ item.timeLabel }}</span>
              </header>
              <p>{{ item.description || item.note || '暂无补充说明' }}</p>
              <small>操作人：{{ item.actor }}</small>
            </div>
          </article>
        </div>
        <div v-else class="rule-drawer-state">
          <i class="mdi mdi-history"></i>
          <span>暂无操作记录</span>
        </div>
      </aside>
    </div>
  </Transition>
</template>

<script setup>
import TableLoadingState from '../shared/TableLoadingState.vue'

defineOptions({
  name: 'AuditVersionTimelineDrawer'
})

defineProps({
  open: { type: Boolean, default: false },
  loading: { type: Boolean, default: false },
  error: { type: String, default: '' },
  items: { type: Array, default: () => [] }
})

const emit = defineEmits(['close'])
</script>

<style scoped src="../../assets/styles/views/audit-view.css"></style>
<style scoped src="../../assets/styles/views/audit-view-part2.css"></style>
