<template>
  <div class="tag-view">
    <el-card v-if="tag">
      <template #header>
        <div class="header">
          <span class="title">查看标签</span>
          <span class="tag-id">ID: {{ tag.id }}</span>
        </div>
      </template>

      <!-- 基础信息 -->
      <div class="section">
        <div class="section-title">基础信息</div>
        <el-descriptions :column="2" border label-class-name="desc-label">
          <el-descriptions-item label="标签名称">{{ tag.name }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="tag.status === 'enabled' ? 'success' : 'info'" size="small">
              {{ tag.status === 'enabled' ? '启用' : '停用' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="标签描述" :span="2">
            {{ tag.description || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="创建人">{{ tag.creator }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ tag.createdAt }}</el-descriptions-item>
          <el-descriptions-item label="最后更新人">{{ tag.updater }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ tag.updatedAt }}</el-descriptions-item>
          <el-descriptions-item label="被引用次数">{{ tag.referenceCount }}</el-descriptions-item>
          <el-descriptions-item label="规则摘要">{{ ruleSummary }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 规则（只读） -->
      <div class="section">
        <div class="section-title">规则配置</div>
        <rule-builder :value="tag.groups" readonly />
      </div>

      <div class="footer">
        <el-button @click="handleBack">返回</el-button>
      </div>
    </el-card>

    <el-empty v-else description="标签不存在" />
  </div>
</template>

<script>
import tagStore from '@/store/tagStore'
import RuleBuilder from '@/components/tag/RuleBuilder.vue'

export default {
  name: 'TagView',
  components: { RuleBuilder },
  data() {
    return { tag: null }
  },
  computed: {
    ruleSummary() {
      if (!this.tag) return ''
      const g = (this.tag.groups || []).length
      const r = (this.tag.groups || []).reduce((sum, gr) => sum + (gr.rules ? gr.rules.length : 0), 0)
      return `${g} 组 / ${r} 条`
    }
  },
  created() {
    this.tag = tagStore.getById(this.$route.params.id)
  },
  methods: {
    handleBack() {
      this.$router.push('/customization/hsbc/tags')
    }
  }
}
</script>

<style scoped>
.tag-view { padding: 0; }

.header { display: flex; align-items: center; gap: 16px; }
.title { font-size: 16px; font-weight: 600; }
.tag-id { color: #909399; font-size: 13px; }

.section {
  padding: 16px 0 20px;
  border-bottom: 1px dashed #ebeef5;
}
.section:last-of-type { border-bottom: none; }

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-left: 8px;
  border-left: 3px solid #409EFF;
}

.footer {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

::v-deep .desc-label { width: 120px; }
</style>
