<template>
  <el-badge :value="badgeValue" :hidden="!valid" :type="badgeType">
    <el-tag v-if="valid" effect="light">{{ Math.abs(value * 1) }}</el-tag>
    <span v-else>{{ value }}</span>
  </el-badge>
</template>

<script>
export default {
  name: 'over-under-badge',
  props: {
    value: {
      type: Number | String,
      default: 0
    },
    overType: {
      type: String,
      default: 'success'
    },
    underType: {
      type: String,
      default: 'danger'
    },
    overText: {
      type: String,
      default: '超'
    },
    underText: {
      type: String,
      default: '缺'
    },
    exchange: {
      // 超缺正负判定交换
      type: Boolean,
      default: false
    }
  },
  computed: {
    valid() {
      return this.value && !isNaN(this.value)
    },
    badgeValue() {
      if (!this.valid) return ''
      if (this.value * 1 > 0) return this.exchange ? this.underText : this.overText
      return this.exchange ? this.overText : this.underText
    },
    badgeType() {
      if (!this.valid) return this.exchange ? this.overType : this.underType
      if (this.value * 1 > 0) return this.exchange ? this.underType : this.overType
      return this.exchange ? this.overType : this.underType
    }
  },
  methods: {}
}
</script>

<style scoped>
/deep/ .el-badge__content.is-fixed {
  top: 8px;
}
</style>
