<template>
  <div
    class="xd-table-price-number"
    v-if="uiPrice"
    :class="{
      center: align === 'center',
      left: align === 'left',
      right: align === 'right',
    }"
  >
    <div>
      <div class="xd-table-price-number__text" :style="{color: uiColor}">{{uiPrice}}</div>
      <div class="xd-table-price-number__unit">{{unit}}</div>
    </div>
    <div>
      <div class="xd-table-price-number__text">{{uiNumber}}</div>
      <div class="xd-table-price-number__unit">{{ numUnit || '件'}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "XdTablePriceNumber",
    props: {
      color: {
        type: String,
        default: 'red',
      },
      price:{
        type: Object,
        required: true
      },
      message: {
        type: Array,
        default(){
          return ['price', 'number']
        }
      },
      unit:{
        type: String,
        default: '元',
      },
      numUnit: {
        type: String,
        default: '件',
      },
      align: {
        type: String,
        default: 'center',
      }
    },
    data(){
      return {
        uiPrice: 0,
        uiNumber : 1,
        uiColor: 'red'
      }
    },
    created() {
      let price = this.price[this.message[0] || 'price'];
      this.uiNumber= this.price[this.message[1] || 'number'];
      if(this.$xdHelper.checkVarType(this.price) === 'string') {
        price = Number(this.price);
      }
  
      if (price === -1) {
        this.uiPrice = '--';
        this.uiColor = '#999';
        return
      }
      
      if(price) this.uiPrice = this.$xdHelper.divisionFloatNumber(price,100).toFixed(2);
    }
  }
</script>

<style scoped lang="scss">
  .xd-table-price-number {
    
    & > div {
      display: flex;
      align-items: flex-end;
    }
  
    &.center > div {
      justify-content: center;
    }
  
    &.left > div {
      justify-content: flex-start;
    }
  
    &.right > div {
      justify-content: flex-end;
    }
    &__text {
      font-size: 14px;
    }
    &__unit{
      font-size: 12px;
      margin-left: 3px;
    }
  }
</style>
