<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 {
  orderData: AnyObject
  color?: string
  isTip?: boolean
  size?: string
}
const props = withDefaults(defineProps<propsType>(), {
  color: '#000',
  isTip: true,
  size: '32rpx',
})

const isPointStore = computed(() => {
  return store.getters['storeInfo/isPointStore']
})
const earning: any = computed(() => {
  const order = props.orderData
  if (Object.keys(order).length) {
    if (new Date(order.orderCreatedAt) < new Date('2020-06-07 18:00:00')) {
      if (!(order.oldPayPercentage >= 50 && order.oldPayPercentage <= 100)) {
        // 小于50
        return (
          ((order.totalShopMoney - order.desiredFee) *
            (100 - order.oldPayPercentage / 2)) /
          100 /
          100
        ).toFixed(2)
      } else {
        // 大于等于50
        return (order.earningPrice / 100).toFixed(2)
      }
    } else {
      let calcData = {
        vendorPayPercentage: order.vendorPayPercentage,
        actualPayPrice: order.actualPayPrice,
        shopPrice: order.shopPrice,
        isPointStore: isPointStore.value,
        payPercentage: order.payPercentage,
        earningPrice: order.earningPrice,
      }
      return singleCalcPrice(calcData)
    }
  } else {
    return 0.0
  }
})
function singleCalcPrice(calcData: any) {
  if (calcData.vendorPayPercentage != 0) {
    if (calcData.vendorPayPercentage < 50) {
      return (calcData.actualPayPrice / 100).toFixed(2)
    } else {
      return (calcData.earningPrice / 100).toFixed(2)
    }
  } else {
    if (calcData.isPointStore) {
      return (calcData.actualPayPrice / 100).toFixed(2)
    } else {
      return (calcData.earningPrice / 100).toFixed(2)
    }
  }
}
</script>

<style lang="scss" scoped>
text {
  color: v-bind(color);
  font-size: v-bind(size);
  font-weight: bold;
}
.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>