<template>
  <div class="bg-gradient-to-b to-80% from-[#28BEBB] to-[#fff] flex flex-col items-center">
    <img src="/images/checkout/payment-success.png" alt="payment-success" class="w-[258rpx] h-[140rpx] mt-[80rpx]" />
    <p class="text-[56rpx] font-700 text-white mt-[16rpx]">支付成功！</p>
    <div class="px-[16rpx] my-[24rpx] w-full flex flex-col items-center">
      <div class="bg-[#0b9996] w-full rounded-full p-[6rpx] h-[24rpx]">
        <div class="w-full h-full bg-[#004140] rounded-full"></div>
      </div>
      <div class="h-[468rpx] custom-bg relative flex flex-col items-center">
        <nut-price :price="money" size="large" class="font-700 price-text mt-[70rpx] flex!" />
        <ul class="w-full mt-[50rpx] px-[32rpx]">
            <li class="flex items-center mb-[30rpx] text-[32rpx]">
                <span class="text-[#666]">订单编号：</span>
                <span class="mr-[10rpx]">20220308170456105610</span>
                <div class="text-[#28BEBB] bg-[#e9f8f8] rounded-full px-[14rpx] py-[8rpx] text-[28rpx] font-400 border-[#28BEBB] border-solid border-[2rpx]">复制</div>
            </li>
            <li class="flex items-center mb-[30rpx] text-[32rpx]">
                <span class="text-[#666]">下单时间：</span>
                <span class="">2022-03-08 17:02</span>
            </li>
            <li class="flex items-center text-[32rpx]">
                <span class="text-[#666]">支付方式：</span>
                <img src="/images/checkout/wechat.png" alt="wechat" class="w-[32rpx] h-[32rpx] mr-[10rpx]">
                <span class="">微信支付</span>
            </li>
        </ul>
      </div>
    </div>

    <div class="px-[56rpx] w-full mt-[120rpx]">
        <div class="bg-[#28BEBB] rounded-[20rpx] py-[26rpx] text-[44rpx] font-600 text-white w-full text-center">订单详情</div>
        <div class="text-[#28BEBB] bg-white border-solid border-[#28BEBB] border-[4rpx] rounded-[20rpx] py-[26rpx] text-[44rpx] font-600 text-[#28BEBB] w-full text-center mt-[20rpx] mt-[40rpx]" @click="goHome">返回首页</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useShoppingCartStore } from '@/store/shoppingCart';
import { CartTypeEnum } from '@/types/cart';
import { useRouter,useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const type = route.query.type;

const shoppingCartStore = useShoppingCartStore();

let money = 0;
const useGetShoppingCartTotalPrice = () => {
  if(type === CartTypeEnum.Restaurant){
    money = shoppingCartStore.getShoppingCartByRestaurant.reduce((acc, item) => acc + Number(item.price) * Number(item.count), 0);
  }else if(type === CartTypeEnum.Mall){
    money = shoppingCartStore.getShoppingCartByMall.reduce((acc, item) => acc + Number(item.price) * Number(item.count), 0);
  }else if(type === CartTypeEnum.Course){
    money = shoppingCartStore.getShoppingCartByCourse.reduce((acc, item) => acc + Number(item.price) * Number(item.count), 0);
  }else if(type === CartTypeEnum.HealthCare){
    money = shoppingCartStore.getShoppingCartByHealthCare.reduce((acc, item) => acc + Number(item.price) * Number(item.count), 0);
  }else if(type === CartTypeEnum.Housekeeping){
    money = shoppingCartStore.getShoppingCartByHousekeeping.reduce((acc, item) => acc + Number(item.price) * Number(item.count), 0);
  }
}

useGetShoppingCartTotalPrice();

const goHome = () => {
    router.push('/home');
}
</script>

<style lang="scss" scoped>
  .custom-bg {
    margin-top: -5px;
    background: linear-gradient(to bottom,#9be1e0 0%,#fff 20%);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.03);
    
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;

      width: 10px; /* 设置宽度 */
      height: 10px; /* 设置高度 */
      background: #9be1e0; /* 设置背景色 */
    }

    &::before {
      left: -10px; /* 设置左边位置 */
      background: radial-gradient(circle at 0 10px, transparent 10px,#9be1e0 10px);
    }

    &::after {
      right: -10px; /* 设置右边位置 */
      background: radial-gradient(circle at 10px 10px, transparent 10px,#9be1e0 10px); 
    }
  }

  .price-text{
    --nut-price-symbol-big-size: 32px;
    --nut-price-big-size:56px;
    --nut-price-decimal-big-size:32px;

    :deep(.nut-price--symbol){
        align-self: center;
    }
    :deep(.nut-price--decimal-large){
        align-self: end;
        padding-bottom: 5px;
    }
  }
</style>
