<template>
  <view class="ml-amount-text" :class="[className || '', status ? `ss-${status}` : '', {'is-underline': underline}]" @tap="tapEvent">
    <slot name="symbol">
      <view v-if="symbol" class="amount-flag">￥</view>
    </slot>
    <slot>
      <view class="amount-num">{{ amountLabel }}</view>
    </slot>
    <slot name="unit">
      <view v-if="unit" class="amount-unit">{{ amountUnit }}</view>
    </slot>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import MaliUtils from '../../../utils'

export default defineComponent({
  name: 'MlAmountText',
  options: {
    virtualHost: true
  },
  props: {
    modelValue: [String, Number],
    simplify: Boolean,
    status: String,
    symbol: {
      type: Boolean,
      default: false
    },
    unit: Boolean,
    digits: {
      type: [Number, String],
      default: 2
    },
    underline: Boolean,
    className: String
  },
  computed: {
    amountUnit () {
      if (this.simplify) {
        return '万元'
      }
      return '元'
    },
    amountLabel () {
      if (this.simplify) {
        return MaliUtils.toWanAmountString(this.modelValue || 0, this.digits as any)
      }
      return MaliUtils.toAmountString(this.modelValue || 0, this.digits as any)
    }
  },
  methods: {
    tapEvent () {
      this.$emit('tap', {})
      this.$emit('click', {})
    }
  }
})
</script>

<style lang="scss">
.ml-amount-text {
  display: inline;
  padding: 0 4rpx;
  &.is-underline {
    text-decoration: underline;
  }
  .amount-flag,
  .amount-num,
  .amount-unit {
    display: inline;
  }
  .amount-unit {
    padding-left: 5rpx;
  }
  &.ss-primary {
    color: $ml-theme-primary-color;
  }
  &.ss-success {
    color: $ml-theme-success-color;
  }
  &.ss-info {
    color: #909399;
  }
  &.ss-warning {
    color: $ml-theme-warning-color;
  }
  &.ss-danger {
    color: $ml-theme-error-color;
  }
  &.ss-gray {
    color: $ml-gray-color;
  }
  &.ss-blue {
    color: $ml-blue-color;
  }
  &.ss-green {
    color: $ml-green-color;
  }
  &.ss-pink {
    color: $ml-pink-color;
  }
  &.ss-red {
    color: $ml-red-color;
  }
  &.ss-orange {
    color: $ml-orange-color;
  }
  &.ss-purple {
    color: $ml-purple-color;
  }
}
</style>
