<template>
    <tabs
        class="tabs"
        :current="current"
        v-bind="tabStyle"
        @change="handleChange"
        :swipeable="false"
    >
        <tab v-for="(item, i) in categoryLists" :key="i" :name="item.name"></tab>

        <view class="core">
            <z-paging
                class="z-paging"
                ref="paging"
                v-model="categoryLists"
                @query="transformQueryList"
                :fixed="false"
                height="100%"
                auto-show-back-to-top
                @scroll="handleScroll"
            >
                <view class="cate-container mt-[20rpx]">
                    <view
                        v-for="(category, i) in categoryLists"
                        :key="i"
                        :id="'category-item' + i"
                        class="category-item"
                    >
                        <view class="text-center mt-[40rpx] mb-[20rpx] text-content text-sm">
                            {{ category.name }}
                        </view>
                        <view class="goods">
                            <block v-for="(item, idx) in category.sonGoodsList" :key="item.id">
                                <GoodItem :attributes="item" />
                            </block>
                        </view>
                    </view>
                </view>
            </z-paging>
        </view>
    </tabs>
</template>

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

let TAB_HEIGHT = 50

const instance = getCurrentInstance() // 获取组件实例

const distances = ref<number[]>([])
const categoryLists = ref<any[]>([])
const current = ref(0)
const isTabChange = ref(false)

const tabStyle = computed(() => {
    return {
        height: 100,
        barWidth: 60,
        fontSize: 32,
        barStyle: { bottom: 0 },
        activeColor: '#1296DB'
    }
})
const { couponId, setCouponId } = useCoupon()

const { paging, queryList } = useZPaging({}, apiCouponCategoryGoods)

onMounted(async () => {
    setTabHeight()
    setDisatnces()
})

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

// 锚点定位(start)
const handleScroll = event => {
    if (unref(isTabChange)) return
    const { scrollTop } = event.detail
    const index = distances.value.findIndex(distance => distance - TAB_HEIGHT - scrollTop > 0)
    current.value = index > 0 ? index - 1 : distances.value.length - 1
}
const handleChange = async (index: number) => {
    // current.value = index
    isTabChange.value = true
    const id = `#category-item${index}`
    uni.createSelectorQuery()
        .select(id)
        .boundingClientRect(data => {
            uni.createSelectorQuery()
                .select('.cate-container')
                .boundingClientRect(res => {
                    const scrollTop = data.top - res.top
                    paging.value.scrollToY(scrollTop)
                    isTabChange.value = false
                })
                .exec()
        })
        .exec()
}
function setDisatnces() {
    setTimeout(() => {
        const query = uni.createSelectorQuery().in(instance)
        query
            .selectAll('.category-item')
            .boundingClientRect(data => {
                distances.value = data.map(v => v.top)
            })
            .exec()
    }, 200)
}

function setTabHeight() {
    const query = uni.createSelectorQuery().in(instance)
    query
        .select('.tabs >>> #cu-tab')
        .boundingClientRect(res => {
            TAB_HEIGHT = (res.height / (uni.upx2px(100) / 100)) as number
        })
        .exec()
}
// 锚点定位(end)

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

<style lang="scss" scoped>
.goods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    padding: 0 20rpx;
}

.core {
    height: calc(100vh - 100rpx);
}
</style>
