<template>
  <section class="budget-center-page">

    <section class="budget-summary-grid" aria-label="预算概览">
      <article
        v-for="(metric, index) in budgetMetrics"
        :key="metric.label"
        class="budget-summary-card"
        :class="metric.tone"
        :style="{ '--delay': `${index * 55}ms` }"
      >
        <div class="budget-summary-head">
          <span class="summary-icon">
            <i :class="metric.icon"></i>
          </span>
          <span class="summary-label">{{ metric.label }}</span>
        </div>
        <strong class="summary-value">{{ metric.value }}</strong>
        <div class="summary-comparison-row">
          <span class="comparison-pill" :class="metric.yoy.tone">
            <b>同比</b>
            <em>{{ metric.yoy.value }}</em>
            <i :class="metric.yoy.icon"></i>
          </span>
          <span class="comparison-pill" :class="metric.mom.tone">
            <b>环比</b>
            <em>{{ metric.mom.value }}</em>
            <i :class="metric.mom.icon"></i>
          </span>
        </div>
      </article>
    </section>

    <section class="budget-filter-bar">
      <div class="budget-filter-set">
        <label>
          <span>预算年度</span>
          <EnterpriseSelect v-model="filters.year" :options="yearOptions" />
        </label>
        <label>
          <span>预算季度</span>
          <EnterpriseSelect v-model="filters.quarter" :options="quarters" />
        </label>
        <label>
          <span>费用类型</span>
          <EnterpriseSelect v-model="filters.expenseType" :options="expenseTypes" />
        </label>
        <label>
          <span>状态</span>
          <EnterpriseSelect v-model="filters.status" :options="statuses" />
        </label>
      </div>
      <div class="budget-action-set">
        <ElButton v-if="canEditBudget" class="budget-primary-btn" type="primary" @click="openBudgetAssistant">
          <i class="mdi mdi-pencil-outline"></i>
          <span>编辑预算</span>
        </ElButton>
        <ElButton class="budget-ghost-btn">
          <i class="mdi mdi-text-box-outline"></i>
          <span>预算详情</span>
        </ElButton>
      </div>
    </section>

    <section class="budget-work-grid" :class="{ 'single-department': !canSwitchDepartments }">
      <aside v-if="canSwitchDepartments" class="budget-department-panel">
        <header>
          <strong>部门切换</strong>
        </header>
        <ElInput
          v-model="departmentKeyword"
          class="department-search-input"
          clearable
          placeholder="搜索部门"
        >
          <template #prefix>
            <i class="mdi mdi-magnify"></i>
          </template>
        </ElInput>
        <nav class="department-list" aria-label="预算部门">
          <ElButton
            v-for="department in visibleDepartments"
            :key="department.code"
            class="department-switch-btn"
            text
            :class="{ active: department.code === activeDepartmentCode }"
            @click="activeDepartmentCode = department.code"
          >
            <i :class="department.icon"></i>
            <span>{{ department.name }}</span>
          </ElButton>
        </nav>
      </aside>

      <article class="budget-table-panel">
        <header>
          <strong>当前部门：{{ activeDepartmentName }}</strong>
          <ElInput
            v-model="budgetTableKeyword"
            class="budget-table-search"
            clearable
            placeholder="筛选预算明细"
            aria-label="筛选预算明细"
          >
            <template #prefix>
              <i class="mdi mdi-magnify"></i>
            </template>
          </ElInput>
        </header>
        <div class="budget-table-wrap">
          <ElTable
            :data="visibleBudgetRows"
            class="budget-data-table"
            border
            stripe
          >
            <ElTableColumn prop="compiledAt" label="编制时间" min-width="150" align="center" />
            <ElTableColumn prop="compiler" label="编制人" min-width="120" align="center" />
            <ElTableColumn prop="reviewer" label="审核人" min-width="120" align="center" />
            <ElTableColumn prop="expenseType" label="费用类型" min-width="140" align="center" />
            <ElTableColumn prop="total" label="预算金额（元）" min-width="140" align="right" />
            <ElTableColumn prop="used" label="已发生（元）" min-width="130" align="right" />
            <ElTableColumn prop="occupied" label="已占用（元）" min-width="130" align="right" />
            <ElTableColumn prop="left" label="剩余可用（元）" min-width="140" align="right" />
            <ElTableColumn label="使用率" min-width="128" align="center">
              <template #default="{ row }">
                <div class="budget-rate">
                  <div><em :class="row.rateTone" :style="{ width: `${Math.min(row.rate, 100)}%` }"></em></div>
                  <span>{{ row.rate }}%</span>
                </div>
              </template>
            </ElTableColumn>
            <ElTableColumn label="提醒阈值" min-width="112" align="center">
              <template #default="{ row }">
                <span class="budget-threshold-badge reminder">{{ row.reminderLine }}</span>
              </template>
            </ElTableColumn>
            <ElTableColumn label="告警阈值" min-width="112" align="center">
              <template #default="{ row }">
                <span class="budget-threshold-badge alert">{{ row.alertLine }}</span>
              </template>
            </ElTableColumn>
            <ElTableColumn label="风险阈值" min-width="112" align="center">
              <template #default="{ row }">
                <span class="budget-threshold-badge risk">{{ row.riskLine }}</span>
              </template>
            </ElTableColumn>
          </ElTable>
        </div>
        <footer class="budget-table-foot">
          <ElPagination
            class="budget-pager"
            background
            layout="prev, pager, next"
            :pager-count="5"
            :current-page="budgetPage"
            :page-size="budgetPageSize"
            :total="totalBudgetRows"
            @current-change="goToBudgetPage"
          />
          <EnterpriseSelect
            v-model="budgetPageSize"
            class="budget-page-size-select"
            :options="budgetPageSizeOptions"
            aria-label="每页条数"
            size="small"
          />
          <span class="budget-page-summary">
            共 {{ totalBudgetRows }} 条，当前第 {{ budgetPage }} / {{ totalBudgetPages }} 页
          </span>
        </footer>
      </article>
    </section>

    <section class="budget-bottom-grid">
      <article class="budget-chart-panel">
        <header class="budget-card-head">
          <strong>费用预算使用占比</strong>
          <div class="budget-chart-legend">
            <span><i class="legend-line used"></i>已使用</span>
            <span><i class="legend-line occupied"></i>已占用</span>
            <span><i class="legend-line available"></i>剩余可用</span>
          </div>
        </header>
        <BudgetTrendChart
          :labels="budgetUsageData.labels"
          :budget="budgetUsageData.budget"
          :used="budgetUsageData.used"
          :occupied="budgetUsageData.occupied"
          :available="budgetUsageData.available"
        />
      </article>

      <article class="budget-alert-panel">
        <header class="budget-card-head">
          <strong>预算预警</strong>
          <ElButton v-if="warnings.length" class="budget-link-btn" text>查看全部</ElButton>
        </header>
        <div v-if="warnings.length" class="budget-alert-list">
          <div v-for="alert in warnings" :key="alert.id" class="budget-alert-row">
            <i :class="alert.tone"></i>
            <strong>{{ alert.title }}</strong>
            <span>{{ alert.desc }}</span>
            <time v-if="alert.date">{{ alert.date }}</time>
          </div>
        </div>
        <div v-else class="budget-alert-empty">
          <span class="budget-alert-empty-icon">
            <i class="mdi mdi-shield-check-outline"></i>
          </span>
          <strong>暂无预算预警</strong>
          <p>当前范围内预算使用率未达到预警线。</p>
        </div>
      </article>
    </section>

  </section>
</template>

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

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