<template>
  <div class="aos-widget-card" :style="{'min-width':realWidth,'height':realHeight,'background-color':cardBackgroundColor}" @click="handleCardClick">
    <div class="aos-widget-card-container">
      <div class="aos-widget-card-left" :style="{'background-color':backgroundColor}">
        <i :class="'el-icon-'+icon" :style="{'color': innerCardBackgroundColor}"></i>
      </div>
      <div class="aos-widget-card-right">
        <div v-for="(item,index) in realItemList" :key="index" class="item">
          <div :style="{'color': innerCardBackgroundColor}">
            {{item.name}}
          </div>
          <div class="aos-widget-right-number" :style="{'color': innerCardBackgroundColor}">
            {{item.realNumber}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'AosWidgetCard',
  data(){
    return {
      innerCardBackgroundColor: ''
    }
  },
  props: {
    width: {
      type: Number,
      default: 200
    },
    height: {
      type: Number,
      default: 100
    },
    icon: {
      type: String,
      default: 'setting'
    },
    type: {
      type: String,
      default: 'info'
    },
    // number: {
    //   type: Number,
    //   required: true,
    //   default: 0
    // },
    // decimal: {
    //   type: Number,
    //   default: 2
    // },
    showBackgroundColor: {
      type: Boolean,
      default: false
    },
    itemList: {
      type: Array,
      default: function(){
        return []
      }
    }
  },
  methods: {
    formatData(value,decimal){
      if(!value){
        return '0.00'
      }
      if(value.indexOf(',') > -1) return value;
      let formatData;
      // 判断初始值是否有小数点位，以及小数点位数量
      if(value.indexOf('.') > -1){
        let intPart = value.split('.')[0];
        let decPart = value.split('.')[1];
        formatData = this.formatIntPart(intPart) + '.' + this.formatDecPart(decPart,decimal);
      } else {
        if(decimal > 0){
          if(!!value){
            formatData = this.formatIntPart(value) + '.';
            for (let i = 0; i < decimal;i++) {
              formatData = formatData + '0';
            }
          } else {
            formatData = '0.';
            for (let i = 0; i < decimal;i++) {
              formatData = formatData + '0';
            }
          }
        } else if(decimal === 0){
          formatData = this.formatIntPart(value)
        }
      }
      return formatData;
    },
    formatIntPart(intPart){
      let newIntPart = ''; 
      if(intPart.length > 3){
        let reverseIntStr = intPart.split('').reverse().join('');
        let partArr = reverseIntStr.match(/\d{3}/ig);
        let lastStr = reverseIntStr.split(partArr.join(''))[1];
        if(lastStr !== '' && lastStr !== undefined && lastStr !== null){
          newIntPart = (partArr.join(',') + ',' + lastStr).split('').reverse().join('');
        } else {
          newIntPart = partArr.join(',').split('').reverse().join('');
        }
        if(newIntPart.substring(0,1) === ','){
          newIntPart = newIntPart.substring(1);
        }
      } else {
        newIntPart = intPart;
      }
      return newIntPart;
    },
    formatDecPart(decPart,decimal){
      if(decPart.length){
        let length = decPart.length;
        let addLength;
        if(decimal > length){
          addLength = decimal - length;
          for(let i = 0;i<addLength;i++){
            decPart += '0'
          }
        } else if(decimal < length) {
          decPart = this.$math.round('0.'+decPart,decimal).toString().split('.')[1];
        }
      } else {
        for(let i = 0; i< decimal;i++){
          decPart += '0';
        }
      }
      return decPart;
    },
    handleCardClick(){
      this.$emit('click');
    }
  },
  computed: {
    realWidth(){
      return this.width + 'px';
    },
    realHeight(){
      return this.height + 'px';
    },
    realItemList(){
      let value = JSON.parse(JSON.stringify(this.itemList));
      if(value.length > 0){
        value.forEach((item) => {
          item.realNumber = this.formatData(item.number + '',item.decimal);
        });
        return value;
      }else {
        return []
      }
    },
    // realNumber(){
    //   return this.formatData(this.number + '',this.decimal);
    // },
    backgroundColor(){
      let color;
      switch (this.type){
        case 'error': 
          color = '#F25A61';
          break;
        case 'warning':
          color = '#FFAD46';
          break;
        case 'success':
          color = '#30CE36';
          break;
        default:
          color = '#48ABF7';
      }
      return color;
    },
    cardBackgroundColor(){
      if(this.showBackgroundColor){
        let color;
        this.innerCardBackgroundColor = '#ffffff';
        switch (this.type){
          case 'error': 
            color = '#F25A61';
            break;
          case 'warning':
            color = '#FFAD46';
            break;
          case 'success':
            color = '#30CE36';
            break;
          default:
            color = '#48ABF7';
        }
        return color;
      } else {
        return '#ffffff';
      }
    }
  }
}
</script>
