import { ScrollView, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { ReactHTMLElement, memo, useEffect, useRef, useState } from 'react'
import classnames from 'classnames'
import IconFont from '../iconfont/iconfont'
import styles from './index.module.scss'
import Drawer from '@/components/popup'
import { GetAddressListApi } from '@/api/addressList'
import { alert } from '@/common/common'

interface DefaultValueParm { name: string; id: string | number; level?: number | string }

interface Params {
  addressOnSelect?: (val: DefaultValueParm[]) => void
  addressOnChange?: (val: DefaultValueParm[]) => void
  addressOnClose?: () => void
  show?: true | false
  defaultValue?: DefaultValueParm[]
  selectStatus?: false | true // false不需要选择完整地址，true需要选择完整地址
}

interface AddresParam {
  ad_code?: string
  id?: number
  level?: number
  level_name?: string
  name?: string
  parent_id?: number

}
const Address = ({
  addressOnSelect,
  addressOnChange,
  addressOnClose,
  show = false,
  defaultValue = [],
  selectStatus = true,
}: Params) => {
  // 省
  const provinceList = useRef<AddresParam[]>([])
  // 市
  const cityList = useRef<AddresParam[]>([])
  // 区
  const areaList = useRef<AddresParam[]>([])

  const [list, setList] = useState<AddresParam[]>([])
  const [selectIndex, setSelectIndex] = useState(0) // 0 省， 1 市，2 区
  const [selectId, setSelectId] = useState(1) // 选中的id
  const [selectArr, setSelectArr] = useState<DefaultValueParm[]>([]) // 选中的省市区
  const [cityStatus, setCityStatus] = useState(false) // 城市是否存在
  const [areaStatus, setAreaStatus] = useState(false) // 区镇是否存在
  const [confirmBtnStatus, setConfirmBtnStatus] = useState(false) // 确认按钮是否可用

  const [bottomStyle, setBottomStyle] = useState({ width: '100rpx', left: '0rpx' }) // 底部滚动条样式

  useEffect(() => {
    if (selectArr.length == 0) {
      setSelectArr(defaultValue)
      if (defaultValue.length > 1) { setCityStatus(true) }
      if (defaultValue.length > 2) { setAreaStatus(true) }
      if (defaultValue.length > 0) { setConfirmBtnStatus(true) }
    }
  }, [defaultValue])
  // 获取地址
  const { fetchData } = GetAddressListApi()

  // 获取省市区宽度
  const getDomDes = (id) => {
    setTimeout(() => {
      const query = Taro.createSelectorQuery()
      query.select(id).boundingClientRect((rect) => {
        const left = rect.left
        const clientWidth = rect.width
        console.log(clientWidth)
        setBottomStyle({
          width: `${clientWidth}px`,
          left: `${left}px`,
        })
      }).exec()
    }, 100)
  }

  // 获取省
  const getProvince = async() => {
    const res = await fetchData({ parent_id: 1 })
    provinceList.current = res.data.list || []
    if (provinceList.current.length > 0) {
      setSelectIndex(0)
      setList(() => provinceList.current)
      getDomDes('#address_tab_0')
    }
  }

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

  // 地址数据
  useEffect(() => {
    if (selectArr && selectArr.length > 0) { addressOnChange?.(selectArr) }
  }, [selectArr])

  // 获取区
  const area = async(id) => {
    const res = await fetchData({ parent_id: id })
    areaList.current = res.data.list || []
    if (areaList.current.length > 0) {
      setSelectIndex(2)
      setList(() => areaList.current)
      setAreaStatus(true)
      getDomDes('#address_tab_2')
      setConfirmBtnStatus(false)
    }
    else {
      setConfirmBtnStatus(true)
      setAreaStatus(false)
    }
  }

  // 获取市
  const getCity = async(id) => {
    const res = await fetchData({ parent_id: id })
    cityList.current = res.data.list || []
    if (cityList.current.length > 0) {
      setSelectIndex(1)
      setList(() => cityList.current)
      setCityStatus(true)
      getDomDes('#address_tab_1')
      setConfirmBtnStatus(false)
    }
    else {
      setConfirmBtnStatus(true)
      setCityStatus(false)
    }
  }

  // 选中内容
  const selectItem = (item) => {
    setSelectId(item.id)
    if (selectIndex == 0) {
      setSelectArr([{ name: item.name, id: item.id, level: item.level }])
      getCity(item.id)
      setAreaStatus(false)
      setCityStatus(false)
    }
    else if (selectIndex == 1) {
      setSelectArr([selectArr[0], { name: item.name, id: item.id, level: item.level }])
      area(item.id)
    }
    else {
      setSelectArr([selectArr[0], selectArr[1], { name: item.name, id: item.id, level: item.level }])
      getDomDes('#address_tab_2')
    }
  }

  // 选中标题
  const onSelectIndex = (index) => {
    setSelectIndex(index)
    const selectid = selectArr[index] ? selectArr[index].id : 0
    setSelectId(selectid as number)
    if (index == 0) {
      getProvince()
    }
    else if (index == 1) {
      const id = selectArr[0]?.id
      getCity(id)
    }
    else {
      const id = selectArr[1]?.id
      area(id)
    }
  }

  // 确定按钮
  const submitSelect = () => {
    addressOnClose?.()
    addressOnSelect?.(selectArr)
  }

  // 点击标题栏
  const selectTab = (index) => {
    onSelectIndex(index)
    getDomDes(`#address_tab_${index}`)
  }

  return (
    <>
      <Drawer showTitle={false} show={show} onClose={submitSelect}>
        <View className={styles.address_main}>
          {/* <View className={styles.address_title}>
                        <View onClick={() => addressOnClose?.()}>取消</View>
                        <View onClick={() => submitSelect()}>确定</View>
                    </View> */}
          <View className={styles.sure} onClick={() => submitSelect()}>确定</View>
          <View className={styles.address_select}>
            <View id="address_tab_0" onClick={() => selectTab(0)} className={classnames(styles.address_item, { [styles.addresst_select]: (selectIndex == 0) })}>{selectArr[0] ? selectArr[0].name : '请选择'}</View>
            {cityStatus && <View id="address_tab_1" onClick={() => selectTab(1)} className={classnames(styles.address_item, { [styles.addresst_select]: (selectIndex == 1) })}>{selectArr[1] ? selectArr[1].name : '请选择'}</View>}
            {areaStatus && <View id="address_tab_2" onClick={() => selectTab(2)} className={classnames(styles.address_item, { [styles.addresst_select]: (selectIndex == 2) })}>{selectArr[2] ? selectArr[2].name : '请选择'}</View>}
            <View style={bottomStyle} className={styles.bottom_index}></View>
          </View>
          <View className={styles.address_list}>
            <ScrollView scrollY className={styles.address_scroll}>
              <View className={styles.address_scroll_list}>
                {list.map((item, key) => {
                  return (
                    <View key={key} onClick={() => selectItem(item)} className={classnames(styles.address_list_item, { [styles.addresst_select]: (selectId == item.id) })}>
                      <View className={styles.address_list_item_name}>{item.name}</View>
                      {(selectArr[selectIndex]?.id == item.id) && <IconFont name="icon-lujing" color="#327fff" size={30}></IconFont>
                      }
                      {
                        (selectArr[selectIndex]?.id !== item.id) && <IconFont name="icon-chakanquanbukehu" color="#d8d8d8" size={30}></IconFont>
                      }
                    </View>
                  )
                })}
              </View>
            </ScrollView>
          </View>
        </View>
      </Drawer>
    </>
  )
}
export default memo(Address)
