import { useState, useEffect, useRef } from 'react'
import withLayout from '@/layout'
import { ScrollView, Input } from '@tarojs/components'
import '@/assets/css/iconfont.css'
import { fetch } from '@/utils/request'
import { API_CLIENT_LIST, API_CHANNEL_CLIENT_LIST } from '@/constants/api'
import { ROLE_CODE } from '@/constants/user'
import DatePicker from '@/components/DateRangePicker'
import MyCustomerListItem from '../components/MyCustomerListItem/index'
import TypePicker from './TypePicker'
import './index.scss'

export default withLayout((props) => {
  const { person } = props
  const [PageList, setPageList] = useState([])
  const [IsPull, setPull] = useState(false)
  const [ShowDatePicker, setShowDatePicker] = useState(false)
  const [pageNumber, setPageNumber] = useState(1)
  const [HasNextPage, setHasNextPage] = useState(true)
  const [dateRange, setDateRange] = useState([])
  const [bizType, setBizType] = useState('')
  const [name, setName] = useState()
  const GetPageList = useRef()

  GetPageList.current = () => {
    setHasNextPage(false)
    const url = ROLE_CODE.CHANNEL_AGENT === person.personType ? API_CHANNEL_CLIENT_LIST : API_CLIENT_LIST
    const [startDate, endDate] = dateRange
    const payload = {
      pageNumber,
      name,
      status: bizType ? bizType - 0 : undefined,
      pageSize: 10,
      startDate: startDate ? `${startDate}T00:00:00.000Z` : undefined,
      endDate: endDate ? `${endDate}T23:59:59.999Z` : undefined,
    }
    fetch({ url, payload }).then((res) => {
      setPageList(pageNumber === 1 ? res.records || [] : PageList.concat(res.records || []))
      setHasNextPage(res.current < res.pages)
      setPull(false)
    })
  }

  const handleNameConfirm = (e) => {
    setName(e.detail.value)
  }

  const PageRefresh = () => { // 页面下拉刷新回调
    setPull(true)
  }

  const PageLoadMore = () => { // 页面上拉加载更多
    if (HasNextPage) {
      setPageNumber(pageNumber + 1)
    }
  }

  useEffect(() => {
    GetPageList.current()
  }, [pageNumber, bizType, name, dateRange])

  useEffect(() => { // 下拉刷新触发
    if (IsPull) {
      if (pageNumber === 1) {
        GetPageList.current()
      } else {
        setPageNumber(1)
      }
    }
  }, [IsPull])

  const DateChange = (e) => {
    setDateRange(e)
    setShowDatePicker(false)
  }

  return (
    <view className='Page myCustomer flex-v'>

      <view className='Filter'>
        <view className='flex-h'>
          <view className='Time' onClick={() => { setShowDatePicker(true) }}>
            <text>选择时间</text>
            <text className='iconfont icon-sanjiaoxingdown'></text>
          </view>
          <view className='Type'>
            <TypePicker value={bizType} onChange={setBizType} />
            <text className='iconfont icon-sanjiaoxingdown'></text>
          </view>
          <view className='flex-item'></view>
          <view className='Search'>
            <text className='iconfont icon-sousuo'></text>
            <Input placeholder='请输入' onConfirm={handleNameConfirm}></Input>
          </view>
        </view>
      </view>

      <view className='flex-item'>
        <view>

          <DatePicker visable={ShowDatePicker} close={() => { setShowDatePicker(false) }} change={DateChange}></DatePicker>

          <ScrollView scroll-y refresher-enabled refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} onscrolltolower={PageLoadMore} refresher-background='#fff'>
            <view className='PageContent'>
              <view className='List'>
                {
                  PageList.map((item, index) => (
                    <view>
                      <MyCustomerListItem data={item} key={`MyCustomerListItem-${index}`}></MyCustomerListItem>
                    </view>
                  ))
                }
              </view>

              {/* bottom */}
              <view className='PageBottom'>
                <text>已经到底了~</text>
              </view>

            </view>
          </ScrollView>
        </view>
      </view>

    </view>
  )
})
