<script lang="ts" setup>
import {useConfigStore} from "@/store";
import {formatOrderAmount, getPlatformServiceFee} from "@/utils/merchantOrder";

const {t} = useI18n();

const configStore = useConfigStore();

const show = ref(false);
const priceData = ref<Record<string, any>>({})

function onOpen(data: Record<string, any>) {
  priceData.value = data
  show.value = true;
}

function handleClose() {
  show.value = false;
}

const platformFee = computed(() => getPlatformServiceFee(priceData.value))

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-user.order.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-user.order.checkout.priceDetail.taxation') }}</view>
          <view>${{ formatOrderAmount(priceData?.tax) }}</view>
        </view>
        <view v-if="priceData?.deliveryFeeCharged !== false && Number(priceData?.deliveryFee) > 0"
              class="flex-center-sb mb-20rpx">
          <view>{{ t('pages-user.order.checkout.priceDetail.deliveryFee') }}</view>
          <view>${{ formatOrderAmount(priceData?.deliveryFee) }}</view>
        </view>
        <view v-if="priceData?.tipCharged !== false && Number(priceData?.tip) > 0"
              class="flex-center-sb mb-20rpx">
          <view>{{ t('pages-user.order.checkout.priceDetail.tip') }}</view>
          <view>${{ formatOrderAmount(priceData?.tip) }}</view>
        </view>
        <view v-if="Number(platformFee) > 0" class="flex-center-sb mb-20rpx text-26rpx text-#999">
          <view>{{ t('pages-user.order.platformServiceFee') }}</view>
          <view>${{ platformFee }}</view>
        </view>
        <view class="text-24rpx lh-28rpx text-#9E9E9E">
          {{ t('pages-user.order.checkout.priceDetail.platformFeeNote') }}
        </view>
      </view>
      <view class="px-30rpx pt-40rpx">
        <wd-button
            block
            custom-class="!h-108rpx !text-36rpx !rounded-16rpx !bg-#14181B"
            @click="handleClose"
        >
          {{ t('common.gotIt') }}
        </wd-button>
      </view>
      <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
    </view>
  </wd-popup>
</template>

<style lang="scss" scoped>

</style>
