import { useState, useEffect } from 'react'
import { PickerView, PickerViewColumn } from '@tarojs/components'
import { fetch } from '@/utils/request'
import { API_AREA_LIST } from '@/constants/api'
import './style.scss'

export default (props) => {

  const { show = false, Change = () => {}, Cancel = () => {} } = props
  const [Value, setValue] = useState([0, 0, 0])
  const [StateList, setStateList] = useState([])
  const [CurrentState, setCurrentState] = useState({})
  const [CityList, setCityList] = useState([])
  const [CurrentCity, setCurrentCity] = useState({})
  const [IntentAreaList, setIntentAreaList] = useState([])
  const [CurrentIntentArea, setCurrentIntentArea] = useState({})

  useEffect(() => {
    GetAreaList()
  }, [])

  useEffect(() => {
    if (StateList.length) {
      if (StateList[Value[0]].id !== CurrentState.id) { // 省份更新
        setCurrentState(StateList[Value[0]])
      } else if (CityList[Value[1]].id !== CurrentCity.id) { // 城市更新
        setCurrentCity(CityList[Value[1]])
      } else if (IntentAreaList[Value[2]].id !== CurrentIntentArea.id) { // 区县更新
        setCurrentIntentArea(IntentAreaList[Value[2]])
      }
    }
  }, [Value])

  useEffect(() => {
    if (CurrentState.id) {
      GetAreaList(CurrentState.id, 2)
    }
  }, [CurrentState])

  useEffect(() => {
    if (CurrentCity.id) {
      GetAreaList(CurrentCity.id, 3)
    }
  }, [CurrentCity])

  const Sure = () => {
    Change([CurrentState, CurrentCity, CurrentIntentArea])
  }

  const PickerChange = (e) => {
    setValue(e.detail.value)
  }

  const GetAreaList = (parentCity = 100000, levelType = 1) => {
    fetch({ url: API_AREA_LIST, method: 'get', payload: { parentCity, levelType } }).then((res) => {
      if (levelType === 1) { // 省份
        setStateList(res || [])
        setValue([0, 0, 0])
      } else if (levelType === 2) { // 城市
        setCityList(res || [])
        setValue([Value[0], 0, 0])
      } else { // 区县
        setIntentAreaList(res || [])
        setValue([Value[0], Value[1], 0])
      }
    })
  }

  return (
    <view className='components AreaPickerView' style={{ display: show ? 'block' : 'none' }}>
      <view className='flex-v'>
        <view className='flex-h'>
          <text onClick={Cancel}>取消</text>
          <view className='flex-item'></view>
          <text onClick={Sure}>确认</text>
        </view>
        <view className='flex-item'>
          <PickerView value={Value} indicator-style='height: 50px;' style='width: 100%; height: 300px;' onChange={PickerChange}>
            <PickerViewColumn>
              {
                StateList.map((item, index) => (
                  <view key={index} style='line-height: 50px; text-align: center;'>{item.name}</view>
                ))
              }
            </PickerViewColumn>
            <PickerViewColumn>
              {
                CityList.map((item, index) => (
                  <view key={index} style='line-height: 50px; text-align: center;'>{item.name}</view>
                ))
              }
            </PickerViewColumn>
            <PickerViewColumn>
              {
                IntentAreaList.map((item, index) => (
                  <view key={index} style='line-height: 50px; text-align: center;'>{item.name}</view>
                ))
              }
            </PickerViewColumn>
          </PickerView>
        </view>
      </view>
    </view>
  )
}
