import { View } from '@tarojs/components'
import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
import Popup from '@/components/popup'
import { debounce } from '@/common/util'
import { alert } from '@/common/common'
import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import Tag from './components/Tag';
import Sort from './components/Sort';
import Search from '@/components/search'
import ItemLiist from "./components/ItemList"
import InfiniteScroll from '@/components/infiniteScroll'
import { ClientListApi } from '@/api/order'

export default () => {

    const [searchField, setSearchField] = useState<{ page: number; size: number; order_no: string }>({
        page: 1,
        size: 10,
        order_no: '',
    })

    const [orderData, setOrderData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
    const { fetchData: listFetchData, state: orderState } = ClientListApi()
    const getOrderList = async () => {
        let res = await listFetchData({
            ...getFilterData(searchField)
        })
        setOrderData((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
        setRefresherTriggeredStatus(() => false)
    }

    //监听筛选条件变化
    useEffect(() => {
        getOrderList()
    }, [searchField])


    //输入了搜索关键字
    const getSearchData = useCallback((e) => {
        // pageNum.current.page = 1
        // setOrderData(() => ({ list: [], total: 0 }))
        // setSearchField((val) => ({ ...val, order_no: e, size: 10 }))
    }, [])

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

    //上拉加载数据
    const pageNum = useRef({ size: searchField.size, page: searchField.page })
    const getScrolltolower = useCallback(() => {
        if (orderData.list.length < orderData.total) {
            pageNum.current.page++
            const size = pageNum.current.size * pageNum.current.page
            setSearchField({ ...searchField, size })
        }
    }, [orderData])

    //列表下拉刷新
    const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
    const getRefresherRefresh = async () => {
        pageNum.current.size = 1
        setRefresherTriggeredStatus(true)
        setSearchField((val) => ({ ...val, size: 10 }))
    }

    //选择排序
    const handSort = useCallback((val) => {
        console.log(val, 456456)
    }, [])

    return (
        <View className={styles.mainBox}>
            <View className={styles.topBox}>
                <View className={styles.search_input}>
                    <Search placeholder='搜索客户名称、电话、业务员' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
                </View> 
                <View className={styles.menuBox}>
                    <Sort handSort={handSort}></Sort>
                    <Tag></Tag>
                    <Tag></Tag>
                </View>
            </View>
            <View className={styles.totalFont}>共 36 个客户</View>
            <View className={styles.order_list}>
                <InfiniteScroll
                    statusMore={statusMore}
                    selfonScrollToLower={getScrolltolower}
                    refresherEnabled={true}
                    refresherTriggered={refresherTriggeredStatus}
                    selfOnRefresherRefresh={getRefresherRefresh}>
                    {orderData?.list?.map((item, index) => {
                        return (
                            <ItemLiist obj={item}></ItemLiist>
                        )
                    })}
                </InfiniteScroll>
            </View>
            <View className={styles.bottom_box}>
                <View className={styles.bottom_btn}>新建用户</View>
            </View>
        </View>
    )
}