<template>
  <div class="textnum" :class="[
    textNumSize,
    icon ? 'icon' : '',
    sectext ? '' : 'only',
    icon && shape ? shape : 'round',
    direction ? direction : 'row',
    bg ? bg : '',
    hover ? 'hover' : '',
    type ? 'textnum-'+type : 'textnum-default',
    light ? 'light' : ''
  ]">
    <i v-if="icon" :class="[iconFont]" v-html="iconSource"></i>
    <div v-if="nameup && sectext" class="name" v-html="sectext"></div>
    <div v-if="maintext" class="num"><span class="text" v-html="maintext"></span><span v-if="unit" class="unit" v-html="unit"></span></div>
    <div v-if="!nameup && sectext" class="name" v-html="sectext"></div>
    
    <div v-if="$slots.default" class="detail"><slot></slot></div>
  </div>
  
</template>

<script>
  export default {
    name: 'CoTextNum',
    props: {
      icon: String,
      size: String,
      num: String,
      unit: String,
      maintext: String,
      sectext: String,
      shape: String,
      direction: String,
      badge: String,
      bg: String,
      hover: Boolean,
      nameup: Boolean,
      type: String,
      light: Boolean
    },
    computed: {
      textNumSize() {
        return this.forcesize || this.size || this.defaultsize || '';
      },
      iconSource() {
        var dom = '';
        if (this.badge) {
          dom += '<div class="badge">' + this.badge + '</div>';
        }
        if (this.icon.match(RegExp(/.svg/))) {
          // console.log("暂不支持svg");
          dom += '<img src="' + this.icon + '" />';
        } else if (this.icon.match(RegExp(/.png/))) {
          dom += '<img src="' + this.icon + '" />';
        } else if (this.icon.match(RegExp(/.jpg|.gif/))) {
          dom += '<img src="' + this.icon + '" style="padding:0; border-radius:100px" />';
        }
        return dom;
      },
      iconFont() {
        return this.icon ? (this.icon.match(RegExp(/.png|.svg|.jpg|.gif/)) ? '' : this.icon) : '';
      }
    }
  };
</script>
