import { useEffect, useState } from 'react'
import withLayout from '@/layout'
import { ScrollView, Image } from '@tarojs/components'
import { fetch } from '@/utils/request'
import { API_HELP_FIND_HOUSE_SUBMIT } from '@/constants/api'
import '@/assets/css/iconfont.css'
import { useSelector } from 'react-redux'
import AreaPickerView from '@/components/AreaPickerView/index'
import { getFeedbackSetting } from '@/services/feedback'
import './index.scss'
import BuyHouse from './components/BuyHouse/index'
import RentingHouse from './components/RentingHouse/index'
import HousePurchasing from './components/HousePurchasing/index'
import SubmitBuyHouseResult from './components/SubmitBuyHouseResult/index'

export default withLayout(() => {

  const user = useSelector(state => state.user)
  const [DemandList] = useState([
    { name: '我要买房', id: 1, icon: require('@/assets/index-icon20.png'), spell: 'MAI FANG' },
    { name: '我要租房', id: 2, icon: require('@/assets/index-icon21.png'), spell: 'ZU FANG' },
    { name: '海外置业', id: 3, icon: require('@/assets/index-icon22.png'), spell: 'ZHI YE' }
  ])
  const [CurrentDemandId, setCurrentDemandId] = useState(1)
  const [ShowDemand, setShowDemand] = useState(true)
  const [ResultList, setResultList] = useState([])
  const [ShowPopup, setShowPopup] = useState(false)
  const [ShowCitysPopup, setShowCitysPopup] = useState(false)
  const [AreaInfo, setAreaInfo] = useState({})
  const [setting, setSetting] = useState({})

  const CutDemandId = (id) => {
    return () => {
      setCurrentDemandId(id)
    }
  }

  const StepChange = (id) => {
    setShowDemand(id === 1)
  }

  const AreaChange = (e) => {
    setAreaInfo(e[2])
    setShowCitysPopup(false)
  }

  const submitForm = (data) => {
    data = data || []
    let params = []
    data.map((item) => {
      if (item.key === 'budget') {
        params.push({ ...item, key: 'minPrice', result: CurrentDemandId === 2 ? item.options[0] : item.options[0] * 10000 })
        params.push({ ...item, key: 'maxPrice', result: CurrentDemandId === 2 ? item.result === '' ? 5000000 : item.result : item.result === '' ? 5000000 : item.result * 10000 })
      } else {
        if (item.result !== '' || item.resultId !== null) {
          params.push(item)
        }
      }
    })
    params.push({ question: '创建人小程序人员', result: user?.userInfo?.person?.personId, key: 'personId' })
    if(CurrentDemandId !== 3) {
      params.push({ question: '意向区域', result: AreaInfo.id, key: 'intentArea' })
    }
    let payload = {}
    params.map((item) => {
      payload[item.key] = item.result || item.resultId
    })
    fetch({ url: API_HELP_FIND_HOUSE_SUBMIT, method: 'post', payload: { ...payload, questionnaire: JSON.stringify(params), type: CurrentDemandId } }).then((res) => {
      if(CurrentDemandId === 1) {
        setResultList(res.taBuildingList || [])
      }
      setShowPopup(true)
    })
  }

  useEffect(() => {
    getFeedbackSetting().then((res) => setSetting(res))
  }, [])

  return (
    <view className='Page helpToFindHouse'>

      <AreaPickerView show={ShowCitysPopup} Change={AreaChange} Cancel={() => { setShowCitysPopup(false) }}></AreaPickerView>

      {
        ShowPopup &&
        <SubmitBuyHouseResult setting={setting} List={ResultList}></SubmitBuyHouseResult>
      }

      <ScrollView scroll-y refresher-enabled={false}>
        <view className='PageContent'>

          {
            ShowDemand &&
            <view>
              <text>选择您的需求</text>
              <view className='Demand flex-h' style='margin-top: 10px;'>
                {
                  DemandList.map((item, index) => (
                    <view key={`DemandItem-${index}`} className={CurrentDemandId === item.id ? 'flex-item active' : 'flex-item'} onClick={CutDemandId(item.id)}>
                      <Image mode='heightFix' src={item.icon || null}></Image>
                      <text>{item.name}</text>
                      <text>{item.spell}</text>
                    </view>
                  ))
                }
              </view>
            </view>
          }

          {/* 买房 */}
          {
            CurrentDemandId === 1 &&
            <BuyHouse change={StepChange} toSubmit={submitForm} AreaInfo={AreaInfo} selectArea={() => { setShowCitysPopup(true) }}></BuyHouse>
          }

          {/* 租房 */}
          {
            CurrentDemandId === 2 &&
            <RentingHouse change={StepChange} toSubmit={submitForm} AreaInfo={AreaInfo} selectArea={() => { setShowCitysPopup(true) }}></RentingHouse>
          }

          {/* 置业 */}
          {
            CurrentDemandId === 3 &&
            <HousePurchasing change={StepChange} toSubmit={submitForm} AreaInfo={AreaInfo} selectArea={() => { setShowCitysPopup(true) }}></HousePurchasing>
          }

        </view>
      </ScrollView>

    </view>
  )
})
