import { useState } from 'react'
import './index.scss'

export default function FilterForArea (props) {

  const { change = () => {}, defaultValue = '-' } = props
  const [AreaList] = useState([
    {name: '不限', id: '-'},
    {name: '60㎡以下', id: '0-60'},
    {name: '60-85㎡', id: '60-85'},
    {name: '85-100㎡', id: '85-100'},
    {name: '100-125㎡', id: '100-125'},
    {name: '125-145㎡', id: '125-145'},
    {name: '145-180㎡', id: '145-180'},
    {name: '180-220㎡', id: '180-220'},
    {name: '220㎡以上', id: '220-'},
  ])
  const [CurrentId, setCurrentId] = useState(defaultValue)

  const CutArea = (id) => {
    return () => {
      setCurrentId(id)
      change({name: 'area', value: id})
    }
  }

  return (
    <view className='components FilterForArea'>
      {
        AreaList.map((item, index) => (
          <view key={`ListItem${index}`} className={CurrentId === item.id ? 'flex-h active' : 'flex-h'} onClick={CutArea(item.id)}>
            <text>{item.name}</text>
            <view className='flex-item'></view>
            {
              CurrentId === item.id &&
              <text className='iconfont icon-gou1'></text>
            }
          </view>
        ))
      }
    </view>
  )
}
