import React, { useState, useEffect, useCallback } from 'react'

import { View, Image } from '@tarojs/components'

import Taro from '@tarojs/taro'

import {  getGoodsList } from '../../api/qrcode'

import Tip from '../../utils/tip'

import './index.scss'

type shopListType = {
    [key: string]: any
}

const ShopCate: React.FC = () => {

    const [shopList, setShopList] = useState<shopListType[]>([])

    // 跳转页面
    const goPage = (): void => {
        Taro.redirectTo({
             url: '/pages/ScanResult/index'
        });
    }

    // 获取商品
    const GetGoodsList = useCallback(async (): Promise<void> => {

        Tip.loading('努力加载中~')

        const data = await getGoodsList()

        Tip.loaded()

        setShopList(data as shopListType[])
    }, [])

    useEffect( () => {
        GetGoodsList()
    }, [GetGoodsList])


    return (
        <View className='ShopCate'>
                {
                    shopList?.map(item => (
                        <View className='ShopCate-item' key={item.id} onClick={goPage}>
                            <Image src={item.imgUrl} />
                            <View className='cate-name'>{item.name}</View>
                        </View>
                    ))
                }
        </View>
    )
}

export default ShopCate