<template>
    <van-popup v-model:show="show" position="bottom" class="flex flex-col justify-between p-6"
        :style="{ height: '50%' }">
        <div class=" text-center">
            <h3 class="text-lg font-bold">支付</h3>
        </div>
        <div class="text-center">
            <div class="font-bold text-xl">{{ data.product_name }}</div>
            <div class="text-3xl text-red-500 font-bold">
                <!-- 显示原价和折扣价格 -->
                <div v-if="discountPrice" class="line-through text-gray-500 mt-4"
                    :class="{ 'text-2xl': discountPrice }">
                    ¥ {{ data.sell_price }}
                </div>
                <div>
                    ¥ {{ discountPrice ? (data.sell_price * 0.2).toFixed(2) : data.sell_price }}
                </div>
            </div>
            <!-- 仅在折扣时显示活动说明 -->
            <div v-if="discountPrice" class="text-sm text-red-500 mt-1">
                活动价：2折优惠
            </div>
        </div>
        <!-- 支付方式选择 -->
        <div class="">
            <van-cell-group inset>
                <!-- 支付宝支付 -->
                <van-cell title="支付宝支付" clickable @click="selectedPaymentMethod = 'alipay'">
                    <template #icon>
                        <van-icon size="24" name="alipay" color="#00A1E9" class="mr-2" />
                    </template>
                    <template #right-icon>
                        <van-radio v-model="selectedPaymentMethod" name="alipay" />
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <!-- 确认按钮 -->
        <div class="">
            <van-button class="w-full" round type="primary" @click="getPayment">确认支付</van-button>
        </div>
    </van-popup>
</template>

<script setup>
import { ref, defineProps } from 'vue'
const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
    id: {
        type: String,
        required: true,
    }
})
const show = defineModel()
const orderId = ref("")
const selectedPaymentMethod = ref('alipay')
const discountPrice = ref(false)  // 是否应用折扣
onMounted(() => {
    // let m = localStorage.getItem("m")
    // let hour = "12"
    // if (m === "shifenliangzai") {
    //     hour = "00"
    // }
    // const currentDate = new Date()
    // const startDate = new Date(`2025-01-01T${hour}:00:00+08:00`)  // 2025年1月1日中午12点
    // const endDate = new Date('2025-01-02T12:00:00+08:00')    // 2025年1月2日中午12点
    // console.log(startDate, endDate)
    // if (currentDate >= startDate && currentDate <= endDate) {
    //     discountPrice.value = true  // 在折扣时间范围内，启用折扣
    // } else {
    //     discountPrice.value = false  // 否则不启用折扣
    // }
})

async function getPayment() {
    const { data, error } = await useApiFetch('/pay/payment')
        .post({
            id: props.id,
            pay_method: selectedPaymentMethod.value
        })
        .json()

    if (data.value && !error.value) {
        orderId.value = data.value.data.order_id
        const prepayUrl = data.value.data.prepay_id;
        const paymentForm = document.createElement('form');
        paymentForm.method = 'POST';
        paymentForm.action = prepayUrl;
        paymentForm.style.display = 'none';
        document.body.appendChild(paymentForm);
        paymentForm.submit();
    }
    show.value = false
}
</script>

<style scoped></style>
