<script setup lang="ts">
/**
 * 状态徽章：展示发布/启用/咨询状态，可点击切换（由父组件处理具体 API）。
 */
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  value?: string | number | boolean | null
  map?: Record<string, string>
  clickable?: boolean
}>(), {
  value: '',
  map: () => ({}),
  clickable: false,
})

const emit = defineEmits<{
  click: []
}>()

const label = computed(() => {
  const key = String(props.value ?? '')
  if (props.map[key]) return props.map[key]
  if (props.value === true || props.value === 1 || props.value === '1') return '是'
  if (props.value === false || props.value === 0 || props.value === '0') return '否'
  return key || '—'
})

const tone = computed(() => {
  const v = props.value
  if (v === true || v === 1 || v === '1' || v === 2 || v === '2') return 'on'
  if (v === false || v === 0 || v === '0') return 'off'
  return 'muted'
})
</script>

<template>
  <view
    class="badge"
    :class="[tone, { clickable }]"
    @click.stop="clickable && emit('click')"
  >
    {{ label }}
  </view>
</template>

<style scoped lang="scss">
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4rpx 14rpx;
  border-radius: 8rpx;
  font-size: 22rpx;
  line-height: 1.4;
}
.on { background: rgba(212, 179, 131, 0.2); color: rgb(var(--art-accent)); }
.off { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.45); }
.muted { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.55); }
.clickable { border: 1px solid rgba(212, 179, 131, 0.35); }
</style>
