<template>
    <view>
        <u-navbar
            :background="{
                background: `url(${getImageUrl(img)}) no-repeat center center`,
                backgroundSize: 'cover'
            }"
            height="210"
            class="navbar"
            back-icon-color="#fff"
        />
        <view class="List">
            <z-paging
                auto-show-back-to-top
                ref="paging"
                v-model="couponLists"
                @query="queryList"
                :fixed="false"
                height="100%"
            >
                <view class="px-[30rpx]" v-for="item in couponLists" :key="item.id">
                    <coupon-card :item="item" />
                </view>
            </z-paging>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, shallowRef } from 'vue'
import { getDecorate } from '@/api/shop'
import { useAppStore } from '@/stores/app'
// import { apiCouponList } from '@/api/coupon'

const { getImageUrl } = useAppStore()

// 获取装修信息
const img = ref('')
const getData = async () => {
    const data = await getDecorate({ id: 6 })
    const obj = JSON.parse(data.data)[0].content
    switch (obj.enabled) {
        case 1:
            img.value = obj.defaultImg
            break
        case 2:
            img.value = obj.customImg
            break
    }
}
getData()

// 获取优惠券列表
const paging = shallowRef<any>(null)
const couponLists = ref<any>([])
const queryList = async (page_no = 1, page_size = 10) => {
    try {
        const { lists } = await apiCouponList({
            page_no,
            page_size
        })
        paging.value.complete(lists)
    } catch (e) {
        console.log('报错=>', e)
        //TODO handle the exception
        paging.value.complete(false)
    }
}
</script>

<style lang="scss" scoped>
.navbar {
    background-color: #fff;
    position: relative;
    :deep(.u-back-wrap) {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
    }
}
.List {
    height: calc(100vh - 420rpx - env(safe-area-inset-bottom));
    padding: 30rpx 0;
}
</style>
