<template>
    <ion-page class="product">
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
                </ion-buttons>
                <ion-title>{{ $t('product.detail') }}</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <swiper class="bannerSwiper">
                <swiper-slide v-for="(item, index) in info.pic" :key="index">
                    <van-image :src="item" fit="cover" height="100vw" width="100vw" />
                </swiper-slide>
            </swiper>
            <div class="info">
                <div class="card">
                    <div class="title">
                        {{ info.name }}
                    </div>
                    <div class="badges">
                        <div class="badge">{{ category.name }}</div>
                    </div>
                    <div class="datas">
                        <div class="data">
                            <div class="val">{{ info.currentPrice }}</div>
                            <div class="name">当前价(元)</div>
                        </div>
                        <div class="data">
                            <div class="val">3%</div>
                            <div class="name">日化收益</div>
                        </div>
                        <div class="data">
                            <div class="val">{{ info.premium || 0 }}</div>
                            <div class="name">明日可得(元)</div>
                        </div>
                    </div>

                    <div class="creator" v-if="info.user && info.user.id">
                        <div class="text1">产品持有人：</div>
                        <van-image width="20" height="20" radius="4" :src="info.user.avatar"></van-image>
                        <div class="text2">{{ info.user.nickname }}</div>
                    </div>
                </div>
            </div>

            <div class="detail">
                <div class="card">
                    <div class="detail-title">商品详情</div>
                    <div class="detail-content">
                        <van-image
                            v-for="(item, index) in info.pic"
                            :key="index"
                            :src="item"
                            radius="4"
                            fit="scale-down"
                            width="100%"
                        />
                    </div>
                </div>
            </div>
        </ion-content>
        <ion-footer v-if="info.status === 'IN_STOCK'">
            <ion-toolbar>
                <div class="footer">
                    <van-button type="primary" block @click="onPay">立即购买</van-button>
                </div>
            </ion-toolbar>
        </ion-footer>
        <ion-modal
            :is-open="showPayModal"
            class="pay-modal"
            :initial-breakpoint="breakpoint"
            :breakpoints="[0, breakpoint]"
            @didDismiss="showPayModal = false"
        >
            <ion-content :style="{ height: `${breakpoint * 100}%` }">
                <div class="head">
                    <div class="title">{{ $t('order.payInfo') }}</div>
                    <div class="close" @click="showWithdrawModal = false">
                        <img src="@/assets/icon_close.svg" />
                    </div>
                </div>
                <div class="price-box">
                    <div class="label">{{ $t('order.total') }}({{ $t('balance.unit') }})</div>
                    <div class="value">{{ info.currentPrice }}</div>
                </div>
                <div class="divider"></div>
                <div class="pay-item">
                    <img src="@/assets/icon_pay_wallet.png" class="icon" />
                    <div class="label">{{ $t('order.walletPay') }}</div>
                    <van-checkbox name="wallet" v-model="payMethod" @click.stop />
                </div>
                <div class="footer">
                    <van-button type="primary" block @click="pay">{{ $t('order.buyNow') }}</van-button>
                </div>
            </ion-content>
        </ion-modal>
    </ion-page>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper.min.css'
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useWindowSize } from '@vueuse/core'
import toast from '@/utils/toast'
import { http } from '@/plugins/http'
import { useI18n } from 'vue-i18n'
import { IonButton, alertController } from '@ionic/vue'
import { useUserStore } from '@/stores/user'
import { mapState } from 'pinia'

const route = useRoute()
const router = useRouter()
const userState = useUserStore()
const { t } = useI18n()
const info = ref({
    pic: []
})

const category = computed(() => {
    return info.value.category || {}
})

function getDetail() {
    http.get('/product/get/' + route.query.id).then(res => {
        info.value = res
    })
}

onMounted(() => {
    getDetail()
})

const showPayModal = ref(false)
const { height: windowHeight } = useWindowSize()
const breakpoint = computed(() => {
    return 450 / windowHeight.value
})
const payMethod = ref('wallet')
const onPay = () => {
    console.log(userState.user)
    if (!userState.user) {
        router.push({ name: 'login' })
    } else {
        showPayModal.value = true
    }
}
const pay = () => {
    showPayModal.value = false
    toast.loading(t('order.processing'))
    http.post('/order/createOrder', {
        productId: info.value.id
    })
        .then(res => {
            toast.clear()
            router.push({
                name: 'orderDetail',
                query: {
                    id: res.id
                }
            })
        })
        .catch(e => {
            console.log(e)
            toast.error(e.error)
        })
}
</script>

<style lang="less" scoped>
.info {
    transform: translateY(-20px);
    position: relative;
    z-index: 2;

    .title {
        font-size: 20px;
        font-weight: bold;
        color: var(--ion-text-color);
        line-height: 28px;
        margin-bottom: 6px;
    }

    .badges {
        .f();
        .badge {
            font-size: 10px;
            background: #e9effb;
            color: #4078de;
            line-height: 16px;
            padding: 0 2px;
        }
    }

    .datas {
        .f();
        .data {
            width: 33%;
            .f-col();
            align-items: center;
            margin-top: 16px;
            .val {
                font-size: 20px;
                font-weight: bold;
                color: var(--ion-text-color);
                line-height: 24px;
            }
            .name {
                font-size: 12px;
                color: var(--ion-color-step-400);
                line-height: 17px;
            }

            &:nth-child(1) {
                align-items: flex-start;
                .val {
                    color: var(--red);
                }
            }

            &:nth-child(2) {
                .val {
                    color: var(--green);
                }
            }
        }
    }

    .creator {
        .f();
        background: var(--ion-color-step-50);
        border-radius: 4px;
        padding: 7px 12px;
        margin-top: 16px;

        .text1 {
            font-size: 12px;
            color: var(--ion-color-light-contrast);
            line-height: 17px;
        }

        .text2 {
            font-size: 12px;
            font-weight: bold;
            color: var(--ion-color-light-contrast);
            line-height: 17px;
        }

        .van-image {
            margin: 0 6px;
        }
    }
}
.detail {
    transform: translateY(-10px);
}
.bannerSwiper {
    position: relative;
    z-index: 1;
}
.card {
    background: var(--ion-color-dark-contrast);
    border-radius: 16px;
    padding: 16px 16px 20px;
}

.detail {
    .detail-title {
        font-size: 16px;
        font-weight: bold;
        color: var(--ion-color-light-contrast);
        line-height: 24px;
        padding-bottom: 16px;
    }
}
ion-footer {
    ion-toolbar {
        --background: var(--ion-color-step-0);
    }
}

.footer {
    padding: 6px 24px;
    --van-button-border-width: 0;
    --van-button-primary-background: linear-gradient(135deg, #d700ff 0%, #3e22ff 100%);
}
.pay-modal {
    ion-content {
        --background: var(--ion-color-step-0);
    }
    .head {
        .f();
        padding-left: 16px;
        border-bottom: 1px solid var(--ion-color-step-50);
        font-size: 14px;
        .title {
            flex-grow: 1;
            color: var(--ion-color-text);
            padding: 16px 0 10px 0;
        }
        .close {
            padding: 16px 16px 10px 0;
            img {
                width: 24px;
                height: 24px;
            }
        }
    }
    .price-box {
        background: #f5f7fa;
        text-align: center;
        margin: 16px;
        padding: 20px 0;
        border-radius: 4px;
        .label {
            color: var(--ion-color-step-400);
            font-size: 14px;
            line-height: 24px;
        }
        .value {
            line-height: 30px;
            font-size: 30px;
            margin-top: 6px;
            font-weight: bold;
        }
    }
    .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 9px 27px;
    }
    .divider {
        margin: 0 16px;
        height: 1px;
        background: var(--ion-color-step-50);
    }
    .pay-item {
        .f();
        height: 48px;
        margin-top: 12px;
        padding: 0 16px;
        .icon {
            width: 24px;
            height: 24px;
        }
        .label {
            margin-left: 10px;
            font-size: 14px;
            font-weight: bold;
            flex: 1;
        }
    }
    :deep(.van-checkbox__icon--checked .van-icon) {
        background: linear-gradient(135deg, #a108ff 0%, #5c7cff 100%);
        border-color: var(--ion-color-step-0);
    }
}
</style>
