import { Space, Select } from 'antd'
import { useEffect, useState } from 'react'
import styles from '../../index.module.scss'
import api, { RegionResp } from '../../api'

type Props = {
  onChange: (item: RegionResp) => void
}

export default function RegionItem(props: Props) {
  const [provinceList, setProvinceList] = useState<RegionResp[]>([])
  const [cityList, setCityList] = useState<RegionResp[]>([])
  const [selectCity, setSelectCity] = useState<number>()
  useEffect(() => {
    api.region().then((res) => {
      setProvinceList(res?.result || [])
    })
  }, [])

  const onProvinceChange = (value: number, item: any) => {
    console.log('省', value, item)
    setCityList(item.childInfo || [])
    setSelectCity(undefined)
    props.onChange(item)
  }

  const onCityChange = (value: number, item: any) => {
    console.log('市', value)
    setSelectCity(value)
    props.onChange(item)
  }
  return (
    <div className={styles.filterItem}>
      <div className={styles.filterItemTitle}>地域：</div>
      <div className={styles.filterItemMain}>
        <Space size={40}>
          <Select
            bordered={false}
            popupMatchSelectWidth={false}
            placeholder="选择省"
            onChange={onProvinceChange}
            options={provinceList.map((item) => {
              return {
                ...item,
                value: item.id,
                label: item.name,
              }
            })}
          />
          {/* <Select
            value={selectCity}
            bordered={false}
            popupMatchSelectWidth={false}
            placeholder="选择市"
            onChange={onCityChange}
            options={cityList.map((item) => {
              return {
                ...item,
                value: item.id,
                label: item.name,
              };
            })}
          /> */}
        </Space>
      </div>
    </div>
  )
}
