import { FC, memo, useCallback, useEffect, useState } from 'react'
import SegmentedControl from '@/components/segmentedControl'
import { EnumSaleorderStatus } from '@/api/index'

interface PropsType {
  onChangeStatus?: (data: { id: number; name: string }) => void
}

const DeliveryStatusList = (props: PropsType) => {
  const { onChangeStatus } = props
  const { fetchData } = EnumSaleorderStatus()
  const [statusList, setStatusList] = useState([
    {
      id: -1,
      name: '全部',
    },
  ])
  // 请求
  const getDeliveryStatusList = async() => {
    const res = await fetchData()
    console.log(res.data.list)
    setStatusList(
      res.data.list.filter((item) => {
        return item.id === 3 || item.id === 4 // 待发货  已完成
      }),
    )
  }

  useEffect(() => {
    getDeliveryStatusList()
  }, [])

  // //状态改变
  const changeStatus = useCallback(
    (data: { id: number; name: string }) => {
      onChangeStatus && onChangeStatus({ id: data.id, name: data.name })
    },
    [onChangeStatus],
  )
  return <SegmentedControl list={statusList} onSelect={changeStatus} defaultId={statusList[0].id} />
}
export default memo<PropsType>(DeliveryStatusList)
