<template>
  <div class="rule-group-audit-detail" v-if="audit">
    <el-card>
      <template #header>
        <div class="header">
          <span class="title">规则组审核详情</span>
          <span class="rg-id">审核单号：{{ audit.id }}</span>
        </div>
      </template>

      <div v-if="current" class="section">
        <div class="section-title">规则组信息</div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="规则组编号">{{ current.id }}</el-descriptions-item>
          <el-descriptions-item label="规则组名称">{{ current.name }}</el-descriptions-item>
          <el-descriptions-item label="审核类型">
            <el-tag :type="auditTypeTag(audit.auditType)" size="small">
              {{ auditTypeLabel(audit.auditType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="规则组类型">{{ typeLabel(current.type) }}</el-descriptions-item>
          <el-descriptions-item label="规则逻辑">
            <el-tag size="small" :type="current.logic === 'AND' ? '' : 'warning'">
              {{ current.logic === 'AND' ? '且（AND）' : '或（OR）' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="规则数量">{{ (current.rules || []).length }}</el-descriptions-item>
          <el-descriptions-item label="备注说明" :span="2">{{ current.description || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div v-if="current" class="section">
        <div class="section-title">
          规则组配置
          <span class="section-tip">规则之间使用「{{ current.logic === 'AND' ? '且' : '或' }}」逻辑组合</span>
        </div>
        <el-table :data="current.rules || []" border style="width: 100%" empty-text="暂无规则">
          <el-table-column prop="metaCode" label="元规则编号" width="110" align="center" />
          <el-table-column label="元规则名称" min-width="180">
            <template #default="scope">{{ metaName(scope.row.metaCode) }}</template>
          </el-table-column>
          <el-table-column prop="ruleName" label="规则名称" min-width="160" show-overflow-tooltip />
          <el-table-column label="规则描述" min-width="240" show-overflow-tooltip>
            <template #default="scope">{{ buildDesc(scope.row) }}</template>
          </el-table-column>
          <el-table-column label="规则参数" min-width="220" show-overflow-tooltip>
            <template #default="scope">
              <span class="params-text">{{ buildParam(scope.row) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="section">
        <div class="section-title">提交信息</div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="提交人">{{ audit.submitterName }}</el-descriptions-item>
          <el-descriptions-item label="提交时间">{{ audit.submitTime }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="action-bar">
        <el-button @click="goBack">返回</el-button>
        <template v-if="audit.auditStatus === 'pending'">
          <el-button type="danger" @click="handleReject">驳回</el-button>
          <el-button type="primary" @click="handleApprove">通过</el-button>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import ruleGroupStore from '@/store/ruleGroupStore'
import {
  GROUP_TYPES,
  getMetaRule,
  buildRuleDescription,
  buildRuleParams
} from '@/config/metaRules'

export default {
  name: 'RuleGroupAuditDetail',
  data() {
    return { audit: null, current: null }
  },
  created() {
    this.loadAudit()
  },
  methods: {
    loadAudit() {
      const id = this.$route.params.id
      request.get('/api/rule-group-audit/detail', { params: { id } }).then(res => {
        this.audit = res.data
        if (!this.audit) {
          ElMessage.error('审核单不存在')
          this.$router.replace('/customization/hsbc/rule-group-audit')
          return
        }
        this.current = ruleGroupStore.getById(this.audit.bizId)
      }).catch(() => {})
    },
    typeLabel(type) {
      const item = GROUP_TYPES.find(g => g.value === type)
      return item ? item.label : type
    },
    metaName(code) {
      const m = getMetaRule(code)
      return m ? m.name : code
    },
    buildDesc(rule) {
      return buildRuleDescription(rule.metaCode, rule.config) || '-'
    },
    buildParam(rule) {
      return buildRuleParams(rule.metaCode, rule.config) || '-'
    },
    auditTypeLabel(t) {
      return { new: '新增', online: '上线' }[t] || t
    },
    auditTypeTag(t) {
      return { new: 'success', online: 'warning' }[t] || ''
    },
    handleApprove() {
      ElMessageBox.confirm('确定通过该规则组审核吗？', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        request.post('/api/rule-group-audit/approve', { id: this.audit.id }).then(() => {
          ElMessage.success('审核通过')
          this.$router.push('/customization/hsbc/rule-group-audit')
        }).catch(() => {})
      }).catch(() => {})
    },
    handleReject() {
      ElMessageBox.confirm('确定驳回该规则组审核吗？', '提示', {
        confirmButtonText: '驳回',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.post('/api/rule-group-audit/reject', { id: this.audit.id }).then(() => {
          ElMessage.success('已驳回')
          this.$router.push('/customization/hsbc/rule-group-audit')
        }).catch(() => {})
      }).catch(() => {})
    },
    goBack() {
      this.$router.push('/customization/hsbc/rule-group-audit')
    }
  }
}
</script>

<style scoped>
.rule-group-audit-detail { padding: 0; }
.header { display: flex; align-items: center; justify-content: space-between; }
.title { font-size: 16px; font-weight: 600; color: #409EFF; }
.rg-id { color: #909399; font-size: 13px; }
.section { margin-bottom: 24px; }
.section-title {
  font-size: 14px; font-weight: 600; color: #303133;
  background: #f5f7fa; padding: 10px 14px; border-radius: 4px;
  margin-bottom: 16px;
}
.section-tip { font-weight: normal; color: #909399; margin-left: 12px; font-size: 12px; }
.params-text {
  font-family: 'Menlo', 'Consolas', monospace;
  color: #606266; font-size: 12px;
}
.action-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}
</style>