<template>
  <PageContainer title="运营看板">
    <QueryToolbar>
      <el-button v-if="canRead" @click="load">刷新</el-button>
    </QueryToolbar>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card>
          <template #header>通知执行</template>
          <div>今日任务：{{ data.notification?.todayTotal || 0 }}</div>
          <div>已发送：{{ data.notification?.sentTotal || 0 }}</div>
          <div>已送达：{{ data.notification?.deliveredTotal || 0 }}</div>
          <div>失败：{{ data.notification?.failedTotal || 0 }}</div>
          <div>平均派发耗时(s)：{{ (data.notification?.avgDispatchSeconds || 0).toFixed?.(2) || 0 }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>导出执行</template>
          <div>今日任务：{{ data.export?.todayTotal || 0 }}</div>
          <div>成功：{{ data.export?.successTotal || 0 }}</div>
          <div>失败：{{ data.export?.failedTotal || 0 }}</div>
          <div>平均完成耗时(s)：{{ (data.export?.avgFinishSeconds || 0).toFixed?.(2) || 0 }}</div>
          <div>24h内将过期：{{ data.export?.expiring24h || 0 }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>告警处理</template>
          <div>当前活跃告警：{{ data.alert?.activeTotal || 0 }}</div>
          <div>今日恢复：{{ data.alert?.recoveredToday || 0 }}</div>
          <div>平均恢复时长(分)：{{ (data.alert?.avgRecoverMinutes || 0).toFixed?.(2) || 0 }}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card>
          <template #header>近7天通知趋势</template>
          <el-table :data="data.trends?.notification7d || []" size="small">
            <el-table-column prop="date" label="日期" width="110" />
            <el-table-column prop="count" label="数量" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>近7天导出趋势</template>
          <el-table :data="data.trends?.export7d || []" size="small">
            <el-table-column prop="date" label="日期" width="110" />
            <el-table-column prop="count" label="数量" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>近7天告警趋势</template>
          <el-table :data="data.trends?.alert7d || []" size="small">
            <el-table-column prop="date" label="日期" width="110" />
            <el-table-column prop="count" label="数量" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card>
          <template #header>通知失败渠道TOP</template>
          <el-table :data="data.tops?.notificationFailedChannels || []" size="small">
            <el-table-column prop="channel" label="渠道" :formatter="statusFormatter" />
            <el-table-column prop="cnt" label="失败次数" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>导出业务TOP</template>
          <el-table :data="data.tops?.exportBizTypeTop || []" size="small">
            <el-table-column prop="biz_type" label="业务类型" />
            <el-table-column prop="cnt" label="任务数" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>告警规则TOP</template>
          <el-table :data="data.tops?.alertRuleTop || []" size="small">
            <el-table-column prop="rule_code" label="规则编码" />
            <el-table-column prop="cnt" label="触发次数" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </PageContainer>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import PageContainer from "../../components/PageContainer.vue";
import QueryToolbar from "../../components/QueryToolbar.vue";
import { fetchOperationsDashboard } from "../../api/modules";
import { PERMS } from "../../constants/permissions";
import { useAuthStore } from "../../stores/auth";
import { toZhStatus } from "../../utils/status";

const authStore = useAuthStore();
const canRead = computed(() => authStore.hasPermission(PERMS.dashboard.read));
const data = ref<any>({
  notification: {},
  export: {},
  alert: {},
});
const statusFormatter = (_row: any, _column: any, value: unknown) => toZhStatus(value);

const load = async () => {
  const resp = await fetchOperationsDashboard();
  data.value = resp?.data || data.value;
};

onMounted(async () => {
  if (canRead.value) {
    await load();
  }
});
</script>
