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 { goLink } from '@/common/common'
import styles from './index.module.scss'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useSelector } from "@/reducers/hooks";
import Taro, { Events, useDidShow, usePullDownRefresh } from '@tarojs/taro'
import { GetProductKindListApi, GetProductListApi } from '@/api/material'
import useLogin from '@/use/useLogin'
import { dataLoadingStatus } from '@/common/util'

export default () => {

  const { checkLogin } = useLogin()
  useDidShow(async () => {
    await checkLogin()
  })

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

  //获取面料种类
  const [kindData, setKindData] = useState<any>({ list: [], defaultId: 0 })
  const { fetchData } = GetProductKindListApi()
  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 } = GetProductListApi()
  //获取数据方法
  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 }))
    // setHasMore(true)
  }, [])

  //上拉加载数据
  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 res = useManualPullDownRefresh()
  // usePullDownRefresh(() => {
  //   console.log('123')
  // })

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

  useEffect(() => {
    getShow()
  }, [])
  // const [time, setShow] = useState(false)
  //拿状态存储的东西判断
  const { adminUserInfo } = useSelector(state => state.userInfo);
  const getShow = () => {
    if (adminUserInfo?.authentication_status === 0 || adminUserInfo?.authentication_status === 1 || adminUserInfo?.authentication_status === 2 || adminUserInfo?.authentication_status === 3) {
      //倒计时弹出去认证
      const countTime: any = 60
      //获取倒计时的变量
      var time = parseInt(countTime);
      const countDown = setInterval(() => {
        if (time == 0) {
          Taro.showModal({
            title: '提示',
            content: '你还未认证,认证后解锁更多功能',
            cancelText: '稍后认证',
            confirmText: '去认证',
            success: function (res) {
              if (res.confirm) {
                Taro.navigateTo({ url: '/pages/certification/index' })
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
          //清除定时器
          clearInterval(countDown);
        } else {
          time--;
        }
      }, 1000)
    }
  }

  //检查认证是否认证
  const checkShow = () => {
    if (adminUserInfo.authentication_status === 0 || adminUserInfo.authentication_status === 1 || adminUserInfo.authentication_status === 2 || adminUserInfo.authentication_status === 3) {
      Taro.showModal({
        title: '提示',
        content: '你还未认证,认证后解锁更多功能',
        cancelText: '稍后认证',
        confirmText: '去认证',
        success: function (res) {
          if (res.confirm) {
            Taro.navigateTo({ url: '/pages/certification/index' })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    } else {
      setShowShopCart(!showShopCart)
    }

  }


  return (
    <MoveBtn onClick={() => checkShow()}>
      <View className={styles.main}>
        <Banner />
        <View className={styles.search}>
          <View className={styles.search_collect}>我的收藏</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>
  )
}