<template>
    <ion-page>
        <ion-header>
            <ion-toolbar class="head">
                <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-toolbar>
        </ion-header>
        <ion-content>
            <div class="search">
                <van-search v-model="search" show-action placeholder="请输入搜索关键词" @search="getSearch">
                    <template #left-icon>
                        <img class="search-icon" src="../assets/nav_icon_sousuo.png" alt="" />
                    </template>

                    <template #action>
                        <div v-if="!isSearch" @click="getSearch(search)">搜索</div>
                        <div v-else @click="onCancel">取消</div>
                    </template>
                </van-search>
            </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-empty v-if="empty && isSearch" description="没有搜索任何商品哦～" :image="emptyIcon" />
            </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 useSearch from '../plugins/search'
import { isAfter, isBefore, parse, getYear, getMonth, getDate } from 'date-fns'
import emptyIcon from '../assets/img_empty_order.png'

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

const batchInfo = ref({})

let beforeData = {
    query: {
        batchId: route.query.batchId,
        status: 'IN_STOCK',
        enabled: true
    },
    sort: 'id,desc'
}
const { empty, loading, finished, list, getData, isSearch, search, getSearch, onCancel } = useSearch(
    '/product/all',
    beforeData
)

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))
        ) {
            return '抢购中'
        } else {
            return batchInfo.value.saleStart + ' 开抢'
        }
    }
    return ''
})
</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;
    }

    &.hot {
        background: #ed1e31;
    }
}

.search {
    :deep(.van-search) {
        --van-search-left-icon-color: var(--ion-color-step-200);
        --van-search-content-background-color: var(--ion-color-step-50);
        --van-search-input-height: 36px;
        --van-text-color: var(--ion-color-step-200);
        --van-search-action-padding: 0 16px;
        --van-search-action-text-color: #8c7af8;
        --van-padding-sm: 4px;
        --van-padding-base: 0;
        .van-field__left-icon {
            .f();
        }

        .van-search__content {
            border-radius: 4px;
        }
    }

    .search-icon {
        width: 28px;
        height: 28px;
    }
}
</style>
