<template>
  <el-tag
    v-if="showTag"
    :type="realColorType"
    :size="size"
    :color="realBgColor"
    style="color: #fff"
    disable-transitions
  >
    {{ dictLabel }}
  </el-tag>
</template>

<script>
import { getDictOptions } from "@/utils/dict";

export default {
  name: "DictTag",
  props: {
    type: { type: String, required: true },
    value: { type: [String, Number, Boolean], required: true },
    size: { type: String, default: null },
  },
  computed: {
    showTag() {
      return (
        this.type != null && this.value !== undefined && this.value !== null
      );
    },
    dictItem() {
      const opts = getDictOptions(this.type);
      return opts.find((d) => d.value === String(this.value)) || {};
    },
    realColorType() {
      const ct = this.dictItem.colorType;
      return ct === "default" || !ct ? "info" : ct;
    },
    realBgColor() {
      const cls = this.dictItem.cssClass;
      return cls && this.isHexColor(cls) ? cls : "";
    },
    dictLabel() {
      return this.dictItem.label || "";
    },
  },
  methods: {
    // 仅保留 isHexColor 实现，内嵌
    isHexColor(color) {
      return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color);
    },
  },
};
</script>
