import {View} from '@tarojs/components'
import Banner from '@/components/banner'
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 styles  from './index.module.scss'
import { goLink } from '@/common/common'
import { useEffect, useRef, useState } from 'react'
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
import {GetProductKindListApi, GetProductListApi} from '@/api/material'

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

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

  //获取面料列表
  const [productData, setProductData] = useState({list:[], total:0, hasMore:true})
  const filtrate = useRef({product_kind_id:0, size: 5,page: 1})
  const pageNum = useRef(1)
  const {fetchData: productFetchData, state: productState} = GetProductListApi()
  const getProductKindId = async (e) => {
    filtrate.current.size = 5
    pageNum.current = 1
    filtrate.current.product_kind_id = e.id
    getProductList()
  }
  const getProductList = async () => {
    filtrate.current.size = filtrate.current.size * pageNum.current
    const {data,total} = await productFetchData(filtrate.current)
    setProductData({...productData,list:data.list,total})
  }

  //上拉加载数据
  const getScrolltolower = () => {
    if(productData.list.length >= productData.total) {
      setProductData({...productData, hasMore: false})
    } else {
      pageNum.current++
      getProductList()
    }
  }


  const [showShopCart, setShowShopCart] = useState(false)
  
  //列表下拉刷新
  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
  const getRefresherRefresh = async () => {
    filtrate.current.size = 5
    pageNum.current = 1
    getProductList()
  }
  useEffect(() => {
    setRefresherTriggeredStatus(productState.loading)
  }, [productState.loading])
  
  //页面下拉刷新
  const res = useManualPullDownRefresh()
  

  return (
    <MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
      <View className={styles.main}>
        <Banner/>
        <View className={styles.search}>
          <View className={styles.search_collect}>我的收藏</View>
          <View className={styles.search_input}>
            <Search disabled={true} style={{width: '263rpx'}} clickOnSearch={() => goLink('/pages/searchList/search')}/>
          </View>
        </View>
        <View className={styles.products}>
          <SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={productData.hasMore} selfOnScrolltolower={() =>  getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} 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>
  )
}