<template>
  <section class="spreadsheet-editor-shell panel">
    <input
      ref="fileInput"
      class="spreadsheet-upload-input"
      type="file"
      accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      @change="emit('file-change', $event)"
    />

    <div class="spreadsheet-editor-body">
      <section class="spreadsheet-main-stage">
        <div class="spreadsheet-editor-meta">
          <span><strong>文件</strong>{{ selectedSpreadsheetFileName }}</span>
          <span><strong>负责人</strong>{{ selectedSkill.owner }}</span>
          <span><strong>最近更新</strong>{{ selectedSkill.updatedAt }}</span>
        </div>

        <div class="spreadsheet-workbench">
          <div
            :key="spreadsheetOnlyOfficeHostId"
            :id="spreadsheetOnlyOfficeHostId"
            class="rule-spreadsheet-host"
            :class="{ hidden: !spreadsheetOnlyOfficeReady && !spreadsheetOnlyOfficeError }"
          ></div>
          <TableLoadingState
            v-if="spreadsheetOnlyOfficeLoading"
            class="rule-spreadsheet-state"
            variant="overlay"
            tone="sky"
            message="正在加载 Excel 规则表"
            icon="mdi mdi-table-large"
            :show-skeleton="false"
          />
          <div v-else-if="spreadsheetOnlyOfficeError" class="rule-spreadsheet-state error">
            <i class="mdi mdi-alert-circle-outline"></i>
            <span>{{ spreadsheetOnlyOfficeError }}</span>
          </div>
        </div>

        <footer class="spreadsheet-editor-foot">
          <span>
            {{
              canEditSpreadsheetInline
                ? '可直接在线编辑；保存后，右侧会自动记录本次修改内容。'
                : '当前为只读预览模式。'
            }}
          </span>
          <span>右侧仅展示最近 30 次修改操作。</span>
        </footer>
      </section>

      <aside class="spreadsheet-change-center">
        <header class="change-center-head">
          <div>
            <h3>最近修改</h3>
            <p>展示最近 30 次保存后的具体改动。</p>
          </div>
        </header>

        <section class="change-center-section change-history-section">
          <div v-if="selectedSpreadsheetChangeRecords.length" class="change-center-list">
            <button
              v-for="item in selectedSpreadsheetChangeRecords"
              :key="`spreadsheet-change-${item.id || item.changed_at}-${item.actor}`"
              type="button"
              class="change-center-item change-record-item"
              @click="emit('open-spreadsheet-change-detail', item)"
            >
              <div class="change-record-head">
                <div>
                  <strong>{{ item.actor }}</strong>
                  <span>{{ item.time }}</span>
                </div>
                <b>{{ item.changeCountLabel }}</b>
              </div>
              <p>{{ item.summary }}</p>
              <small v-if="item.sheetPreview.length">
                涉及工作表：{{ item.sheetPreview.join('、') }}
                <template v-if="item.remainingSheetCount"> 等 {{ item.changedSheetNames.length }} 个</template>
              </small>
              <div v-if="item.previewChanges.length" class="change-record-preview">
                <span
                  v-for="change in item.previewChanges"
                  :key="`${change.sheet_name}-${change.cell}`"
                >
                  {{ change.sheet_name }}!{{ change.cell }}：
                  {{ change.before_value ?? '-' }} → {{ change.after_value ?? '-' }}
                </span>
              </div>
              <small v-if="item.remainingChangeCount" class="change-record-more">
                另有 {{ item.remainingChangeCount }} 处改动
              </small>
            </button>
          </div>
          <p v-else class="change-flow-empty">暂无修改记录</p>
        </section>
      </aside>
    </div>
  </section>
</template>

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

defineOptions({
  name: 'AuditSpreadsheetRuleDetail'
})

defineProps({
  selectedSkill: { type: Object, required: true },
  selectedSpreadsheetFileName: { type: String, default: '' },
  selectedSpreadsheetChangeRecords: { type: Array, default: () => [] },
  spreadsheetOnlyOfficeHostId: { type: String, required: true },
  spreadsheetOnlyOfficeReady: { type: Boolean, default: false },
  spreadsheetOnlyOfficeError: { type: String, default: '' },
  spreadsheetOnlyOfficeLoading: { type: Boolean, default: false },
  canEditSpreadsheetInline: { type: Boolean, default: false }
})

const emit = defineEmits(['file-change', 'open-spreadsheet-change-detail'])
const fileInput = ref(null)

function click() {
  fileInput.value?.click()
}

function reset() {
  if (fileInput.value) {
    fileInput.value.value = ''
  }
}

defineExpose({
  click,
  reset
})
</script>

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