<template>
  <div ref="dofBadge" :class="[activeBoxPosClass, activeBoxClass]" :style="badgeStyle">
    <text v-if="!dot" :class="['text-desc', activeTextClass]">{{ contentValue }}</text>
  </div>
</template>
<style>
.dof-badge {
  position: absolute;
  right: 0;
  top: 0;
  /* transform: translate(50%, -50%); */
}

.dof-badge-text-small {
  height: 30px;
  padding: 0 8px;
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.dof-badge-text-default {
  height: 36px;
  padding: 0 10px;
  border-radius: 18px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.text-desc {
  text-align: center;
  color: #ffffff;
}

.text-desc-default {
  font-size: 24px;
  min-width: 16px;
  text-align: center;
}

.text-desc-small {
  font-size: 20px;
  min-width: 14px;
  text-align: center;
}

.dof-badge-dot-default {
  width: 16px;
  height: 16px;
  border-radius: 16px;
}

.dof-badge-dot-small {
  width: 12px;
  height: 12px;
  border-radius: 12px;
}
</style>
<style src="./colmo.css"></style>

<script>
const dom = weex.requireModule('dom')
const modal = weex.requireModule('modal')
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'
export default {
  components: {},
  mixins: [ColmoMixin, DiabloMixin],
  props: {
    small: {
      type: Boolean,
      default: false
    },
    dot: {
      type: Boolean,
      default: false
    },
    content: {
      type: [Number, String],
      default: ''
    },
    max: {
      type: Number,
      default: 0
    },
    theme: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
    inline: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      eleWidth: 0,
      eleHeight: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      let ele = this.$refs.dofBadge
      !this.inline && this.getEleSize(ele)
    })
  },
  computed: {
    themeList() {
      return {
        brand: this._isDiablo ? '#0490d3' : '#00A4F2',
        red: this._isDiablo ? '#DB5C44' : '#F56428',
        purple: this._isDiablo ? '#805ed1' : '#946CF2',
        'blue-purple': this._isDiablo ? '#5865DC' : '#6575ff',
        blue: this._isDiablo ? '#25A8DC' : '#29c3ff',
        cyan: '#00cbb8',
        yellow: this._isDiablo ? '#BE8214' : '#FFAA10',
        orange: this._isDiablo ? '#db7122' : '#ff8225',
        'orange-red': '#ff6a4c',
        'gray-offline': this._isDiablo ? '#6B7587' : '#7c879b',
        colmo: '#B35336',
        'colmo-gray': '#737374'
      }
    },
    theme_() {
      if (this.theme) return this.theme
      return this._isColmo ? 'colmo' : 'red'
    },
    contentValue() {
      let { max, content } = this
      let value = ''
      let curContent = Number(content)
      if (max && curContent >= max) {
        value = `${max}+`
      } else {
        value = content
      }
      return value
    },
    //是否行内展示，改变定位
    activeBoxPosClass() {
      let { inline } = this
      return inline ? '' : 'dof-badge'
    },
    activeBoxClass() {
      let { dot, small } = this
      let b_class = ''
      if (dot) {
        b_class = small ? 'dof-badge-dot-small' : 'dof-badge-dot-default'
      } else {
        b_class = small ? 'dof-badge-text-small' : 'dof-badge-text-default'
      }
      return b_class
    },
    activeTextClass() {
      let { small } = this
      let t_class = ''
      t_class = small ? 'text-desc-small' : 'text-desc-default'
      return t_class
    },
    badgeStyle() {
      let { theme_, themeList, color } = this
      return {
        backgroundColor: color ? color : themeList[theme_]
      }
    }
  },
  methods: {
    getEleSize(ele) {
      let self = this
      dom.getComponentRect(ele, result => {
        let size = result.size || {}
        let width = parseInt(size.width)
        let height = parseInt(size.height)
        if (!width || !height) {
          self.getEleSize(ele)
        } else {
          self.eleWidth = width
          self.eleHeight = height
          self.$emit('dofStyleHandle', { width, height })
        }
      })
    }
  }
}
</script>
