<template>
  <Transition name="drawer-fade">
    <div v-if="open" class="rule-drawer-backdrop" @click.self="emit('close')">
      <aside class="rule-drawer compare-drawer change-detail-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>

        <div v-if="record" class="compare-content change-detail-content">
          <section class="change-detail-meta">
            <article>
              <span>修改人</span>
              <strong>{{ record.actor }}</strong>
            </article>
            <article>
              <span>修改时间</span>
              <strong>{{ record.time }}</strong>
            </article>
            <article>
              <span>修改工作表</span>
              <strong>{{ record.changed_sheet_count }}</strong>
            </article>
            <article>
              <span>变更单元格</span>
              <strong>{{ record.changed_cell_count }}</strong>
            </article>
          </section>

          <section class="compare-panel">
            <header>
              <strong>本次修改摘要</strong>
            </header>
            <p>{{ record.summary }}</p>
          </section>

          <section class="compare-panel">
            <header>
              <strong>工作表变化</strong>
            </header>
            <div v-if="sheetRows.length" class="compare-sheet-list">
              <span
                v-for="item in sheetRows"
                :key="`${item.sheet_name}-${item.change_type}`"
                :class="item.meta.tone"
              >
                {{ item.sheet_name }} · {{ item.meta.label }}
              </span>
            </div>
            <p v-else>本次没有工作表级变化。</p>
          </section>

          <section class="compare-panel compare-cell-panel">
            <header>
              <strong>单元格差异</strong>
              <small>最多展示前 500 条</small>
            </header>
            <div v-if="cellRows.length" class="compare-table-wrap">
              <table>
                <thead>
                  <tr>
                    <th>工作表</th>
                    <th>位置</th>
                    <th>类型</th>
                    <th>旧值</th>
                    <th>新值</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="item in cellRows"
                    :key="`${item.sheet_name}-${item.cell}`"
                  >
                    <td>{{ item.sheet_name }}</td>
                    <td>{{ item.cell }}</td>
                    <td><b :class="item.meta.tone">{{ item.meta.label }}</b></td>
                    <td>{{ item.before_value ?? '-' }}</td>
                    <td>{{ item.after_value ?? '-' }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p v-else>本次没有发现单元格级差异。</p>
          </section>
        </div>
      </aside>
    </div>
  </Transition>
</template>

<script setup>
defineOptions({
  name: 'AuditSpreadsheetChangeDrawer'
})

defineProps({
  open: { type: Boolean, default: false },
  record: { type: Object, default: null },
  sheetRows: { type: Array, default: () => [] },
  cellRows: { 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>
