<template>
    <view class="goods__container">
        <z-paging ref="paging" v-model="goodsList" @query="transformQueryList" :fixed="false" height="100%"
            auto-show-back-to-top>
            <view class="goods">
                <block v-for="good in goodsList" :key="good.id">
                    <goodItem :attributes="good" />
                </block>
            </view>
        </z-paging>
    </view>
</template>

<script setup lang='ts'>
import { ref, unref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useZPaging, useCoupon } from '@/hooks/useCoupon'
import goodItem from './components/goodItem.vue'
import { apiCouponGoods } from '@/api/coupon'

interface GoodProp {
    id: number
    name: string
    remarks: string
    category: string
    unit: string
    image: string
    price: number
    scribingPrice: number
    status: number
    statusDesc: string
}
const goodsList = ref<GoodProp[]>([])

const { couponId, setCouponId } = useCoupon()
const { paging, queryList } = useZPaging({}, apiCouponGoods)

onLoad((options) => {
    const { id } = options as any
    setCouponId(id)
})

function transformQueryList(page_no: number, page_size: number) {
    const config = {
        couponId: unref(couponId),
    }
    return queryList(page_no, page_size, config)
}
</script>

<style lang="scss" scoped>
.goods__container {
    height: 100vh;

    .goods {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20rpx;
        padding: 20rpx;
    }
}
</style>