import { useState } from 'react'
import { Image } from '@tarojs/components'
import './index.scss'

export default function FilterForHouseSort (props) {

  const { change = () => {}, Cancel = () => { }, defaultValue = '-' } = props
  const [CityAreaList] = useState([
    {name: '不限', id: '-'},
    {name: '价格由低到高', id: 'price-asc'},
    {name: '价格由高到低', id: 'price-desc'},
    {name: '开盘由近到远', id: 'openingDate-asc'},
    {name: '开盘由远到近', id: 'openingDate-desc'},
  ])
  const [CurrentId, setCurrentId] = useState(defaultValue)

  const CutArea = (id) => {
    return () => {
      setCurrentId(id)
    }
  }

  const Sure = () => {
    change({name: 'orderBy', value: CurrentId})
  }

  return (
    <view className='components FilterForHouseSort'>
      {
        CityAreaList.map((item, index) => (
          <view className='ListItem' key={`ListItem${index}`} onClick={CutArea(item.id)}>
            <view>
              <view>
                <text>{item.name}</text>
                {
                  CurrentId === item.id &&
                  <Image mode='heightFix' src={require('@/assets/findHouse-icon1.png')}></Image>
                }
              </view>
            </view>
          </view>
        ))
      }
      <view className='Btn flex-h'>
        <view className='flex-item'>
          <text onClick={Cancel}>取消</text>
        </view>
        <view className='flex-item'>
          <text onClick={Sure}>保存</text>
        </view>
      </view>
    </view>
  )
}
