<template>
  <div class="xd-table-price" v-if="uiPrice !== null">
    <div v-if="unit === '¥'" class="xd-table-price__sp">¥</div>
    <div class="xd-table-price__text" :style="{color: uiColor}">{{uiPrice}}</div>
    <div class="xd-table-price__unit" v-if="unit !== '¥' && uiPrice && uiPrice !== '--'">{{unit}}</div>
  </div>
</template>

<script>
  export default {
    name: "XdTablePrice",
    props: {
      color: {
        type: String,
        default: 'red',
      },
      price:{
        type: Number|String,
        required: true
      },
      unit:{
        type: String,
        default: '元',
      },
      mode: {
        type: String,
        default: 'price', //price => 价格 income => 收益
      }
    },
    data(){
      return {
        uiPrice: null,
        uiColor: 'red',
      }
    },
    created() {
      let price = this.price;
      this.uiColor = this.color;
      if(this.$xdHelper.checkVarType(this.price) === 'string') {
        price = Number(this.price);
      }
      if(this.mode !== 'price') {
        this.handleMode(price);
      }
      else {
        if(price === -1) {
          this.uiPrice = '--';
          this.uiColor = '#999';
          return
        }
      }

      if(price !== null && price !== undefined ) {
        this.uiPrice = this.$xdHelper.divisionFloatNumber(price, 100).toFixed(2);
      }
    },
    methods:{
      handleMode(price){
        if(this.mode === 'income') this.handelIncome(price);
      },

      handelIncome(price){
        if(price >=0 ) {
          this.uiColor = 'red';
        }
        else  {
          this.uiColor = 'green';
        }
      }
    },
  }
</script>

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

    &__sp {
      margin-right: 4px;
    }
  }
</style>
