import { useState, useEffect } from 'react'
// import Taro from '@tarojs/taro'
import { ScrollView, Image, Input } from '@tarojs/components'
import { fetch } from '@/utils/request'
import { API_CUSTOMER_LIST } from '@/constants/api'
import './index.scss'
import StatCustomerListItem from '../StatCustomerListItem/index'

export default function FollowCustomer () {

  const [PageList, setPageList] = useState([])
  const [pageNumber, setPageNumber] = useState(1)
  const [HasNextPage, setHasNextPage] = useState(true)
  const [IsPull, setPull] = useState(false)

  const [StatusMenu] = useState([
    { name: '全部状态', id: 0 },
    { name: '报备', id: 1 },
    { name: '到访', id: 2 },
    { name: '认筹', id: 3 },
    { name: '签约', id: 4 }
  ])

  const [TimeMenu] = useState([
    { name: '全部', id: 1 },
    { name: '7天未成交', id: 7 },
    { name: '15天未成交', id: 15 }
  ])
  const [FormData, setFormData] = useState({name: '', status: 0, day: 1})

  useEffect(() => {
    GetPageList()
  }, [pageNumber])

  useEffect(() => {
    if(pageNumber === 1) {
      GetPageList()
    } else {
      setPageNumber(1)
    }
  }, [FormData])

  const GetPageList = () => {
    setHasNextPage(false)
    fetch({ url: `${API_CUSTOMER_LIST}/follow`, method: 'get', payload: { pageNumber, pageSize: 10, ...FormData, day: FormData.day === 1 ? '' : FormData.day } }).then((res) => {
      setPageList(pageNumber === 1 ? res.records || [] : PageList.concat(res.records || []))
      setHasNextPage(res.current < res.pages)
      setPull(false)
    })
  }

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

  const CutStatus = (item) => {
    return () => {
      setFormData({...FormData, status: item.id})
    }
  }

  const CutTime = (item) => {
    return () => {
      setFormData({...FormData, day: item.id})
    }
  }

  const SearchConfirm = (e) => {
    setFormData({...FormData, name: e.detail.value})
  }

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

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

  return (
    <view className='components FollowCustomer'>
      <ScrollView scroll-y refresher-enabled refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} onscrolltolower={PageLoadMore} refresher-background='#fff'>
        <view className='PageContent'>

          <view className='Search'>
            <view>
              <text className='iconfont icon-sousuo'></text>
              {/* <text>请输入用户名/手机号/到访时间搜索</text> */}
              <Input confirm-type='search' placeholder='请输入用户名/手机号/到访时间搜索' onConfirm={SearchConfirm}></Input>
            </view>
          </view>

          <text>状态筛选</text>
          <view className='CheckBoxList'>
            {
              StatusMenu.map((item, index) => (
                <view key={`StatusItem-${index}`} onClick={CutStatus(item)}>
                  <text>{item.name}</text>
                  {
                    FormData.status === item.id &&
                    <Image mode='widthFix' src={require('@/assets/findHouse-icon1.png')}></Image>
                  }
                </view>
              ))
            }
          </view>

          <text>时间筛选</text>
          <view className='CheckBoxList'>
            {
              TimeMenu.map((item, index) => (
                <view key={`TimeItem-${index}`} onClick={CutTime(item)}>
                  <text>{item.name}</text>
                  {
                    FormData.day === item.id &&
                    <Image mode='widthFix' src={require('@/assets/findHouse-icon1.png')}></Image>
                  }
                </view>
              ))
            }
          </view>

          <text>结果</text>
          <view className='List'>
            {
              PageList.map((item, index) => (
                <StatCustomerListItem key={`ListItem-${index}`} data={item} showStatus></StatCustomerListItem>
              ))
            }
          </view>

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

        </view>
      </ScrollView>
    </view>
  )
}
