import { Text, View } from '@tarojs/components'
import { useDidHide, useDidShow } from '@tarojs/taro'
import { useCallback, useEffect, useRef, useState } from 'react'
import ColorItem from '../colorItem'
import styles from './index.module.scss'
import IconFont from '@/components/iconfont/iconfont'
import SelectList from '@/components/selectList'
import Search from '@/components/search'
import { GetCustomCodeLApi } from '@/api/codeManage'
import TimePickerPopup from '@/components/timePickerPopup'
import { alert } from '@/common/common'

export default () => {
  const [formData, setFormData] = useState<{ sale_start_time?: string; sale_end_time?: string; any_query?: string }|null>(null)
  // 获取码单列表
  const [list, setList] = useState<any[]>([])
  const { fetchData: getCustomCode } = GetCustomCodeLApi()
  const onCustomCode = async() => {
    const res = await getCustomCode(formData)
    setList(() => res.data?.list)
  }
  const getDataStatus = useRef(false)
  useEffect(() => {
    getDataStatus && onCustomCode()
    getDataStatus.current = true
  }, [formData])

  useDidShow(() => {
    onCustomCode()
  })

  const onSearch = (val) => {
    setFormData(e => ({ ...e, any_query: val }))
  }

  const [showTime, setShowTime] = useState(false)
  const handClose = useCallback(() => {
    setShowTime(false)
  }, [])
  const onSelectDate = useCallback((val) => {
    if (!val.value?.start && !val.value?.end) {
      alert.error('请选择日期')
    }
    else {
      setFormData(e => ({ ...e, sale_start_time: val.value.start, sale_end_time: val.value.end }))
    }
    console.log('val::', val)
  }, [])
  return <View>
    <View className={styles.code_list_search}>
      <View className={styles['code_list_search--code']}><Search placeholder="请输入单据抬头/客户/单号" changeOnSearch={onSearch} debounceTime={300} /></View>
      <View className={styles['code_list_search--data']} onClick={() => setShowTime(true)}>
        <IconFont name="icon-riqi" size={43} />
        <Text>日期</Text>
      </View>
    </View>
    <View className={styles.code_list_con}>
      {list?.map((item) => {
        return <View key={item.id}>
          <ColorItem info={item} />
        </View>
      })}
    </View>
    <TimePickerPopup showTime={showTime} end={formData?.sale_end_time} start={formData?.sale_start_time} closePopup={handClose} onSelectDate={onSelectDate} />
  </View>
}
