<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="租户" prop="tenantId">
        <el-select v-model="queryParams.tenantId" placeholder="选择租户" clearable filterable size="small" style="width: 200px">
          <el-option v-for="item in companyList" :key="item.companyId" :label="item.companyName" :value="item.companyId" />
        </el-select>
      </el-form-item>
      <el-form-item label="渠道类型" prop="channelType">
        <el-select v-model="queryParams.channelType" placeholder="请选择渠道" clearable size="small">
          <el-option label="企微" value="qw" />
          <el-option label="个微" value="wx" />
          <el-option label="短信" value="sms" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5"><el-button type="danger" plain icon="el-icon-refresh-right" size="mini" @click="handleRetryAll" v-hasPermi="['workflow:lobster:edit']">批量重发</el-button></el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-row :gutter="16" class="mb8">
      <el-col :span="6"><el-card shadow="hover"><div class="stat-card"><div class="stat-value" style="color:#E6A23C">{{ stats.pendingCount || 0 }}</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:#F56C6C">{{ stats.deadCount || 0 }}</div><div class="stat-label">死信数</div></div></el-card></el-col>
    </el-row>
    <el-table border v-loading="loading" :data="deadList">
      <el-table-column label="租户" align="center" prop="tenant_name" width="140" />
      <el-table-column label="实例ID" align="center" prop="instanceId" width="80" />
      <el-table-column label="渠道类型" align="center" prop="channelType" width="100" />
      <el-table-column label="消息内容" align="center" prop="content" show-overflow-tooltip />
      <el-table-column label="错误原因" align="center" prop="errorMessage" show-overflow-tooltip />
      <el-table-column label="重试次数" align="center" prop="retryCount" width="60" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
    </el-table>
  </div>
</template>
<script>
import { listAllCompanies } from '@/api/workflow/lobster-admin'
import { listDeadLetters, retryAllDeadLetters, getDeadLetterStats } from '@/api/workflow/lobster'
export default {
  name: 'LobsterDeadLetter',
  data() {
    return { loading: false, showSearch: true, deadList: [], stats: {}, companyList: [],
      queryParams: { tenantId: null, channelType: null }
    }
  },
  created() { this.getCompanyList(); this.getList(); this.getStats() },
  methods: {
    getCompanyList() {
      listAllCompanies().then(res => { this.companyList = res.data || [] })
    },
    getList() { this.loading = true; listDeadLetters(this.queryParams).then(res => { let d = res.data || {}; this.deadList = d.items || []; this.loading = false }).catch(() => { this.loading = false }) },
    getStats() { getDeadLetterStats(this.queryParams).then(res => { this.stats = res.data || {} }) },
    handleQuery() { this.getList(); this.getStats() },
    resetQuery() { this.resetForm('queryForm'); this.handleQuery() },
    handleRetryAll() { this.$confirm('确定批量重发所有死信消息吗？', '提示', { type: 'warning' }).then(() => { retryAllDeadLetters().then(res => { this.$message.success(res.data?.message || '重发完成'); this.getList(); this.getStats() }) }) }
  }
}
</script>
<style scoped>
.stat-card { text-align: center; padding: 10px 0; }
.stat-value { font-size: 24px; font-weight: bold; }
.stat-label { font-size: 12px; color: #909399; margin-top: 4px; }
</style>
