import { useState, useEffect } from 'react'
import '@/assets/css/iconfont.css'
import { Image, Slider, Textarea } from '@tarojs/components'
import './index.scss'
import questions from './formData'

export default function RentingHouse (props) {
  const { change = () => { }, toSubmit = () => {}, AreaInfo = {}, selectArea = () => {} } = props

  const [FormData, setFormData] = useState(questions)

  const [StepId, setStepId] = useState(1)
  const [StepRange, setStepRange] = useState([0, 4])

  useEffect(() => {
    if(StepId === 1) {
      setStepRange([0, 4])
    } else if(StepId === 2) {
      setStepRange([4, 6])
    }
    change(StepId)
  }, [StepId])

  const CutCheckbox = (item, index) => {
    return () => {
      let newFormData = [...FormData]
      newFormData[index].resultId = item.id
      newFormData[index].result = item.name
      setFormData([...newFormData])
    }
  }

  const Rangehange = (e, index) => {
    let newFormData = [...FormData]
    newFormData[index].result = e.detail.value
    setFormData([...newFormData])
  }

  const remarkInput = (e, index) => {
    let newFormData = [...FormData]
    newFormData[index].remark = e.detail.value
    setFormData([...newFormData])
  }

  const textareaInput = (e, index) => {
    let newFormData = [...FormData]
    newFormData[index].result = e.detail.value
    setFormData([...newFormData])
  }

  const NextStep = () => {
    if (StepId < 2) {
      setStepId(StepId + 1)
    } else {
      toSubmit(FormData)
    }
  }

  const PrevStep = () => {
    if (StepId > 1) {
      setStepId(StepId - 1)
    }
  }

  return (
    <view className='components BuyHouse'>
      {
        FormData.map((item, index) => (
          <view className='Step' key={`Form-${index}`}>
            {
              index >= StepRange[0] && index < StepRange[1] &&
              <view>
                <text>{item.question}</text>
                {
                  item.type === 'checkbox' &&
                  <view className='CheckList'>
                    {
                      item.options.map((subItem, subIndex) => (
                        <view key={`${item.key}-${subIndex}`} className={item.resultId === subItem.id ? 'active' : ''} onClick={CutCheckbox(subItem, index)}>
                          {subItem.name}
                          <Image mode='heightFix' src={require('@/assets/findHouse-icon1.png')}></Image>
                        </view>
                      ))
                    }
                  </view>
                }
                {
                  item.type === 'checkbox' && item.remark !== undefined &&
                  <view className='Textarea'>
                    <Textarea placeholder='请说出您的其他需求，让我们更好的为您服务！' onInput={(e) => {remarkInput(e, index)}} />
                  </view>
                }
                {
                  item.type === 'range' &&
                  <view className='RangeList flex-h'>
                    <view className='flex-item'>
                      <Slider activeColor='#193C83' block-color='#fff' onChange={(e) => { Rangehange(e, index) }} min={item.options[0]} max={item.options[1]} show-value />
                    </view>
                    <text>元</text>
                  </view>
                }
                {
                  item.type === 'select' &&
                  <view className='Area'>
                    <view className='flex-h' onClick={selectArea}>
                      {
                        item.key === 'district' &&
                        <text className='iconfont icon-dingwei'></text>
                      }
                      <text>{AreaInfo.name || '不限'}</text>
                      <view className='flex-item'></view>
                      <text className='iconfont icon-jiantoudown'></text>
                    </view>
                  </view>
                }
                {
                  item.type === 'textarea' &&
                  <view className='Textarea'>
                    <Textarea placeholder='请说出您的其他需求，让我们更好的为您服务！' onInput={(e) => {textareaInput(e, index)}} />
                  </view>
                }
              </view>
            }
          </view>
        ))
      }

      <view className='Btn'>
        <text className='active' onClick={NextStep}>下一步</text>
        <text onClick={PrevStep}>返回</text>
      </view>
    </view>
  )
}