<template>
  <text>¥{{ earning }}</text>
  <image
    class="not-rot"
    v-if="earning >= 100 && isTip"
    src="https://image.jxc4.com/image/55bf8b7218f23db8cf3b39531dccf738.png"
    mode="scaleToFill"
  />
</template>
    
<script lang="ts" setup>
import { store } from '@/store'
import { computed } from 'vue'

interface PropsType {
  order: AnyObject
  color?: string
  isTip?: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
  color: '#000',
  isTip: true,
})

const isPointStore = computed(() => {
  return store.getters['storeInfo/isPointStore']
})

const earning = computed(() => {
  const order = props.order
  if (Object.keys(order).length) {
    if (isPointStore.value) {
      return order.newEarningPrice
        ? (order.newEarningPrice / 100).toFixed(2)
        : '0.00'
    } else {
      return order.earningPrice ? (order.earningPrice / 100).toFixed(2) : '0.00'
    }
  } else {
    return 0.0
  }
})
</script>
    
<style lang="scss" scoped>
text {
  color: v-bind(color);
}
// 商品数量
.order-totalCount {
  display: flex;
  align-items: center;
  padding: 15rpx;
  border-bottom: 2rpx dashed #e7e7e7;
  color: #585858;

  .play-money {
    margin-left: 30rpx;
  }

  .totalCount {
    margin-right: 25rpx;
  }
}

.not-rot {
  position: absolute;
  bottom: 125rpx;
  right: 20rpx;
  width: 150rpx;
  height: 150rpx;
  text-align: center;
  animation: enlarge 1s linear infinite;
}

@keyframes enlarge {
  0% {
    transform: scale(0.95);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(0.95);
  }
}
</style>