<template>
  <div class="m-price-con" :style="{ 'font-family': fontFamily }">
    <span class="rmb price-item" :style="rmbStyle">￥</span>
    <span class="integer price-item" :style="intStyle">{{ numInt }}</span>
    <span class="float price-item" :style="floatStyle">
      {{ numFloat }}&nbsp;{{ label }}
    </span>
  </div>
</template>

<script>
export default {
  props: {
    amt: {
      type: [Number, String],
      default: 0,
    },
    decimal: {
      type: Number,
      default: 2,
    },
    color: {
      type: String,
      default: "#F78706",
    },
    rmbSize: {
      type: Number,
      default: 12,
    },
    intSize: {
      type: Number,
      default: 24,
    },
    floatSize: {
      type: Number,
      default: 18,
    },
    label: {
      type: String,
      default: "",
    },
    bold: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    fontFamily() {
      return this.bold ? "DINAlternate-Bold" : "DINAlternate-Medium";
    },
    numInt() {
      let str = parseFloat(this.amt).toFixed(this.decimal);
      return str.split(".")[0];
    },
    numFloat() {
      let str = parseFloat(this.amt).toFixed(this.decimal);
      return "." + str.split(".")[1];
    },
    rmbStyle() {
      return {
        color: this.color,
        "font-size": this.rmbSize + "px",
        "line-height": 1.1,
      };
    },
    intStyle() {
      return {
        color: this.color,
        "font-size": this.intSize + "px",
        "line-height": 0.99,
      };
    },
    floatStyle() {
      return {
        color: this.color,
        "font-size": this.floatSize + "px",
        "line-height": 1,
      };
    },
  },
};
</script>

<style lang="less">
.m-price-con {
  display: flex;
  align-items: flex-end;
}
</style>