import { useState } from 'react'
import { ScrollView } from '@tarojs/components'
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: '5000/㎡以下', id: '0-5000' },
    { name: '5000-10000元/㎡', id: '5000-10000' },
    { name: '10000-15000元/㎡', id: '10000-15000' },
    { name: '15000-20000元/㎡', id: '15000-20000' },
    { name: '20000-25000元/㎡', id: '20000-25000' },
    { name: '25000-30000元/㎡', id: '25000-30000' },
    { name: '30000-35000元/㎡', id: '30000-35000' },
    { name: '35000-40000元/㎡', id: '35000-40000' },
    { name: '40000-50000元/㎡', id: '40000-50000' },
    { name: '50000-60000元/㎡', id: '50000-60000' },
    { name: '60000-80000元/㎡', id: '60000-80000' },
    { name: '80000-100000元/㎡', id: '80000-100000' },
    { name: '100000元/㎡以上', id: '100000-' },
  ])
  const [TotalList] = useState([
    { name: '不限', id: '-' },
    { name: '50万以下', id: '0-50' },
    { name: '50-100万', id: '50-100' },
    { name: '100-150万', id: '100-150' },
    { name: '150-200万', id: '150-200' },
    { name: '200-250万', id: '200-250' },
    { name: '250-300万', id: '250-300' },
    { name: '300-400万', id: '300-400' },
    { name: '400-500万', id: '400-500' },
    { name: '500-600万', id: '500-600' },
    { name: '600-700万', id: '600-700' },
    { name: '700-800万', id: '700-800' },
    { name: '800-900万', id: '800-900' },
    { name: '900-1000万', id: '900-1000' },
    { name: '1000-1200万', id: '1000-1200' },
    { name: '1200-1500万', id: '1200-1500' },
    { name: '1500万以上', id: '1500-' },
  ])
  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'>
        <ScrollView scroll-y>


          {/* 单价 */}
          {
            CurrentTypeId === 'average' &&
            <view className='ListContent'>
              {
                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 className='ListContent'>
              {
                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>
          }

        </ScrollView>
      </view>
    </view>
  )
}
