<template>
    <view class="points-order">
        <view class="card">
            <view class="title">确认订单</view>
            <view class="product">
                <view>
                    <view class="name">{{ orderInfo.name }}</view>
                    <view class="desc">到账积分：{{ orderInfo.points }}</view>
                </view>
                <view class="amount">￥{{ orderInfo.amount }}</view>
            </view>
        </view>
        <view class="submit">
            <u-button :loading="loading" type="primary" shape="circle" @click="submitOrder">提交订单</u-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import { pointsPreOrder, pointsCreateOrder } from '@/api/points'

const productId = ref(0)
const loading = ref(false)
const orderInfo = reactive({
    product_id: 0,
    name: '',
    points: 0,
    amount: '0.00'
})

const getPreOrder = async () => {
    const data = await pointsPreOrder({ product_id: productId.value })
    Object.assign(orderInfo, data)
}

const submitOrder = async () => {
    loading.value = true
    try {
        const data = await pointsCreateOrder({ product_id: productId.value })
        uni.redirectTo({
            url: `/packages/pages/points_order_detail/points_order_detail?order_id=${data.order_id}`
        })
    } finally {
        loading.value = false
    }
}

onLoad((options: any) => {
    productId.value = Number(options.product_id || 0)
    getPreOrder()
})
</script>

<style lang="scss" scoped>
.points-order {
    min-height: 100vh;
    padding: 24rpx;
    background: #f5f5f5;
}
.card {
    padding: 32rpx;
    background: #fff;
    border-radius: 18rpx;
}
.title {
    font-size: 34rpx;
    font-weight: 700;
    color: #222;
}
.product {
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.name {
    font-size: 32rpx;
    color: #222;
    font-weight: 600;
}
.desc {
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #999;
}
.amount {
    font-size: 36rpx;
    color: #185dff;
    font-weight: 700;
}
.submit {
    margin-top: 40rpx;
}
</style>
