<route lang="json5" type="page">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '%checkout.title%',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script lang="ts" setup>
import { computedPrice, createOrder, loadPre } from '@/api/order'
import { getWalletAccountInfo } from '@/api/wallet'
import { formatNumber } from '@/utils'
import { toPage } from '@/utils/page'

defineOptions({
  name: 'CheckOut', // 结账页面
})

const queryParams = ref<any>({})
onLoad((options) => {
  queryParams.value = options
  getPrice()
})

const trustBanners = ref([
  {
    key: 'rewards',
    icon: '/static/icons/rewards.png',
    textKey: 'checkout.trust.rewards',
    variant: 'red',
  },
  {
    key: 'refund',
    icon: '/static/icons/refund.png',
    textKey: 'checkout.trust.refund',
    variant: 'green',
  },
])

// 商品详情
const orderDetail = ref<any>({})

// 订单摘要
const orderSummary = ref({
  SubTotal: 0,
  // Voucher: 0,
  Total: 0,
})
// 钱包余额
const walletBalance = ref(0)
async function getPrice() {
  // 预下单详情
  const preOrderRes = await loadPre({ preOrderNo: queryParams.value.preOrderId })
  console.log(preOrderRes)
  orderDetail.value = preOrderRes?.data?.orderInfoVo?.orderDetailList?.[0]
  // 计算价格
  const computedPriceRes = await computedPrice({ preOrderNo: queryParams.value.preOrderId, shippingType: 1 })
  console.log(computedPriceRes)
  orderSummary.value.SubTotal = computedPriceRes?.data?.proTotalFee
  orderSummary.value.Total = computedPriceRes?.data?.payFee
  // 获取钱包信息-查询余额
  const walletInfoRes = await getWalletAccountInfo()
  console.log(walletInfoRes)
  walletBalance.value = walletInfoRes?.data?.balance
}

const loading = ref<boolean>(false)
// 下单处理
async function handlePlaceOrder() {
  loading.value = true
  try {
    const params = {
      preOrderNo: queryParams.value.preOrderId,
      type: queryParams.value.groupType,
      pinkId: queryParams.value.pinkId,
      cid: queryParams.value.cid,
      groupType: queryParams.value.groupType,
    }
    const orderRes = await createOrder(params)
    console.log(orderRes)
    if (orderRes.code === '200') {
      toPage({ url: '/pages/myOrders/orderDetail', params: { orderNo: orderRes?.data?.columns?.orderNo, isPayOrder: true }, isRedirect: true })
    }
  }
  finally {
    loading.value = false
  }
}
</script>

<template>
  <z-paging>
    <view class="pt-20rpx">
      <view class="trust-banner">
        <swiper
          class="trust-banner__swiper"
          :vertical="true"
          :autoplay="true"
          :interval="2500"
          :duration="350"
          :circular="true"
          :disable-touch="true"
        >
          <swiper-item v-for="item in trustBanners" :key="item.key">
            <view class="trust-banner__item" :class="`trust-banner__item--${item.variant}`">
              <image :src="item.icon" class="trust-banner__icon" mode="heightFix" />
              <text class="trust-banner__text">
                {{ $t(item.textKey) }}
              </text>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="mb-20rpx flex items-center gap-24rpx bg-white p-24rpx">
        <image
          :src="orderDetail.image"
          class="h-160rpx w-160rpx shrink-0"
          mode="aspectFit"
        />
        <view class="flex-1">
          <view class="line-clamp-2 h-80rpx break-all text-28rpx">
            {{ orderDetail.productName }}
          </view>
          <view class="py-4rpx text-24rpx text-#3A444C">
            {{ $t('checkout.selected') }}: {{ orderDetail.sku }}
          </view>
          <view class="flex items-center justify-between text-24rpx">
            <view class="text-#FF0010">
              ৳ {{ formatNumber(orderDetail.price) }}
            </view>
            <view class="text-#3A444C">
              {{ $t('checkout.quantity') }}：{{ orderDetail.payNum }}
            </view>
          </view>
        </view>
      </view>
      <view class="mb-20rpx bg-white p-24rpx">
        <view class="mb-12rpx text-28rpx">
          {{ $t('checkout.orderSummary') }}
        </view>
        <view class="flex flex-col gap-16rpx text-#3A444C">
          <template v-for="(item, key) in orderSummary" :key="key">
            <view class="flex items-center justify-between text-24rpx">
              <text>{{ key }}</text>
              <text>৳ {{ formatNumber(item) }}</text>
            </view>
          </template>
        </view>
      </view>
      <view class="bg-white p-24rpx">
        <view class="mb-12rpx text-28rpx">
          {{ $t('checkout.selectPaymentMethod') }}
        </view>
        <view class="flex flex-col gap-16rpx text-#3A444C">
          <view class="flex items-center justify-between text-24rpx">
            <view class="flex items-center">
              <image
                src="/static/icons/logo.png"
                class="mr-12rpx h-48rpx w-48rpx rounded-full"
              />
              <view class="text-24rpx">
                <text>{{ $t('orderDetail.bandhuBuyWallet') }} (</text>
                <text class="text-[var(--wot-color-theme)]">
                  {{ $t('orderDetail.walletBalanceText') }}: ৳ {{ formatNumber(walletBalance) }}
                </text>
                <text>)</text>
              </view>
            </view>
            <view>
              <image
                src="/static/icons/circle-check.png"
                class="h-36rpx w-36rpx"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
    <template #bottom>
      <view class="flex items-center justify-end bg-white/60 px-28rpx py-30rpx backdrop-blur-20">
        <view class="mr-16rpx text-24rpx">
          <text>{{ $t('checkout.total') }}:</text>
          <text class="text-[var(--wot-color-theme)]">
            ৳ {{ formatNumber(orderSummary.Total) }}
          </text>
        </view>
        <wd-button :loading="loading" @click="handlePlaceOrder">
          {{ $t('checkout.placeOrder') }}
        </wd-button>
      </view>
    </template>
  </z-paging>
</template>

<style lang="scss" scoped>
.space-y-24rpx > * + * {
  margin-top: 24rpx;
}

.trust-banner {
  margin: 0 0 20rpx;
}

.trust-banner__swiper {
  height: 72rpx;
}

.trust-banner__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  font-weight: 600;
  overflow: hidden;
}

.trust-banner__item--red {
  background: #ffeae8;
  color: var(--wot-color-theme);
}

.trust-banner__item--green {
  background: #ebfbee;
  color: #25a755;
}

.trust-banner__icon {
  height: 32rpx;
  margin-right: 8rpx;
}

.trust-banner__text {
  line-height: 1;
}
</style>
