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

export default function FilterForHouseType (props) {

  const { change = () => { }, Cancel = () => { }, defaultValue = [] } = props
  const [CityAreaList, setCityAreaList] = useState([
    { name: '不限', id: '-', Selected: true },
    { name: '一室', id: 1, Selected: false },
    { name: '两室', id: 2, Selected: false },
    { name: '三室', id: 3, Selected: false },
    { name: '四室', id: 4, Selected: false },
    { name: '五室以上', id: 5, Selected: false }
  ])

  useEffect(() => {
    InitList(CityAreaList, defaultValue, (arr) => {
      setCityAreaList(arr)
    })
  }, [])

  const InitList = (list, defaultList, callback = () => { }) => {
    let Arr = list.map((item) => { return { ...item, Selected: false } })
    if (defaultList.length) {
      defaultList.map((item) => {
        Arr.map((subItem) => {
          if (item === subItem.id) {
            subItem.Selected = true
          }
        })
      })
    } else {
      Arr[0].Selected = true
    }
    callback(Arr)
  }

  const CutArea = (item, index) => {
    return () => {
      CutFilter(CityAreaList, item, index, (arr) => {
        setCityAreaList(arr)
      })
    }
  }

  const CutFilter = (list, item, index, callback = () => { }) => {
    let Arr = [...list]
    if (item.id === '-') {
      if (!item.Selected) {
        Arr.map((aItem) => { if (aItem.id !== '-') aItem.Selected = false })
        Arr[index].Selected = !item.Selected
      }
    } else {
      if (item.Selected) { // 取消单个勾选
        let Bool = false
        Arr.map((aItem) => { if (aItem.Selected && aItem.id !== '-' && item.id !== aItem.id) Bool = true })
        if (!Bool) Arr[0].Selected = true
        Arr[index].Selected = !item.Selected
      } else { // 单个勾选
        Arr[index].Selected = !item.Selected
        let Bool = false
        Arr.map((aItem) => { if (!aItem.Selected && aItem.id !== '-') Bool = true })
        if (!Bool) {
          Arr.map((aItem) => { if (aItem.id !== '-') aItem.Selected = false })
          Arr[0].Selected = true
        } else {
          Arr[0].Selected = false
        }
      }
    }
    callback(Arr)
  }

  const Sure = () => {
    let Arr = []
    CityAreaList.map((item) => { if (item.Selected && item.id !== '-') Arr.push(item.id) })
    change({ houseType: Arr })
  }

  return (
    <view className='components FilterForHouseType'>
      {
        CityAreaList.map((item, index) => (
          <view className='ListItem' key={`ListItem${index}`} onClick={CutArea(item, index)}>
            <view>
              <view>
                <text>{item.name}</text>
                <Image mode='heightFix' className={item.Selected ? 'active' : ''} 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>
  )
}
