<template>
    <ion-modal :is-open="show" ref="modalRef" class="open-modal" @didDismiss="dismiss">
        <div class="relative">
            <img src="@/assets/png-duihuan-bg.png" class="model-bg" alt="" />
            <div class="model-box">
                <div class="title">
                    <span class="text-[56px]">{{ buyEpInfo.price }}</span>
                    <span class="mt-[5px]"> 个金豆兑换 </span>
                </div>

                <div class="info">
                    <van-image :src="file" width="90" height="58" fit="cover" radius="8" />
                    <div class="info-text">
                        <div class="text1 van-ellipsis">{{ seriesInfo.title }}</div>
                        <div class="text2">
                            <span>兑换第{{ buyEpInfo.episodeNum }}集</span>
                            <span>{{ category ? category + '·' : '' }}{{ seriesInfo.totalEpisodes }}集</span>
                        </div>
                    </div>
                </div>

                <div class="btn w-[240px] m-auto mt-[18px]">
                    <van-button @click="buy" block round color="linear-gradient(180deg, #FF7340 , #FF3E3E )"
                        >立即兑换</van-button
                    >
                </div>
            </div>
        </div>
    </ion-modal>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import {
    createAnimation,
    IonButtons,
    IonButton,
    IonModal,
    IonHeader,
    IonContent,
    IonToolbar,
    IonTitle,
    IonItem,
    IonList,
    IonAvatar,
    IonImg,
    IonLabel
} from '@ionic/vue'
import resolveUrl from 'resolve-url'
const fileURL = import.meta.env.VITE_HTTP_FILE_URL
import { http } from '@/plugins/http'
import toast from '@/utils/toast'

const show = ref(false)
const modalRef = ref(false)
const videoRef = ref(false)

const props = defineProps({
    buyEpInfo: {
        type: Object,
        default: () => {
            return {}
        }
    },
    seriesInfo: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

const file = computed(() => {
    return resolveUrl(fileURL, props.seriesInfo.cover)
})

const category = computed(() => {
    if (props.seriesInfo.categories && props.seriesInfo.categories.length > 0) {
        return props.seriesInfo.categories[0].name
    }
    return ''
})

function dismiss() {
    show.value = false
    emit('videopause', false)
}

const enterAnimation = baseEl => {
    const root = baseEl.shadowRoot

    const backdropAnimation = createAnimation()
        .addElement(root.querySelector('ion-backdrop'))
        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)')

    const wrapperAnimation = createAnimation()
        .addElement(root.querySelector('.modal-wrapper'))
        .keyframes([
            { offset: 0, opacity: '0', transform: 'scale(0)' },
            { offset: 1, opacity: '0.99', transform: 'scale(1)' }
        ])

    return createAnimation()
        .addElement(baseEl)
        .easing('ease-out')
        .duration(500)
        .addAnimation([backdropAnimation, wrapperAnimation])
}

const leaveAnimation = baseEl => {
    return enterAnimation(baseEl).direction('reverse')
}
const emit = defineEmits(['videopause', 'playVideo'])
function init() {
    show.value = true
    emit('videopause')
}

defineExpose({
    init
})

function buy() {
    http.post(
        '/api/orders',
        {
            episodeId: props.buyEpInfo.id
        },
        {
            body: 'json'
        }
    )
        .then(res => {
            toast.success('购买成功')
            show.value = false
            emit('playVideo', props.buyEpInfo.episodeNum)
        })
        .catch(e => {
            toast(e.message)
        })
}
</script>

<style lang="less" scoped>
.back {
    position: fixed;
    right: 30px;
    top: calc(var(--ion-safe-area-top) + 30px);
    z-index: 20;
    width: 60px;
    height: 26px;
    background-color: rgba(255, 255, 255, 0.1);
    border-width: 0;
    color: #fff;
}

.open-modal {
    --height: fit-content;
    --border-radius: 8px;
    --width: 300px;
    --background: transparent;
}

.model-bg {
    width: 300px;
    display: block;
    height: auto;
}

.model-box {
    position: absolute;
    top: 130px;
    left: 0;
    right: 0;
    .title {
        color: #bb2c2c;
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        color: #bb2c2c;
        line-height: 30px;
        display: flex;
        justify-content: center;
        margin-top: 15px;
    }
}

.info {
    display: flex;
    padding: 9px 10px;
    margin: 14px 12px;
    background: #ffffff linear-gradient(133deg, #ffcd61 0%, #fffffb 50%, #ffe9b9 100%);
    border-radius: 8px;
    .van-image {
        flex-shrink: 0;
    }

    .info-text {
        flex-grow: 1;
        overflow: hidden;
        margin-left: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .text1 {
            font-size: 14px;
            font-weight: 500;
            color: #000000;
            line-height: 18px;
        }

        .text2 {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #61657a;
            line-height: 18px;

            span {
                &:first-child {
                    color: #bb2c2c;
                    text-decoration: underline;
                }
            }
        }
    }
}
</style>
