import { View } from '@tarojs/components'
import Search from '@/components/search'
import SideBar from '@/components/sideBar'
import Product from '@/components/product'
import MoveBtn from '@/components/moveBtn'
// import ShopCart from '@/components/shopCart'
import { goLink } from '@/common/common'
import styles from './index.module.scss'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { kindListApi, ProductListApi } from '@/api/index'
// import useLogin from '@/use/useLogin'
import { dataLoadingStatus } from '@/common/util'

export default () => {
    useEffect(() => {
        categoryList()
    }, [])

    //获取面料种类
    const [kindData, setKindData] = useState<any>({ list: [], defaultId: 0 })
    const { fetchData } = kindListApi()
    const categoryList = async () => {
        const res = await fetchData()
        if (res.data?.list) {
            setKindData({ ...kindData, list: res.data.list, defaultId: res.data.list[0].id })
            setFiltrate({ ...filtrate, product_kind_id: res.data.list[0].id })
        }
    }

    //获取面料列表
    const [productData, setProductData] = useState({ list: [], total: 0 })
    const [hasMore, setHasMore] = useState(true)
    const [filtrate, setFiltrate] = useState({ product_kind_id: 0, size: 5, page: 1 })
    const pageNum = useRef({ size: filtrate.size, page: filtrate.page })
    const { fetchData: productFetchData, state: productState } = ProductListApi()
    //获取数据方法
    const getProductList = async () => {
        const { data, total } = await productFetchData(filtrate)
        setProductData({ ...productData, list: data.list, total })
        setRefresherTriggeredStatus(() => false)
    }
    //监听查询条件
    useEffect(() => {
        if (filtrate.product_kind_id) getProductList()
    }, [filtrate])

    //点击面料类型
    const getProductKindId = useCallback((e) => {
        pageNum.current.page = 1
        setProductData({ list: [], total: 0 })
        setFiltrate((list) => ({ ...list, size: 5, product_kind_id: e.id }))
    }, [])

    //上拉加载数据
    const getScrolltolower = useCallback(() => {
        if (productData.list.length >= productData.total) {
            setHasMore(false)
        } else {
            pageNum.current.page++
            const newSize = pageNum.current.size * pageNum.current.page
            setFiltrate((e) => ({ ...e, size: newSize }))
        }
    }, [productData])

    const [showShopCart, setShowShopCart] = useState(false)

    //列表下拉刷新
    const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
    const getRefresherRefresh = async () => {
        pageNum.current.page = 1
        setFiltrate({ ...filtrate, size: 5 })
        setHasMore(true)
        setRefresherTriggeredStatus(true)
    }

    //数据加载状态
    const statusMore = useMemo(() => {
        return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading })
    }, [productData, productState.loading])

    return (
        // <MoveBtn onClick={() => setShowShopCart(showShopCart)}>
        <View className={styles.main}>
            <View className={styles.search}>
                {/* <View className={styles.search_collect} onClick={() => goLink('/pages/collection/index')}>
                        我的收藏
                    </View> */}
                <View className={styles.search_input} onClick={() => goLink('/pages/searchList/search')}>
                    <Search disabled={true} style={{ width: '263rpx' }} />
                </View>
            </View>
            <View className={styles.products}>
                <SideBar
                    list={kindData.list}
                    height='100%'
                    defaultValue={kindData.defaultId}
                    hasMore={hasMore}
                    statusMore={statusMore}
                    selfOnScrolltolower={getScrolltolower}
                    sideBarOnClick={getProductKindId}
                    heightItem={150}
                    refresherTriggered={refresherTriggeredStatus}
                    selfOnRefresherRefresh={() => getRefresherRefresh()}>
                    <Product productList={productData.list} />
                </SideBar>
            </View>
            <View className='common_safe_area_y'></View>
            {/* <ShopCart show={showShopCart} onClose={() => setShowShopCart(false)} /> */}
        </View>
        // </MoveBtn>
    )
}
