<template>
  <section class="budget-center-page">
    <article v-if="!detailMode" class="budget-list panel">
      <div class="budget-list-head">
        <aside v-if="budgetConfigurationFocus.active" class="budget-configuration-focus" role="status">
          <i class="mdi mdi-information-outline" aria-hidden="true"></i>
          <div>
            <strong>预算配置视图 · {{ budgetConfigurationFocusSummary }}</strong>
            <span>{{ budgetConfigurationNotice }}</span>
          </div>
        </aside>
        <nav class="status-tabs budget-scope-tabs" aria-label="预算中心视角">
          <button
            v-for="tab in budgetScopeTabs"
            :key="tab.value"
            type="button"
            :class="{ active: activeBudgetScope === tab.value }"
            @click="activeBudgetScope = tab.value"
          >
            <span>{{ tab.label }}</span>
            <small>{{ tab.count }}</small>
          </button>
        </nav>
      </div>

      <div class="document-toolbar budget-toolbar">
        <div class="filter-set">
          <label class="list-search">
            <i class="mdi mdi-magnify"></i>
            <input v-model="budgetKeyword" type="search" placeholder="搜索预算编号、部门、编制人" />
          </label>
          <DocumentDropdownFilter
            id="year"
            :active-filter-key="activeBudgetFilterKey"
            :label="budgetYearFilterLabel"
            title="年度"
            :options="yearOptions"
            :selected-value="filters.year"
            @toggle="toggleBudgetFilter"
            @select="selectBudgetFilter('year', $event)"
          />
          <DocumentDropdownFilter
            id="quarter"
            :active-filter-key="activeBudgetFilterKey"
            :label="budgetQuarterFilterLabel"
            title="季度"
            :options="quarterOptions"
            :selected-value="filters.quarter"
            @toggle="toggleBudgetFilter"
            @select="selectBudgetFilter('quarter', $event)"
          />
          <DocumentDropdownFilter
            id="status"
            :active-filter-key="activeBudgetFilterKey"
            :label="budgetStatusFilterLabel"
            title="状态"
            :options="statusOptions"
            :selected-value="filters.status"
            @toggle="toggleBudgetFilter"
            @select="selectBudgetFilter('status', $event)"
          />
        </div>

        <div class="document-actions">
          <ElButton v-if="canEditBudget" class="budget-primary-btn" type="primary" @click="openBudgetAssistant()">
            <i class="mdi mdi-pencil-outline"></i>
            <span>编辑预算</span>
          </ElButton>
        </div>
      </div>

      <div class="table-wrap budget-table-wrap" :class="{ 'is-empty': showEmpty }">
        <div v-if="budgetLoading" class="table-state">
          <TableLoadingState
            title="预算数据同步中"
            message="正在汇总部门预算、待审核草案与归档版本"
            icon="mdi mdi-chart-donut"
            floating
          />
        </div>

        <div v-else-if="budgetError" class="table-state error">
          <i class="mdi mdi-alert-circle-outline"></i>
          <strong>预算中心加载失败</strong>
          <p>{{ budgetError }}</p>
        </div>

        <TableEmptyState
          v-else-if="showEmpty"
          :eyebrow="emptyState.eyebrow"
          :title="emptyState.title"
          :description="emptyState.desc"
          :icon="emptyState.icon"
          :tone="emptyState.tone"
          :art-label="emptyState.artLabel"
          :tips="emptyState.tips"
        />

        <table v-else class="budget-list-table" :class="activeBudgetScope">
          <colgroup v-if="activeBudgetScope === BUDGET_SCOPE_ALL">
            <col class="col-budget-no">
            <col class="col-department">
            <col class="col-period">
            <col class="col-money">
            <col class="col-money">
            <col class="col-money">
            <col class="col-money">
            <col class="col-rate">
            <col class="col-status">
            <col class="col-updated">
          </colgroup>
          <colgroup v-else-if="activeBudgetScope === BUDGET_SCOPE_REVIEW">
            <col class="col-budget-no">
            <col class="col-department">
            <col class="col-person">
            <col class="col-submitted">
            <col class="col-period">
            <col class="col-money">
            <col class="col-change">
            <col class="col-score">
            <col class="col-status">
            <col class="col-status">
          </colgroup>
          <colgroup v-else>
            <col class="col-budget-no">
            <col class="col-department">
            <col class="col-period">
            <col class="col-version">
            <col class="col-status">
            <col class="col-money">
            <col class="col-person">
            <col class="col-submitted">
            <col class="col-status">
          </colgroup>

          <thead>
            <tr v-if="activeBudgetScope === BUDGET_SCOPE_ALL">
              <th>预算编号</th>
              <th>部门</th>
              <th>预算周期</th>
              <th>年度预算</th>
              <th>季度预算</th>
              <th>月度预算</th>
              <th>剩余可用</th>
              <th>使用率</th>
              <th>风险</th>
              <th>更新时间</th>
            </tr>
            <tr v-else-if="activeBudgetScope === BUDGET_SCOPE_REVIEW">
              <th>草案编号</th>
              <th>提交部门</th>
              <th>编制人</th>
              <th>提交时间</th>
              <th>预算周期</th>
              <th>申请预算</th>
              <th>较上一版</th>
              <th>AI 分析</th>
              <th>风险</th>
              <th>状态</th>
            </tr>
            <tr v-else>
              <th>归档编号</th>
              <th>部门</th>
              <th>预算周期</th>
              <th>版本</th>
              <th>归档类型</th>
              <th>原预算额</th>
              <th>审核人</th>
              <th>归档时间</th>
              <th>状态</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="row in visibleBudgetRows" :key="row.id" @click="handleRowAction(row)">
              <template v-if="activeBudgetScope === BUDGET_SCOPE_ALL">
                <td data-label="预算编号"><strong class="budget-no">{{ row.budgetNo }}</strong></td>
                <td data-label="部门">{{ row.departmentName }}</td>
                <td data-label="预算周期">{{ row.periodLabel }}</td>
                <td data-label="年度预算">{{ row.annualAmountLabel }}</td>
                <td data-label="季度预算">{{ row.quarterAmountLabel }}</td>
                <td data-label="月度预算">{{ row.monthAmountLabel }}</td>
                <td data-label="剩余可用">{{ row.availableAmountLabel }}</td>
                <td data-label="使用率">
                  <div class="budget-rate">
                    <div><em :class="row.riskTone" :style="{ width: `${Math.min(row.usageRate, 100)}%` }"></em></div>
                    <span>{{ row.usageRateLabel }}</span>
                  </div>
                </td>
                <td data-label="风险"><span :class="['budget-status-tag', row.riskTone]">{{ row.riskLabel }}</span></td>
                <td data-label="更新时间">{{ row.updatedAt }}</td>
              </template>

              <template v-else-if="activeBudgetScope === BUDGET_SCOPE_REVIEW">
                <td data-label="草稿编号"><strong class="budget-no">{{ row.budgetNo }}</strong></td>
                <td data-label="提交部门">{{ row.departmentName }}</td>
                <td data-label="编制人">{{ row.compiler }}</td>
                <td data-label="提交时间">{{ row.submittedAt }}</td>
                <td data-label="预算周期">{{ row.periodLabel }}</td>
                <td data-label="申请预算">{{ row.requestedAmountLabel }}</td>
                <td data-label="较上一版"><span class="budget-change">{{ row.changeRateLabel }}</span></td>
                <td data-label="AI 分析"><span class="budget-score">{{ row.aiScore }}分</span></td>
                <td data-label="风险"><span :class="['budget-status-tag', row.riskTone]">{{ row.riskLabel }}</span></td>
                <td data-label="状态"><span :class="['budget-status-tag', row.statusTone]">{{ row.statusLabel }}</span></td>
              </template>

              <template v-else>
                <td data-label="归档编号"><strong class="budget-no">{{ row.budgetNo }}</strong></td>
                <td data-label="部门">{{ row.departmentName }}</td>
                <td data-label="预算周期">{{ row.periodLabel }}</td>
                <td data-label="版本">{{ row.version }}</td>
                <td data-label="归档类型">{{ row.archiveType }}</td>
                <td data-label="原预算额">{{ row.quarterAmountLabel }}</td>
                <td data-label="审核人">{{ row.reviewer }}</td>
                <td data-label="归档时间">{{ row.archivedAt }}</td>
                <td data-label="状态"><span :class="['budget-status-tag', row.statusTone]">{{ row.statusLabel }}</span></td>
              </template>
            </tr>
          </tbody>
        </table>
      </div>

      <EnterprisePagination
        v-if="showTable"
        :current-page="budgetPage"
        :page-size="budgetPageSize"
        :page-size-options="budgetPageSizeOptions"
        :summary="pageSummary"
        :total-pages="totalBudgetPages"
        @page-size-change="changeBudgetPageSize"
        @update:current-page="goToBudgetPage"
      />
    </article>

    <EnterpriseDetailPage
      v-else-if="selectedBudget"
      variant="budget-detail-page"
      back-label="返回预算中心"
      @back="backToList"
    >
      <aside v-if="budgetConfigurationFocus.active" class="budget-configuration-focus" role="status">
        <i class="mdi mdi-information-outline" aria-hidden="true"></i>
        <div>
          <strong>预算配置视图 · {{ budgetConfigurationFocusSummary }}</strong>
          <span>{{ budgetConfigurationNotice }}</span>
        </div>
      </aside>
      <section class="budget-period-grid" aria-label="预算周期金额">
        <article v-for="item in selectedBudget.periodRows" :key="item.label" class="budget-period-card">
          <span>{{ item.label }}</span>
          <strong>{{ item.value }}</strong>
          <p>{{ item.desc }}</p>
        </article>
      </section>

      <EnterpriseDetailCard
        class="budget-detail-card budget-chart-card"
        title="费用预算使用占比"
        description="按费用类型展示已发生、已占用和剩余额度"
      >
        <BudgetTrendChart
          :labels="selectedBudgetUsageData.labels"
          :budget="selectedBudgetUsageData.budget"
          :used="selectedBudgetUsageData.used"
          :occupied="selectedBudgetUsageData.occupied"
          :available="selectedBudgetUsageData.available"
        />
      </EnterpriseDetailCard>

      <EnterpriseDetailCard
        class="budget-detail-card budget-status-explain-card"
        title="预算状态说明"
        description="说明当前预算发布状态与风险判断依据"
      >
        <div class="budget-status-explain-list">
          <article
            v-for="item in selectedBudgetStatusNotes"
            :key="item.label"
            class="budget-status-explain-item"
          >
            <span :class="['budget-status-tag', item.tone]">{{ item.value }}</span>
            <div>
              <strong>{{ item.label }}</strong>
              <p>{{ item.desc }}</p>
            </div>
          </article>
        </div>
      </EnterpriseDetailCard>

      <EnterpriseDetailCard
        class="budget-detail-card budget-category-card"
        title="费用类型预算"
        description="仅覆盖当前 demo 阶段预算管理费种"
      >
        <div class="budget-detail-table-wrap">
          <table class="budget-detail-table">
            <thead>
              <tr>
                <th>费用类型</th>
                <th>预算金额</th>
                <th>已发生</th>
                <th>已占用</th>
                <th>剩余</th>
                <th>使用率</th>
                <th>提醒</th>
                <th>告警</th>
                <th>风险</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="item in selectedBudget.categoryRows"
                :key="item.code"
                :class="{ 'is-source-focus': isFocusedBudgetCategory(item) }"
              >
                <td data-label="费用类型"><strong>{{ item.name }}</strong></td>
                <td data-label="预算金额">{{ item.amountLabel }}</td>
                <td data-label="已发生">{{ item.usedLabel }}</td>
                <td data-label="已占用">{{ item.occupiedLabel }}</td>
                <td data-label="剩余">{{ item.availableLabel }}</td>
                <td data-label="使用率">{{ item.usageRateLabel }}</td>
                <td data-label="提醒"><span class="budget-threshold reminder">{{ item.reminderLine }}</span></td>
                <td data-label="告警"><span class="budget-threshold alert">{{ item.alertLine }}</span></td>
                <td data-label="风险"><span class="budget-threshold risk">{{ item.riskLine }}</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </EnterpriseDetailCard>

      <template #actions>
        <ElButton
          v-if="selectedBudget.scope === BUDGET_SCOPE_REVIEW && canAuditBudgetDrafts"
          class="budget-primary-btn"
          type="primary"
          @click="openBudgetReviewAssistant(selectedBudget)"
        >
          <i class="mdi mdi-clipboard-check-outline"></i>
          <span>进入审核</span>
        </ElButton>
        <ElButton v-if="canEditBudget" class="budget-ghost-btn" @click="openBudgetAssistant()">
          <i class="mdi mdi-pencil-outline"></i>
          <span>编辑预算</span>
        </ElButton>
      </template>
    </EnterpriseDetailPage>
  </section>
</template>

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

<style scoped src="../assets/styles/components/document-list-shared.css"></style>
<style scoped src="../assets/styles/views/budget-center-view.css"></style>
