import Search from '@/components/search'
import { View } from '@tarojs/components'
import Taro, { useDidShow } from '@tarojs/taro'
import { FC, useCallback, useMemo, useState } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import IconText from '@/components/iconText'
import InfiniteScroll from '@/components/infiniteScroll'
import ItemList from './components/shoppingCartItem/index'
import BottomBtns from '@/components/BottomBtns'
import { formatPriceDiv } from '@/common/format'
import BottomSettleBar from './components/bottomSettleBar'
import BottomEditBar from './components/bottomEditBar'

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

  const [isManage, setManage] = useState(false)

  // 管理
  const onStartToManage = () => {
    setManage((isManage) => !isManage)
  }

  const [selectedAmount, setSelectedAmount] = useState(0)

  // 结算
  const handleSettleAccount = () => {}
  // 删除
  const handleDelete = () => {}

  const handleSelectAllCheckbox = (isSelectAll: boolean) => {
    console.log('handleSelectAllCheckbox', isSelectAll)
  }

  return (
    <View className={classnames('flex-col', styles.shopping)}>
      <View className={styles['shopping--topBar']}>
        <Search placeholder='请输入客户名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}>
          <View className={styles.flexBox} onClick={onStartToManage}>
            {isManage ? (
              <IconText iconName='icon-guanlidingdan' text='取消' customClass={styles['icon--manage--cancel']} />
            ) : (
              <IconText iconName='icon-guanlidingdan' text='管理' />
            )}
          </View>
        </Search>
      </View>
      <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
        <View className={classnames('flex-item')}>
          {/* <InfiniteScroll
            statusMore={statusMore}
            selfonScrollToLower={getScrolltolower}
            refresherEnabled={true}
            refresherTriggered={refresherTriggeredStatus}
            selfOnRefresherRefresh={getRefresherRefresh}>
            {orderData?.list?.map((item, index) => {
              return (
                <View key={item.id} className={styles.order_item_con}>
                  <ItemList obj={item} key={index}></ItemList>
                </View>
              )
            })}
          </InfiniteScroll> */}
          <ItemList></ItemList>
        </View>
        {isManage ? (
          <BottomEditBar onDelete={handleDelete} onSelectCheckbox={handleSelectAllCheckbox}></BottomEditBar>
        ) : (
          <BottomSettleBar onSettleAccount={handleSettleAccount} amount={selectedAmount}></BottomSettleBar>
        )}
      </View>
    </View>
  )
}
export default Shopping