<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
                </ion-buttons>
                <ion-title>{{ batchInfo.name }}</ion-title>
                <ion-buttons slot="end">
                    <ion-button @click="$router.push({ name: 'productSearch', query: { batchId } })">
                        <ion-icon slot="icon-only" :icon="searchOutline"></ion-icon>
                    </ion-button>
                </ion-buttons>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <!-- <div class="head">
                <div class="text">{{ batchInfo.name }}</div>
                <img class="search" src="../assets/search.png" alt="" />
            </div> -->
            <div class="status hot" v-if="status === '抢购中'">
                <img src="../assets/info_icon_qianggouzhong.png" alt="" />
                <span>火爆抢购中…</span>
            </div>
            <div class="status" v-else-if="status">
                <img src="../assets/info_icon_shijian.png" alt="" />
                <span><van-count-down :time="status" /> 开抢</span>
            </div>
            <van-list
                class="list"
                v-model:loading="loading"
                :finished="finished"
                :finished-text="$t('common.loadFinish')"
                @load="getData"
            >
                <div class="product" v-for="(item, index) in list" :key="index">
                    <product-info list v-model:info="list[index]"></product-info>
                </div>
            </van-list>
        </ion-content>
    </ion-page>
</template>

<script setup>
import productInfo from '../components/ProductInfo.vue'
import { ref, getCurrentInstance, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import useList from '../plugins/list'
import { isAfter, isBefore, parse, getYear, getTime, addDays, getMonth, getDate } from 'date-fns'
import { searchOutline } from 'ionicons/icons'

const route = useRoute()
const {
    appContext: {
        config: { globalProperties: global }
    }
} = getCurrentInstance()

const batchInfo = ref({})
const batchId = route.query.batchId

const { empty, loading, finished, list, getData } = useList('/product/all', () => {
    return {
        query: {
            batchId: route.query.batchId,
            status: 'IN_STOCK',
            enabled: true
        },
        sort: 'id,desc'
    }
})
function getBatch() {
    global.$http.get('/saleBatch/get/' + batchId).then(res => {
        batchInfo.value = res
    })
}

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

onMounted(() => {
    getData(true)
    getBatch()
})
</script>

<style lang="less" scoped>
.header-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--ion-color-light-contrast);
    line-height: 24px;
}

.list {
    padding: 12px 0;
    .product {
        margin: 0 16px 12px;
        background: var(--ion-color-step-0);
        border-radius: 4px;
    }
}

.status {
    .f();
    justify-content: center;
    background: var(--green);
    height: 28px;
    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: #ed1e31;
    }
}
</style>
