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

export default function FilterForArea (props) {

  const { change = () => {}, defaultValue = '-' } = props
  const [AreaList] = useState([
    {name: '不限', id: '-'},
    {name: '50㎡以下', id: '0-50'},
    {name: '50-70㎡', id: '50-70'},
    {name: '70-90㎡', id: '70-90'},
    {name: '90-110㎡', id: '90-110'},
    {name: '110-130㎡', id: '110-130'},
    {name: '130-150㎡', id: '130-150'},
    {name: '150-200㎡', id: '150-200'},
    {name: '200㎡以上', id: '200-'},
  ])
  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>
  )
}
