<script setup lang="ts">
import dayjs from 'dayjs'
const { t } = useI18n();
import {useConfigStore, useUserStore} from "@/store";
const configStore = useConfigStore();
const userStore = useUserStore();

// 用户会员状态是否已开通
const isUserMember = computed(()=> {
  if(!userStore.userInfo.userMembershipVo) return false
  if(userStore.userInfo.userMembershipVo && userStore.userInfo.userMembershipVo.expireTime ){
    return dayjs().isBefore(dayjs(Number(userStore.userInfo.userMembershipVo.expireTime)))
  } else {
    return false
  }
})

const show = ref(false);
const priceData = ref({})
const savings = ref(0)
const serviceFees = ref(0)
function onOpen(data: any, num: number) {
  priceData.value = data;
  savings.value = num;
  // 计算服务费，使用分为单位避免浮点精度丢失
  const original = Number(priceData.value?.actualAmount) || 0;
  const ratio = Number(priceData.value?.merchantVo?.platformServiceFeeRatio) || 0;
  const tip = Number(priceData.value?.tip) || 0;
  const deliveryFee = Number(priceData.value?.deliveryFee) || 0;

  console.log('原价', original)
  console.log('服务费率', ratio)
  console.log('小费', tip)
  console.log('配送费', deliveryFee)

  const toCents = (n: number) => Math.round(n * 100);
  const serviceFeeCents = Math.round(toCents(original) * ratio);
  const totalCents = toCents(tip) + toCents(deliveryFee);

  serviceFees.value = totalCents / 100; // 保持为 number，模板显示时可格式化
  show.value = true;
}
function handleClose() {
  show.value = false;
}
defineExpose({
  onOpen,
});
</script>

<template>
  <wd-popup
      v-model="show"
      position="bottom"
      @close="handleClose"
  >
    <view>
      <view class="center h-102rpx bg-#F7F7F7 text-40rpx lh-40rpx font-bold text-#333">
        {{ t('pages-store.checkout.priceDetail.title') }}?
      </view>
      <view class="border-bottom text-32rpx lh-32rpx font-500 text-#333 py-36rpx px-30rpx">
        <view class="flex-center-sb mb-20rpx">
          <view>{{ t('pages-store.checkout.priceDetail.serviceFees') }}</view>
<!--          <view>${{ (Number(priceData?.tip) + Number(priceData?.deliveryFee)).toFixed(2) }}</view>-->
          <view>${{ serviceFees }}</view>
        </view>
        <view class="text-24rpx lh-28rpx text-#9E9E9E">
          {{ t('pages-store.checkout.priceDetail.desc') }}
        </view>
      </view>
      <view class="flex-center-sb border-bottom h-104rpx text-32rpx lh-32rpx font-500 text-#333 px-30rpx">
        <view>{{ t('pages-store.checkout.priceDetail.memberDiscount') }}</view>
        <view>-${{ isUserMember ? savings : 0 }}</view>
      </view>
      <view class="flex-center-sb border-bottom h-104rpx text-32rpx lh-32rpx font-500 text-#333 px-30rpx">
        <view>{{ t('pages-store.checkout.priceDetail.taxation') }}</view>
        <view>${{ Number(priceData?.tax) }}</view>
      </view>
      <view class="px-30rpx pt-40rpx">
        <wd-button
            @click="handleClose"
            custom-class="!h-108rpx !text-36rpx !rounded-16rpx !bg-#14181B"
            block
        >
          {{ t('common.gotIt') }}
        </wd-button>
      </view>
      <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
    </view>
  </wd-popup>
</template>

<style scoped lang="scss">

</style>