<template>
  <section class="approval-page">
    <TravelRequestDetailView
      v-if="selectedRow"
      :request="selectedRow"
      back-label="返回审批列表"
      approval-mode
      @back-to-requests="closeSelectedDetail"
      @request-updated="handleDetailUpdated"
      @request-deleted="handleDetailDeleted"
    />

    <EnterpriseListPage
      v-else
      v-model:active-tab="activeTab"
      class="approval-list"
      :tabs="tabs"
      tabs-label="审批状态"
      :loading="loading"
      :error="error"
      :empty="showEmpty"
      :empty-state="approvalEmptyState"
      loading-title="审批待办同步中"
      loading-message="正在加载当前可见的待审批报销单据"
      loading-icon="mdi mdi-clipboard-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>

        <button v-for="filter in filters" :key="filter" type="button" class="filter-btn">
          <span>{{ filter }}</span>
          <i class="mdi mdi-chevron-down"></i>
        </button>
      </template>

      <template #hint>
        <i class="mdi mdi-information-outline"></i>
        点击单据行查看审批详情
      </template>

      <template #table>
        <table>
          <colgroup>
            <col><col><col><col><col><col><col><col><col><col><col><col><col><col>
          </colgroup>
          <thead>
            <tr>
              <th>单号</th>
              <th>优先级</th>
              <th>申请人</th>
              <th>申请部门</th>
              <th>报销类型</th>
              <th>金额</th>
              <th>提交时间 <i class="mdi mdi-sort"></i></th>
              <th>风险等级</th>
              <th>等待 / SLA</th>
              <th>证据</th>
              <th>AI建议</th>
              <th>当前节点</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in visibleRows" :key="row.id" :class="{ spotlight: row.spotlight }" @click="selectedRow = row">
              <td><strong class="doc-id">{{ row.id }}</strong></td>
              <td>
                <span class="priority-tag" :class="row.priorityTier" :title="row.priorityTitle">
                  {{ row.priorityLabel }} {{ row.priorityScore }}
                </span>
              </td>
              <td>
                <span class="person">
                  <span class="avatar">{{ row.avatar }}</span>
                  {{ row.applicant }}
                </span>
              </td>
              <td>{{ row.department }}</td>
              <td>{{ row.type }}</td>
              <td>{{ row.amount }}</td>
              <td>{{ row.time }}</td>
              <td><span class="risk-tag" :class="row.riskTone">{{ row.risk }}</span></td>
              <td><strong class="sla" :class="row.slaTone">{{ row.sla }}</strong></td>
              <td>
                <span class="evidence-meta" :class="row.evidenceTone" :title="row.evidenceTitle">
                  {{ row.evidenceLabel }}
                </span>
              </td>
              <td>
                <span class="ai-suggestion" :title="row.suggestionReason">
                  {{ row.suggestionLabel }}
                </span>
              </td>
              <td>{{ row.node }}</td>
              <td><span class="status-tag" :class="row.statusTone">{{ row.statusLabel }}</span></td>
              <td>
                <button class="more-btn" type="button" aria-label="查看审批详情" @click.stop="selectedRow = row">
                  <i class="mdi mdi-dots-horizontal"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </template>
    </EnterpriseListPage>
  </section>
</template>

<script src="./scripts/ApprovalCenterView.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>
