<template>
    <view class="container">
        <scroll-view
            class="menu"
            scroll-x="true"
            :scroll-left="160 * idx"
            v-if="menuData?.sons?.length"
        >
            <view
                class="menu--item"
                :class="{ active: categoryId === menuData.id }"
                @click="changeTabs(menuData)"
            >
                <view class="flex justify-center">
                    <u-image src="@/bundle/static/images/mb-like.svg" width="56" height="56" />
                </view>
                <view class="black font-medium mt-[14rpx]">{{ '全部服务' }}</view>
            </view>
            <block v-for="item in menuData.sons" :key="item.id">
                <template v-if="item.isShow">
                    <view
                        class="menu--item"
                        :class="{ active: categoryId === item.id }"
                        @click="changeTabs(item)"
                    >
                        <view class="flex justify-center">
                            <u-image :src="item.image" width="56" height="56" />
                        </view>
                        <view class="black font-medium mt-[14rpx]">{{ item.name }}</view>
                    </view>
                </template>
            </block>
        </scroll-view>

        <view class="main">
            <z-paging
                ref="paging"
                v-model="goodsData"
                @query="queryList"
                :fixed="false"
                height="100%"
            >
                <view class="px-[24rpx]">
                    <goods-card :goodsList="goodsData"></goods-card>
                </view>
            </z-paging>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, shallowRef } from 'vue'
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { apiGoodsCategoryLists, apiCategoryLists, apiGoodsLists } from '@/api/store'
import GoodsCard from '@/components/goods-card/index.vue'

const categoryId = ref<number>()
const menuData = ref<any>({})
const goodsData = ref<any>([])
const paging = shallowRef()
// 记录当前选中商品下标
const idx = ref(0)

onLoad((options: any) => {
    console.log('options:', options)

    categoryId.value = options?.id * 1 || 0
    getCategoryList()
})

// 切换菜单
const changeTabs = (event: any) => {
    console.log('event:', event)

    // 如果点击同一个2次的话那就是取消当前选择然后选择一级分类的商品
    categoryId.value = event.id === categoryId.value ? menuData.value.id : event.id
    paging.value.reload()
}

// 获取分类列表
const getCategoryList = async (): Promise<void> => {
    try {
        const res = await apiGoodsCategoryLists({ pid: categoryId.value })
        uni.setNavigationBarTitle({
            title: res[0].name
        })
        menuData.value = res[0]
        console.log('data', menuData.value)

        if (menuData.value.sons.length) {
            idx.value = menuData.value.sons.findIndex((item) => item.id === categoryId.value)
        }
    } catch (err) {
        console.log(err)
    }
}

// 获取商品列表
const queryList = async (pageNo: number, pageSize: number) => {
    try {
        const { lists } = await apiGoodsLists({
            pageNo: pageNo,
            pageSize: pageSize,
            categoryId: categoryId.value
        })
        paging.value.complete(lists)
    } catch (e) {
        console.log('报错=>', e)
        //TODO handle the exception
        paging.value.complete(false)
    }
}

onShareAppMessage(() => {
    return {
        title: `分享给好友`,
        imageUrl: ''
    }
})
</script>

<style lang="scss">
.container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    flex-direction: column;

    .menu {
        height: 188rpx;
        white-space: nowrap;
        box-sizing: border-box;
        padding: 20rpx 0 20rpx 24rpx;

        &--item {
            width: 160rpx;
            height: 148rpx;
            padding: 20rpx 0;
            margin-right: 20rpx;
            display: inline-block;
            text-align: center;
            font-size: 26rpx;
            border-radius: 10rpx;
            background-color: #ffffff;
        }

        .active {
            color: #f36161;
        }
    }

    .main {
        flex: 1;
        min-height: 0;
        overflow: scroll;
    }
}
</style>
