<template>
    <div class="promotion-page">
        <div style="background-color: #1e1e1e;padding: 16px 10px;border-radius: 6px;">
            <el-page-header @back="goBack">
                <template #content>
                    <span class="text-large font-600 mr-3"> {{ t('优惠活动') }} </span>
                </template>
            </el-page-header>
        </div>
        <div class="promotion-page-list">
            <!-- 骨架屏组件 -->
            <el-skeleton :loading="loading" animated :count="4">
                <!-- 骨架屏模板 -->
                <template #template>
                    <div class="promotion-page-list-item">
                        <el-skeleton-item variant="image" style="width: 100%; height: 180px; border-radius: 8px;" />
                    </div>
                </template>
                <!-- 真实内容模板 -->
                <template #default>
                    <div class="promotion-page-list-item" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
                        <el-image :src="item.pc_image" style="width: 100%;border-radius: 8px;"></el-image>
                    </div>
                </template>
            </el-skeleton>
        </div>
    </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
import { getActivity } from '@/request/api'
const {t} = useI18n()
const router = useRouter();

const pagingRef = ref(null);
const dataList = ref([]);
const loading = ref(true); 

function onQuery() {
    loading.value = true; 
    getActivity({ type: 3 }).then((res) => {
        dataList.value = res.data.list || [];
        // 增加可选链操作符 (?.) 避免 null 报错
        pagingRef.value?.complete(true);
        loading.value = false; 
    }).catch(() => {
        // 增加可选链操作符 (?.) 避免 null 报错
        pagingRef.value?.complete(true);
        loading.value = false; 
    });
}

function goDetail(item) {
    router.push({ name: 'PromotionDetail', query: { id: item.id } });

}

function goBack() {
    router.back();
}

onQuery()
</script>

<style lang="scss" scoped>
.promotion-page {
    max-width: 1200px;
    width: 90%;
    height: calc(100% - 20px);
    margin: 10px auto;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 10px;
    &-list{
        margin-top: 10px;
        &-item{
            margin-bottom: 10px;
            cursor: pointer;
        }
    }
}
</style>