<template>
  <div class="app-container">
    <el-row :gutter="16">
      <el-col :span="6"><el-card shadow="hover"><div class="stat-card"><div class="stat-value">{{ dash.activeInstances24h || 0 }}</div><div class="stat-label">24h活跃实例</div></div></el-card></el-col>
      <el-col :span="6"><el-card shadow="hover"><div class="stat-card"><div class="stat-value">{{ dash.messages7d || 0 }}</div><div class="stat-label">7天消息量</div></div></el-card></el-col>
      <el-col :span="6"><el-card shadow="hover"><div class="stat-card"><div class="stat-value" style="color:#E6A23C">{{ deadLetterBacklog }}</div><div class="stat-label">死信积压</div></div></el-card></el-col>
      <el-col :span="6"><el-card shadow="hover"><div class="stat-card"><div class="stat-value" style="color:#67C23A">{{ heartbeats }}</div><div class="stat-label">引擎在线</div></div></el-card></el-col>
    </el-row>

    <el-row :gutter="16" style="margin-top:16px">
      <el-col :span="12">
        <el-card shadow="hover"><div slot="header"><span>转换漏斗</span></div>
          <div v-for="(v,k) in funnel" :key="k" style="margin-bottom:12px">
            <div style="display:flex;justify-content:space-between"><span>{{ k }}</span><span style="font-weight:bold">{{ v }}</span></div>
            <el-progress :percentage="Math.min(100, v/(funnel.conversations||1)*100)" :show-text="false" :stroke-width="8" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover"><div slot="header"><span>渠道分布</span></div>
          <el-table border :data="channelData" size="small"><el-table-column prop="channel_type" label="渠道"/><el-table-column prop="cnt" label="会话数"/></el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-card shadow="hover" style="margin-top:16px"><div slot="header"><span>知识库使用排行</span></div>
      <el-table border :data="topKnowledge" size="small"><el-table-column prop="knowledge_title" label="知识条目"/><el-table-column prop="cnt" label="引用次数" width="100"/></el-table>
    </el-card>

    <el-card shadow="hover" style="margin-top:16px"><div slot="header"><span>心跳任务状态</span></div>
      <el-table border :data="heartbeatList" size="small"><el-table-column prop="task_key" label="任务"/><el-table-column prop="status" label="状态"/><el-table-column prop="create_time" label="时间" width="160"/></el-table>
    </el-card>
  </div>
</template>
<script>
import { getTenantDashboard } from '@/api/workflow/lobster-dashboard'
export default {
  data() { return { dash:{}, funnel:{}, channelData:[], topKnowledge:[], heartbeatList:[], deadLetterBacklog:0, heartbeats:0 } },
  created() { this.load() },
  methods: {
    async load() {
      try {
        const res = await getTenantDashboard(this.$store.getters.companyId || 0)
        this.dash = res.data || res
        this.funnel = this.dash.conversionFunnel || {}
        this.channelData = (this.dash.channelDistribution || []).map(r=>({channel_type:r.channel_type||r.channelType,cnt:r.cnt||r.count}))
        this.topKnowledge = (this.dash.topKnowledge || []).slice(0,10)
        this.heartbeatList = this.dash.heartbeatStatus || []
        this.deadLetterBacklog = this.dash.deadLetterBacklog || 0
        this.heartbeats = this.heartbeatList.length
      } catch(e) { this.$message.error('加载失败') }
    }
  }
}
</script>
<style scoped>
.stat-card { text-align:center; padding:10px 0 }
.stat-value { font-size:32px; font-weight:bold; color:#409EFF }
.stat-label { font-size:13px; color:#909399; margin-top:4px }
</style>
