<template>
    <ion-page>
        <ion-content :fullscreen="true" class="home">
            <!-- 轮播图模块 -->
            <div class="swiper-content">
                <swiper
                    :modules="[Controller]"
                    @swiper="setSecondSwiper"
                    :controller="{ control: firstSwiper }"
                    class="mySwiper"
                    :autoplay="{ delay: 3500, disableOnInteraction: false }"
                >
                    <swiper-slide v-for="(item, index) in topBanners" :key="index">
                        <van-image :src="item.pic" fit="cover" height="58.7vw" width="100vw" />
                    </swiper-slide>
                </swiper>

                <swiper
                    class="swiper-box"
                    :modules="[Controller]"
                    @swiper="setFirstSwiper"
                    :controller="{ control: secondSwiper }"
                    parallax
                    pagination
                >
                    <swiper-slide v-for="(item, index) in topBanners" :key="index">
                        <div
                            class="text1"
                            data-swiper-parallay="-300"
                            data-swiper-parallax-scale="0.15"
                            data-swiper-parallax-duration="600"
                        >
                            {{ item.remark }}
                        </div>
                        <div
                            class="text2"
                            data-swiper-parallax="-300"
                            data-swiper-parallax-scale="0.15"
                            data-swiper-parallax-duration="600"
                        >
                            限量发售
                        </div>
                    </swiper-slide>
                </swiper>
            </div>

            <!-- 通知 -->
            <van-notice-bar
                left-icon="volume-o"
                background="var(--ion-color-step-0)"
                color="var(--ion-text-color)"
                text="
                    无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。
                "
            >
                <template #left-icon>
                    <img class="bar-icon" src="../assets/home_icon_redian.png" alt="" />
                    <div class="driver"></div>
                </template>
            </van-notice-bar>

            <!-- 初级场 -->

            <template v-for="(item, index) in saleBatchs" :key="index">
                <div class="level">
                    <van-cell :title="item.name" :value="$t('home.all')" @click="goList(item)" :border="false" is-link>
                        <template #right-icon>
                            <img src="../assets/icon_inter.png" alt="" class="right-icon" />
                        </template>
                    </van-cell>

                    <div class="first" v-if="index === 0">
                        <van-image
                            :src="item.icon || firstImg"
                            width="calc(100vw - 40px)"
                            height="calc(100vw - 40px)"
                            fit="cover"
                            radius="4"
                            @click="goList(item)"
                        />
                        <div class="first-content" v-if="!item.empty">
                            <product-info :info="item.hotInfo"></product-info>
                        </div>

                        <div class="status hot" v-if="getStatus(item) === '抢购中'">
                            <img src="../assets/info_icon_qianggouzhong.png" alt="" />
                            <span>{{ $t('home.hot') }}…</span>
                        </div>
                        <div class="status" v-else-if="getStatus(item)">
                            <img src="../assets/info_icon_shijian.png" alt="" />
                            <span
                                ><van-count-down :time="getStatus(item)" format="HH时mm分" />
                                {{ $t('home.start') }}</span
                            >
                        </div>
                    </div>
                    <div class="second" v-else>
                        <van-image
                            @click="goList(item)"
                            :src="item.icon || (index == 1 ? secondImg : thirdImg)"
                            fit="cover"
                        />

                        <div class="status hot" v-if="getStatus(item) === '抢购中'">
                            <img src="../assets/info_icon_qianggouzhong.png" alt="" />
                            <span>火爆抢购中…</span>
                        </div>
                        <div class="status" v-else-if="getStatus(item)">
                            <img src="../assets/info_icon_shijian.png" alt="" />
                            <span><van-count-down :time="getStatus(item)" format="HH时mm分" /> 后开抢</span>
                        </div>
                    </div>
                </div>
            </template>

            <div class="tools">
                <div class="tool">
                    <img src="../assets/home_icon_pingtaixieyi.png" alt="" />
                    <span>{{ $t('common.eula') }}</span>
                </div>
                <div class="tool">
                    <img src="../assets/home_icon_liucheng.png" alt="" />
                    <span>使用教程</span>
                </div>
            </div>
        </ion-content>
    </ion-page>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper.min.css'
import 'swiper/swiper-bundle.min.css'
import SwiperCore, { Pagination, Autoplay, Parallax, Controller } from 'swiper'
import { useRouter } from 'vue-router'
import { ref, getCurrentInstance, onMounted } from 'vue'

import swiperImg from '../assets/bg.png'
import firstImg from '../assets/p1.png'
import secondImg from '../assets/bg2.png'
import thirdImg from '../assets/bg3.png'

import productInfo from '../components/ProductInfo.vue'
import { isAfter, isBefore, parse, getYear, getMonth, getDate, addDays, getTime } from 'date-fns'
import { http } from '@/plugins/http'
import toast from '@/utils/toast'

const router = useRouter()
function navigate() {
    router.push({ name: 'login' })
}

SwiperCore.use([Pagination, Autoplay, Parallax, Controller])
const firstSwiper = ref(null)
const secondSwiper = ref(null)
const setFirstSwiper = swiper => {
    firstSwiper.value = swiper
}
const setSecondSwiper = swiper => {
    secondSwiper.value = swiper
}

const topBanners = ref([])
function getBanner() {
    return http.post('/banner/all', {}, { body: 'json' }).then(res => {
        topBanners.value = res.content.filter(item => {
            return item.type === 'TOP'
        })
    })
}

const saleBatchs = ref([])
const hotInfo = ref({})
function getSaleBatch() {
    return http.post('saleBatch/all', {}, { body: 'json' }).then(res => {
        saleBatchs.value = res.content.map(item => {
            return {
                ...item,
                empty: true,
                hotInfo: {}
            }
        })
        if (!res.empty) {
            res.content.forEach((item, index) => {
                http.post(
                    'product/all',
                    {
                        query: {
                            batchId: item.id,
                            status: 'IN_STOCK',
                            enabled: true
                        },
                        size: 1,
                        sort: 'id,desc'
                    },
                    { body: 'json' }
                ).then(res => {
                    saleBatchs.value[index].empty = res.empty
                    if (!res.empty) {
                        saleBatchs.value[index].hotInfo = res.content[0]
                    }
                })
            })
        }
    })
}

const goList = info => {
    if (getStatus(info) === '抢购中') {
        router.push({
            path: '/productList',
            query: {
                batchId: info.id
            }
        })
    } else {
        toast('敬请期待...')
    }
}

onMounted(() => {
    // toast.loading({
    //     message: '加载中...',
    //     forbidClick: true
    // })
    Promise.all([getBanner(), getSaleBatch()]).then(() => {
        toast.dismiss()
    })
})

const getStatus = info => {
    let date1 = getYear(new Date()) + '/' + (getMonth(new Date()) + 1) + '/' + getDate(new Date())
    if (info && info.saleStart) {
        if (
            isAfter(new Date(), new Date(date1 + ' ' + info.saleStart)) &&
            isBefore(new Date(), new Date(date1 + ' ' + info.saleEnd)) &&
            !info.empty
        ) {
            return '抢购中'
        } else if (isBefore(new Date(), new Date(date1 + ' ' + info.saleStart))) {
            return getTime(new Date(date1 + ' ' + info.saleStart), 1) - getTime(new Date())
        } else {
            return getTime(addDays(new Date(date1 + ' ' + info.saleStart), 1)) - getTime(new Date())
        }
    }
    return ''
}
</script>

<style lang="less" scoped>
.swiper-content {
    padding-bottom: 6.4vw;
}
.swiper-box {
    margin: 0 auto;
    height: 25vw;
    width: 89vw;
    background: #112982 linear-gradient(135deg, #d700ff 0%, #3e22ff 100%);
    box-shadow: 0px 0px 6px 0px #4a65ff;
    border-radius: 2px;
    --swiper-theme-color: var(--ion-color-step-0);
    --swiper-pagination-color: var(--ion-color-step-0);
    position: absolute;
    top: 40vw;
    left: 5.5vw;
    .swiper-slide {
        .f-col();
        align-items: center;
        justify-content: center;
        .text1 {
            font-size: 20px;
            font-weight: bold;
            color: var(--ion-color-step-0);
            line-height: 28px;
            text-shadow: 0px 0px 4px rgba(var(--ion-color-light-contrast-rgb), 0.5);
        }
        .text2 {
            font-size: 12px;
            color: var(--ion-color-step-0);
            line-height: 17px;
            text-shadow: 0px 0px 4px rgba(var(--ion-color-light-contrast-rgb), 0.5);
            margin-top: 2px;
            margin-bottom: 15px;
        }
    }

    :deep(.swiper-pagination-bullet) {
        background-color: var(--ion-color-step-0);
        width: 18px;
        height: 2px;
        border-radius: 2px;
    }
    :deep(.swiper-pagination) {
        bottom: calc(2.7vw + 6px);
    }
}

.van-notice-bar {
    margin: 16px 20px 14px;
    --van-notice-bar-font-size: 13px;
    border-radius: 4px;
    .bar-icon {
        width: 77px;
        height: 16px;
    }

    .driver {
        width: 1px;
        height: 10px;
        background: rgba(var(--ion-color-light-contrast-rgb), 0.2);
        margin: 0 8px 0 9px;
    }
}

:deep(.van-cell) {
    --van-cell-background: var(--ion-background-color);
    --van-cell-horizontal-padding: 20px;
    --van-cell-text-color: var(--ion-color-step-800);
    .f();
    .van-cell__title {
        font-size: 16px;
        font-weight: bold;
    }

    .right-icon {
        width: 24px;
        height: 24px;
    }
}
.first {
    margin: 4px 20px 14px;
    position: relative;
    .first-content {
        position: absolute;
        bottom: 12px;
        left: 12px;
        right: 12px;
        background: var(--yellow);
        border-radius: 4px;
        overflow: hidden;
    }
}

.status {
    .f();
    padding: 2px 6px;
    background: var(--green);
    box-shadow: 0px 2px 4px 0px rgba(var(--ion-color-light-contrast-rgb), 0.3);
    border-radius: 4px;
    position: absolute;
    top: 18px;
    left: 18px;
    img {
        width: 18px;
        height: 18px;
    }
    span {
        font-size: 12px;
        color: var(--ion-color-step-0);
        line-height: 22px;
        margin-left: 6px;
        .f();
    }

    .van-count-down {
        --van-count-down-text-color: var(--ion-color-step-0);
        --van-count-down-font-size: 12px;
        // margin-right: 6px;
        min-width: 55px;
    }

    &.hot {
        background: var(--red);
    }
}

.second {
    margin: 4px 20px 14px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.tools {
    .f();
    padding: 14px 20px 30px;
    .tool {
        width: 50%;
        .f();
        justify-content: center;
        height: 58px;
        background: var(--ion-color-step-100);
        border-radius: 4px;
        img {
            width: 22px;
            height: 22px;
            margin-right: 6px;
        }
    }
    .tool + .tool {
        margin-left: 15px;
    }
}
</style>
