<script setup>
import { ref,nextTick, computed} from 'vue'
import { useRoute, useRouter } from "vue-router";
import {apiPPTDetail} from '@/api/ppt'
import {createPPTContent,getTemplate,getPPTConfig} from './hooks/createPPTContent'
import { useWindowSize } from '@vueuse/core'
import { Swipe, SwipeItem,showToast } from 'vant';

const { width, height } = useWindowSize()

const route=useRoute()
const router=useRouter()

const pptId=route.query.id

// 获取ppt详情
let conArr=ref([])
async function getPPTDetail(){
    const res=await apiPPTDetail({PptId:Number(pptId)})
    if(res.Ret!=200) return
    conArr.value=createPPTContent(res.Data)
    nextTick(()=>{
        showToast('左右滑动可翻页')
        $('.ppt-item-page').css('background-image',`url(${getPPTConfig().pptBgImage})`);
    })
    document.title=res.Data.Title
}
getPPTDetail()

// 计算缩放以及位置
const scale=computed(()=>{
    if(width.value>height.value){
        const scaleNum=height.value/630
        const topNum=-((630-height.value)/2)
        const leftNum=-((900-width.value)/2)
        return `transform: scale(${scaleNum});top:${topNum}px;left:${leftNum}px`
    }else{
        const scaleNum=width.value/900
        const topNum=-((630-height.value)/2)
        const leftNum=-((900-width.value)/2)
        return `transform: scale(${scaleNum});top:${topNum}px;left:${leftNum}px`
    }
})

const swipeIns=ref(null)
let current=ref(route.query.index||0)
function handleSwipeChange(index){
    current.value=index
    if(index==conArr.value.length-1){
        showToast('已是最后一页')
    }
    if(index==0){
        showToast('第一页')
    }
}
// 切换swipe到某个
function handleSwipeTo(index){
    swipeIns.value.swipeTo(index)
}


// 显示操作模块
let showAction=ref(false)
let timeIns=null
function handleShowAction(){
    if(showAction.value){
        showAction.value=false
        clearTimeout(timeIns)
    }else{
        showAction.value=true
        timeIns=setTimeout(() => {
            showAction.value=false
        }, 3000);
    }
}

function handleCloseWindow(){
    router.back()
}

</script>

<template>
    <div class="ppt-preview-page" @click="handleShowAction">
        <Swipe 
            ref="swipeIns"
            class="swipe-wrap" 
            :show-indicators="false"
            :loop="false"
            :initial-swipe="current"
            @change="handleSwipeChange"
        >
            <SwipeItem
                v-for="(item,index) in conArr" 
                :key="item.id"
            >
                <div class="content-item-box" :style="scale">
                    <component 
                        :is="getTemplate(item.modelId)" 
                        :pageData="{...item,pptPageIndex:index}"
                    />
                </div>
            </SwipeItem>
        </Swipe>

        <div :class="[showAction?'page-action-wrap page-action-wrap_show':'page-action-wrap']">
            <div class="con-box">
                <div 
                    :class="['item',current==index?'active':'']" 
                    v-for="(item,index) in conArr" 
                    :key="item.id"
                    @click="handleSwipeTo(index)"
                >{{index+1}}</div>
            </div>
        </div>
        <div 
            :class="[showAction?'back-btn back-btn_show':'back-btn']"
            @click="handleCloseWindow"
        >退出播放</div>
    </div>
</template>
<style lang="scss">
@import "./style/common.scss";
</style>
<style lang="scss" scoped>
.ppt-preview-page{
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 1.0);
    position: relative;
    overflow: hidden;
    .swipe-wrap{
        width: 100vw;
        height: 100vh;
        .content-item-box{
            width: 900PX;
            height: 630PX;
            position: absolute;
        }
    }

    .page-action-wrap{
        width: 100%;
        position: absolute;
        z-index: 99;
        bottom: -100PX;
        height: 60PX;
        transition: all .5s;
        .con-box{
            display: flex;
            align-items: center;
            width: 80%;
            margin: 0 auto;
            overflow-x: auto;
            &::-webkit-scrollbar{
                width: 0;
                height: 0;
            }
        }
        .item{
            background-color: #F2F6FA;
            color: $theme-color;
            width: 28PX;
            height: 28PX;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 25PX;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .active{
            background-color: $theme-color;
            color: #fff;
        }
    }
    .page-action-wrap_show{
        bottom: 0px;
    }
    .back-btn{
        position: absolute;
        right: 34PX;
        width: 80PX;
        height: 40PX;
        line-height: 40PX;
        text-align: center;
        background-color: rgba($color: #ccc, $alpha: 0.4);
        color: #fff;
        z-index: 99;
        border-radius: 4PX;
        top: -80PX;
        transition: all .5s;
    }
    .back-btn_show{
        top: 20PX;
    }
}
</style>