import { Image, Input, Label, Text, View } from "@tarojs/components"
import back from '@/images/back.png'
import checked from '@/images/checked.png'
import next from '@/images/next.png'
import eye from '@/images/eye.png'
import './index.scss'
import { Button } from "@nutui/nutui-react-taro"
import { useState } from "react"
import Taro from "@tarojs/taro"
import backNav from '@/images/backNav.png'
import { Picker } from "@nutui/nutui-react-taro"
import { cardList, cities, partners, scoreWithdraw, userDetail } from "../../utils/api"
import { useEffect } from "react"
import { closeLoading, errorNotice, loading, successNotice } from "../../utils/utils"
import { Address } from "@nutui/nutui-react-taro"

const activeEye = eye

const Login = () => {

    const [account, setAccount] = useState('')
    const [mobile, setMobile] = useState('')

    const [visible, setVisible] = useState(false)
    const [bank, setBank] = useState({ value: 0, text: '' })
    const [pwd, setPwd] = useState('')

    const [user, setUser] = useState({})
    const [card, setCard] = useState([])
    const [bankList, setBankList] = useState([])
    const [text, setText] = useState('请选择地址')
    const [normal, setNormal] = useState(false)
    const [cityList, setCityList] = useState([])
    const [province, setProvince] = useState([])

    const [city, setCity] = useState([])

    const [country, setCountry] = useState([])
    const [address, setAddress] = useState({
        province,
        city,
        country,
        addressIdStr: '0_0_0_0',
    })


    const areaOptions = [
        [
            {
                value: 'city', text: '城市合伙人',
            },
            { value: 'county', text: '区县合伙人' }
        ]
    ]

    useEffect(() => {
        userDetail().then(rs => {
            if (!rs) return
            setUser(rs)
        })
        cardList().then(rs => {
            if (!rs) return
            setCard(rs.items)
            setBankList([rs.items.map(item => ({ value: item.id, text: `${item.bank_name} ${item.account_number}` }))])
        })

        cities().then(res => {
            if (!res) return
            setCityList(res.items)
            setProvince(res.items?.filter(item => item.deep == 0))
        })
    }, [])


    // 返回页面
    const backFn = () => {
        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
    }


    const confirmPicker = (val, list) => {
        list.forEach(item => {
            setBank(item)
        })
    }

    const onChange = async (cal) => {
        const re = await cities(cal.value.id)
        const d = re.items
        if (!d.length) {
            setNormal(false)
            return
        }
        setTimeout(() => {
            switch (cal.next) {
                case 'city':
                    setCity(d)
                    break;
                case 'country':
                    if (bank.value == 'city') {
                        setNormal(false)
                    }
                    setCountry(d)
                    break;
                default:
                    setNormal(false)
            }
        }, 200)
    }

    const close = (val) => {
        setNormal(false)
        if (val.data && !!val.data.addressStr) {
            setText((val.data).addressStr)
            setAddress({ province: val.data.province, city: val.data.city, country: val.data.country, addressIdStr: val.data.addressIdStr })
        }
    }

    const submit = async () => {
        if (!account) {
            errorNotice("请输入姓名")
            return
        }
        if (!mobile) {
            errorNotice("请输入电话")
            return
        }
        if (!bank) {
            errorNotice("请选择合作区域类型")
            return
        }
        if (!address == '0_0_0_0') {
            errorNotice('请选择地址')
            return
        }
        const addressId = address.addressIdStr.split('_')
        loading('区域合伙人申请中...')
        const data = {
            province_id: Number(addressId[0]),
            city_id: Number(addressId[1]),
            county_id: Number(addressId[2]),
            level: bank.value,
            real_name: account,
            phone: mobile
        }
        const re = await partners(data)
        closeLoading()
        if (!re) return
        successNotice('申请成功')
        setTimeout(() => {
            backFn()
        }, 1000)
    }


    return <View className="city-partant-frame bg-slate-50 h-screen text-base">
        <View className='addr-detail-title'>
            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
            申请城市合伙人
        </View>
        <View className="city-partant-container relative">
            <View>
                <View className="form-item mt-22">
                    <View className="form-label">姓名</View>
                    <View className="form-control relative">
                        <Input className="form-input" type="text" placeholder="请输入姓名" onInput={(v) => {
                            setAccount(v.detail.value)
                        }} />
                        {
                            account && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
                        }

                    </View>
                </View>
                <View className="form-item mt-22">
                    <View className="form-label">电话</View>
                    <View className="form-control relative">
                        <Input className="form-input" type="text" placeholder="请输入电话" onInput={(v) => {
                            setMobile(v.detail.value)
                        }} />
                        {
                            mobile && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
                        }

                    </View>
                </View>
                <View className="form-item mt-22">
                    <View className="form-label">区域</View>
                    <View className="form-control relative">
                        <Input className="form-input" disabled placeholder="请选择申请区域" value={bank.text} />
                        <Button className="code-btn" onClick={() => {
                            setVisible(true)
                        }}>选择申请区域</Button>
                    </View>
                </View>
                {
                    !!bank.value && <View className="form-item mt-22">
                        <View className="form-label">区域城市</View>
                        <View className="form-control relative" onClick={() => {
                            setNormal(true)
                        }}>
                            <Input className="form-input" disabled placeholder="请选择申请区域城市" value={text} />
                            <Image src={next} className='next-icon form-item-icon' />
                        </View>
                    </View>
                }
                {

                    <View className="city-partant-footer ">
                        <Button className="city-partant-btn" onClick={submit}>立即申请</Button>
                    </View>
                }
            </View>

        </View>
        <Picker
            isVisible={visible}
            listData={areaOptions}
            onConfirm={(values, list) => confirmPicker(values, list)}
            onClose={() => setVisible(false)}

        />
        <Address
            modelValue={normal}
            province={province}
            city={city}
            country={country}
            customAddressTitle="请选择所在地区"
            onChange={onChange}
            onClose={close}
        />
    </View>
}


export default Login