<template>
  <section class="approval-page archive-page">
    <TravelRequestDetailView
      v-if="selectedRow"
      :request="selectedRow"
      back-label="返回归档列表"
      @back-to-requests="closeSelectedDetail"
      @request-updated="reload"
      @request-deleted="reload"
    />

    <EnterpriseListPage
      v-else
      v-model:active-tab="activeTab"
      class="approval-list"
      :tabs="tabs"
      tabs-label="归档分类"
      :loading="loading"
      :error="error"
      :empty="showEmpty"
      :empty-state="archiveEmptyState"
      loading-title="归档数据同步中"
      loading-message="正在加载公司已归档的报销单据"
      loading-icon="mdi mdi-archive-check-outline"
      error-title="归档列表加载失败"
      :show-pagination="false"
      @retry="reload"
      @empty-action="handleEmptyAction"
    >
      <template #filters>
        <div class="list-search">
          <i class="mdi mdi-magnify"></i>
          <input v-model="listKeyword" type="search" placeholder="搜索单号、申请人、部门、归档类型..." />
        </div>

        <el-dropdown
          v-for="menu in filterMenus"
          :key="menu.key"
          class="archive-filter-control"
          trigger="click"
          placement="bottom-start"
          popper-class="archive-filter-menu"
          @command="selectFilterValue(menu.key, $event)"
        >
          <button class="filter-btn archive-filter-trigger" type="button">
            <span>{{ menu.label }}</span>
            <i class="mdi mdi-chevron-down"></i>
          </button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="option in menu.options"
                :key="`${menu.key}-${option.value}`"
                :command="option.value"
                :class="{ 'is-active': menu.activeValue === option.value }"
                class="archive-filter-option"
                :aria-current="menu.activeValue === option.value ? 'true' : undefined"
              >
                <i v-if="menu.activeValue === option.value" class="mdi mdi-check"></i>
                <span>{{ option.label }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>

      <template #hint>
        <i class="mdi mdi-information-outline"></i>
        归档中心保存公司已付款或已归档的报销数据，点击单据行查看详情
      </template>

      <template #table>
        <table>
          <colgroup>
            <col><col><col><col><col><col><col><col><col>
          </colgroup>
          <thead>
            <tr>
              <th>单号</th>
              <th>申请人</th>
              <th>申请部门</th>
              <th>归档类型</th>
              <th>金额</th>
              <th>提交时间 <i class="mdi mdi-sort"></i></th>
              <th>归档节点</th>
              <th>风险</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in visibleRows" :key="row.id" @click="selectedRow = row">
              <td><strong class="doc-id">{{ row.id }}</strong></td>
              <td>
                <span class="person">
                  <span class="avatar">{{ row.avatar }}</span>
                  {{ row.applicant }}
                </span>
              </td>
              <td>{{ row.department }}</td>
              <td>{{ row.archiveType }}</td>
              <td>{{ row.amount }}</td>
              <td>{{ row.time }}</td>
              <td>{{ row.node }}</td>
              <td><span class="risk-tag" :class="row.riskTone">{{ row.risk }}</span></td>
              <td><span class="status-tag archived">{{ row.status }}</span></td>
            </tr>
          </tbody>
        </table>
      </template>
    </EnterpriseListPage>
  </section>
</template>

<script src="./scripts/ArchiveCenterView.js"></script>

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