<template>
  <div v-if="dictionary && dictionary.status !== 'none'">
    <!-- 徽标存在时 -->
    <a-badge
      v-if="dictionary.status !== 'gary'"
      :color="dictionary.status"
      :text="!isExternalText ? dictionary.text: null"/>
    <a-badge v-else color="#D9D9D9" :text="!isExternalText ? dictionary.text: null"/>
    <span v-if="isExternalText">{{ dictionary.text }}</span>
  </div>
  <span v-else-if="dictionary" :class="{data_card: dataCard}">
    <!-- 徽标为none时 -->
    {{ dictionary.text }}
  </span>
  <span v-else>
    <!-- 其他情况直接显示替代文本或者原值 -->
    {{ replaceText ? replaceText : value }}
  </span>
</template>

<script>

export default {
  name: 'XBadge',
  props: {
    badgeKey: {
      type: String,
      required: true,
    },
    value: {
      type: [Number, String],
      required: true,
    },
    replaceText: {
      type: String,
      default: ''
    },
    serviceName: {
      type: String,
      default: process.env.VUE_APP_SYSTEM_NAME
    },
    env: {
      type: String,
      default: 'prod'
    },
    isExternalText: {
      type: Boolean,
      required: false
    },
    // 是否在看板模式下显示
    dataCard: {
      type: Boolean,
      default: false
    }
  },
  computed: {},
  watch: {
    badgeKey (newVal, oldVal) {
      this.updateDictionary()
    },
    value (newVal, oldVal) {
      this.updateDictionary()
    }
  },
  data () {
    return {
      dictionary: undefined
    }
  },
  created () {
    this.updateDictionary()
  },
  methods: {
    // todo 修改方式  想办法不使用回调方式
    async updateDictionary () {
      this.dictionary = await this.$appdata.getDictValue(this.badgeKey, this.value, undefined, this.env === 'dev', this.serviceName)
    }
  }
}
</script>

<style lang="less" scoped>
.data_card {
  display: inline;
}
</style>
