<script setup>
import { ref } from 'vue'
import { useAppStore } from '@/store/useAppStore'
import { useThemeStore } from '@/store/useThemeStore'
import config from '@/config/global.config';

const appStore = useAppStore()
const themeStore = useThemeStore()
const tabs = ['View Video Tutorials', 'View Graphic Tutorials']
const active = ref(0)
const videoSrc = config.appImagePrefix() + '/pay_guide/operation.mp4'
const videoShow = ref(false)
</script>
<template>
    <mobile-custom-layout bgColor="#360002" headBgColor="#610800" title="How to use?"
        :paddingTop="appStore.headerStyle.height">
        <view class="w-full tab-box flex items-center" :style="{ top: appStore.headerStyle.height + 'px' }">
            <view v-for="(item, index) in tabs" :key="index" class="tab-item flex-1 flex-column flex-center"
                @click="active = index" :style="{ color: active === index ? '#EAD15D' : '#fff' }">
                <view style="color: white;">{{ item }}</view>
                <view class="under-line" :style="{ background: index === active ? '#EAD15D' : '#360002' }"></view>
            </view>
        </view>
        <view class="content w-full">
            <template v-if="active === 0">
                <theme-image src="@/static/pay_guide/banner.png" class="w-full banner" mode="aspectFit"></theme-image>
                <view class="swiper-area w-full">
                    <view class="title">Deposit Tutorials</view>
                    <view class="gallery w-full flex items-center">
                        <theme-image v-for="(_, index) in 7" :src="`@/static/pay_guide/p${index + 1}.png`"
                            class="gallery-img" mode="aspectFit"></theme-image>
                    </view>
                    <!-- <swiper 
                    class="gallery-swiper" 
                    :indicator-dots="false"
                    :autoplay="false"
                    :current="currentIndex"
                    :previous-margin="'0'"
                    :next-margin="'246rpx'"
                    @change="handleChange"
                >
                    <swiper-item v-for="(_, index) in 7" :key="index" class="swiper-item">
                        <theme-image :src="`@/static/pay_guide/p${index + 1}.png`" class="gallery-img" mode="aspectFit"></theme-image>
                    </swiper-item>
                </swiper> -->
                </view>
                <view class="w-full video-area">
                    <view class="title">Watch the tutorial video and win rewards</view>
                    <view class="video-box" @click="videoShow = true">
                        <!-- <video :src="videoSrc" :poster="themeStore.theme.deposit.posterImg" class="p-video" /> -->
                        <image :src="themeStore.theme.deposit.posterImg" mode="aspectFit" class="p-video" />
                        <view class="btn-float flex-center">
                            <theme-image src="@/static/pay_guide/play-fill.png" class="play-btn"
                                mode="aspectFit"></theme-image>
                            <view style="white-space: nowrap;">PLAY VIDEO</view>
                        </view>
                    </view>
                </view>
            </template>
            <template v-else>
                <theme-image v-for="(_,index) in 6" :key="index" :src="`@/static/pay_guide/${index+1}.jpg`" class="w-full block" mode="widthFix"></theme-image>
            </template>
        </view>
        <view class="video-full" v-if="videoShow">
            <video :src="videoSrc" muted autoplay object-fit="contain" class="p-video" controls></video>
            <theme-image src="@/static/pay_guide/close-fill.png" class="close-btn" mode="aspectFit"
                @click="videoShow = false"></theme-image>
        </view>
        <empty-hold height="20"></empty-hold>
    </mobile-custom-layout>
</template>
<style lang="scss" scoped>
.tab-box {
    height: 50px;
    position: fixed;
    left: 0;
    z-index: 100;
    background-color: #360002;

    &::after {
        content: '';
        position: absolute;
        left: 20px;
        bottom: 5px;
        width: calc(100% - 40px);
        height: 2px;
        background-color: #631419;
    }

    .tab-item {
        height: 100%;
        font-size: 28rpx;
        color: #fff;
        transition: all 0.3s;

        .under-line {
            width: 30%;
            height: 2px;
            background-color: #EAD15D;
            margin: 0 auto;
            margin-top: 4px;
            transition: all 0.3s;
        }
    }
}

.content {
    padding: 0 24rpx;
    margin-top: 60px;

    .banner {
        width: 702rpx;
        height: 261rpx;
        margin: 0 auto;
    }

    .swiper-area {
        margin-top: 20rpx;
        font-size: 16px;
        color: white;

        .gallery {
            flex-wrap: nowrap;
            height: 452rpx;
            overflow-x: auto;
            margin-top: 20rpx;

            .gallery-img {
                width: 308rpx;
                height: 452rpx;
                flex-shrink: 0;
                margin-right: 32rpx;

                &:last-child {
                    margin-right: 0;
                }
            }
        }

        .gallery-swiper {
            width: 100%;
            height: 452rpx;
            margin-top: 20rpx;
        }

        .swiper-item {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .gallery-img {
            width: 308rpx;
            height: 452rpx;
            margin-right: 36rpx;
            border-radius: 8rpx;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
        }
    }

    .video-area {
        margin-top: 30rpx;
        font-size: 16px;
        color: white;

        .video-box {
            margin-top: 20rpx;
            position: relative;
            width: 100%;
            height: 241rpx;
            border-radius: 8rpx;
            overflow: hidden;

            .p-video {
                width: 100%;
                height: 221rpx;
            }

            .btn-float {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                font-size: 44rpx;
                font-weight: bold;
                color: white;

                .play-btn {
                    width: 80rpx;
                    height: 80rpx;
                    margin-right: 20rpx;
                }
            }
        }

    }
    .block{
        display: block;
        margin: 0;
        padding: 0;
    }
}
.video-full{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    padding: 10px;
    .p-video{
        width: 100%;
        height: 100%;
    }
    .close-btn{
        position: absolute;
        top: 20px;
        right: 20rpx;
        width: 64rpx;
        height: 64rpx;
    }
}
</style>