<template>
  <div class="rule-group-view">
    <el-card>
      <template #header>
        <div class="header">
          <span class="title">客群规则任务详情</span>
          <span v-if="current" class="rg-id">编号：{{ current.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="规则组类型">{{ 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="状态">
            <el-tag :type="current.status === 'online' ? 'success' : 'info'" size="small">
              {{ current.status === 'online' ? '已上线' : '新建' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="规则数量">{{ (current.rules || []).length }}</el-descriptions-item>
          <el-descriptions-item label="创建人">{{ current.creator }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ current.createdAt }}</el-descriptions-item>
          <el-descriptions-item label="最后更新人">{{ current.updater }}</el-descriptions-item>
          <el-descriptions-item label="最后更新时间">{{ current.updatedAt }}</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="footer">
        <el-button @click="$router.push('/customization/hsbc/rule-groups')">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

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

export default {
  name: 'RuleGroupView',
  data() {
    return { current: null }
  },
  created() {
    const target = ruleGroupStore.getById(this.$route.params.id)
    if (!target) {
      ElMessage.error('规则组不存在')
      this.$router.replace('/customization/hsbc/rule-groups')
      return
    }
    this.current = target
  },
  methods: {
    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) || '-'
    }
  }
}
</script>

<style scoped>
.rule-group-view { 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;
}

.footer { text-align: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid #ebeef5; }
</style>
