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

export default function FilterForPrice (props) {

  const { change = () => { }, priceType = 'average', price = '-' } = props
  const [PriceTypeList] = useState([
    { name: '单价', id: 'average' },
    { name: '总价', id: 'total' }
  ])
  const [CurrentTypeId, setCurrentTypeId] = useState(priceType || 'average')
  const [AverageList] = useState([
    { name: '不限', id: '-' },
    { name: '10000/㎡以下', id: '0-10000' },
    { name: '10000-20000元/㎡', id: '10000-20000' },
    { name: '20000-30000元/㎡', id: '20000-30000' },
    { name: '30000-50000元/㎡', id: '30000-50000' },
    { name: '50000-70000元/㎡', id: '50000-70000' },
    { name: '70000-100000元/㎡', id: '70000-100000' },
    { name: '100000元/㎡以上', id: '100000-' },
  ])
  const [TotalList] = useState([
    { name: '不限', id: '-' },
    { name: '100万以下', id: '0-1000000' },
    { name: '100-150万', id: '1000000-1500000' },
    { name: '150-200万', id: '1500000-2000000' },
    { name: '200-250万', id: '2000000-2500000' },
    { name: '250-500万', id: '2500000-5000000' },
    { name: '500-1000万', id: '5000000-10000000' },
    { name: '1000万以上', id: '10000000-' },
  ])
  const [CurrentId, setCurrentId] = useState(price || '-')

  const CutPrice = (id) => {
    return () => {
      setCurrentId(id)
      change({ priceType: CurrentTypeId, price: id })
    }
  }

  const CutType = (id) => {
    return () => {
      setCurrentTypeId(id)
    }
  }

  return (
    <view className='components FilterForPrice flex-h'>
      <view className='TypeList'>
        {
          PriceTypeList.map((item, index) => (
            <text key={`typeItem${index}`} className={CurrentTypeId === item.id ? 'active' : ''} onClick={CutType(item.id)}>{item.name}</text>
          ))
        }
      </view>
      <view className='flex-item'>

        {/* 单价 */}
        {
          CurrentTypeId === 'average' &&
          <view>
            {
              AverageList.map((item, index) => (
                <view key={`ListItem${index}`} className={CurrentId === item.id ? 'flex-h active' : 'flex-h'} onClick={CutPrice(item.id)}>
                  <text>{item.name}</text>
                  <view className='flex-item'></view>
                  {
                    CurrentId === item.id &&
                    <text className='iconfont icon-gou1'></text>
                  }
                </view>
              ))
            }
          </view>
        }

        {/* 总价 */}
        {
          CurrentTypeId === 'total' &&
          <view>
            {
              TotalList.map((item, index) => (
                <view key={`ListItem${index}`} className={CurrentId === item.id ? 'flex-h active' : 'flex-h'} onClick={CutPrice(item.id)}>
                  <text>{item.name}</text>
                  <view className='flex-item'></view>
                  {
                    CurrentId === item.id &&
                    <text className='iconfont icon-gou1'></text>
                  }
                </view>
              ))
            }
          </view>
        }

      </view>
    </view>
  )
}
