<template>
	<div class="container">
		<van-sticky>
			<view class="justify-center bg-white sh pd-px-20 mg-b-20">
				<van-icon class="top-left" name="arrow-left" @tap="goBack" />
				<view class="top-center">智能专区</view>
			</view>
		</van-sticky>
		<view style="margin-top: 16px;margin-bottom: 50rpx" >
			<view>
				<van-row gutter="10" class="pd-h-px-10" >
					<van-col span="12" v-for="(item,index) in categoryList" :key="index">
						<van-image @click="goUrl(item.id)" style="margin-bottom: 20rpx" width="100%;" radius="20rpx" :src="item.logoImg"
						/>
					</van-col>
				</van-row>
			</view>
		</view>
	</div>
</template>

<script lang="ts">
    import api from "@/api";
    import {reactive, toRefs, onMounted} from 'vue';
    import { PageUtils } from '@/utils/utils';

    export default {

        setup() {
            const that = reactive({
                categoryList: [],
                goBack() {
                    PageUtils.goBack()
                },
                goUrl(e){
                    uni.navigateTo({
                        url: `/pages/goodList/index?menuId=${e}`,
                    });
                },
                getBanner: () => {
                    api.dzResource().then((res: any) => {
                        that.categoryList = res.benDiMenu
                        console.log(res.benDiMenu);
                    })
                },
            });
            onMounted(() => {
                that.getBanner()
            })
            const refState = toRefs(that)
            return {
                ...refState
            }
        }
    }

</script>

<style scoped>
	.container{
		-webkit-overflow-scrolling: touch;
	}
</style>