import { alert } from "@/common/common"
import Address from "@/components/address"
import FromList from "@/components/FromList"
import { Button, Input, Text, Textarea, View, Switch } from "@tarojs/components"
import Taro, { setNavigationBarTitle, useDidShow, useRouter } from "@tarojs/taro"
import { useEffect, useMemo, useState } from "react"
import styles from "./index.module.scss"
import classnames from "classnames";
import { mppurchaseraddress, mppurchaseraddressget, mppurchaseraddressput, mppurchaseraddressdelect } from '@/api/addressList'
import { getFilterData } from '@/common/util'
import IconFont from '@/components/iconfont/iconfont'
export default () => {

    const [itemList, setItemList] = useState<any[]>(
        [
            {
                title: '联系人',
                require: true,
                placeholderFont: '请输入收货人姓名',
                type: 'text',
                value: '',
            },
            {
                title: '加工厂',
                require: false,
                placeholderFont: '请输入加工厂（选填）',
                type: 'text',
                value: '',
            },
            {
                title: '联系方式',
                require: true,
                placeholderFont: '请输入联系方式',
                type: 'number',
                value: '',
                maxLength: 11
            },
            {
                title: '收货地址',
                require: true,
                placeholderFont: '请选择/省/市/区',
                type: 'select',
                disabled: true,
                value: '',
            },
            {
                title: '详细地址',
                require: true,
                placeholderFont: '请输入详细地址（街道、门牌号等）',
                type: 'text',
                value: '',
            }
        ]
    )

    const [ischecked, setIsChecked] = useState(false)
    const onChange = (eq) => {
        setIsChecked(eq.detail.value)
        setFormData((e) => ({ ...e, is_default: eq.detail.value, address_detail: itemList[4].value }))
    }

    const router = useRouter()
    useDidShow(() => {
        if (router.params.type === 'add') {
            setNavigationBarTitle({ title: "新增收货地址" })
        } else {
            setFormData((e) => ({ ...e, id: router.params.id as any }))
            getInfo()
            setNavigationBarTitle({ title: "编辑收货地址" })
        }
    })
    const [formData, setFormData] = useState({
        name: "",
        phone: "",
        site: "",
        siteArray: [],
        district_id: "",
        address_detail: "",
        is_default: false,
        id: '',
        factory: '',
    })
    //获取相应id的信息
    const { fetchData: infoFetch } = mppurchaseraddressget()
    const [infoObj, setinfoObj] = useState<any>()
    const getInfo = async () => {
        let res = await infoFetch({
            id: router.params.id,
        })
        if (res.data) {
            let arr: any[] = []
            arr = [
                { id: res.data.province_id, name: res.data.province_name },
                { id: res.data.city_id, name: res.data.city_name },
                { id: res.data.district_id, name: res.data.district_name }
            ]
            setFormData({
                name: res.data.name,
                phone: res.data.phone,
                site: res.data.province_name + res.data.city_name + res.data.district_name,
                siteArray: arr as any,
                address_detail: res.data.address_detail,
                district_id: res.data.district_id,
                is_default: res.data.is_default,
                id: res.data.id,
                factory: res.data.factory
                // purchaser_id: res.data.purchaser_id
            })
            setinfoObj(res.data)
            itemList.map(item => {
                if (item.title === '联系人') {
                    item.value = res.data.name
                }
                if (item.title === '联系方式') {
                    item.value = res.data.phone
                }
                if (item.title === '收货地址') {
                    item.value = res.data.province_name, res.data.city_name, res.data.district_name
                }
                if (item.title === '详细地址') {
                    item.value = res.data.address_detail
                }
                if (item.title === '加工厂') {
                    item.value = res.data.factory
                }
                return item
            })
            setItemList([...itemList])
            setIsChecked(res.data.is_default)
        }

    }
    // `${res.data.province_name} + ${res.data.city_name} + ${res.data.district_name}`


    const btnDisabled = useMemo(() => {
        let canShow = false
        const obj = itemList.filter(item => {
            if (item.require) {
                return item.value !== ''
            }
        })
        if (obj.length < 4) {
            canShow = true
        } else {
            canShow = false
        }
        return canShow
    }, [itemList])

    const [showSiteModal, setShowSiteModal] = useState(false);

    const handleSetSite = (ev: any) => {
        var addressName: any = []
        ev.forEach(v => {
            addressName.push(v.name)
        })
        if (ev.length === 3) {
            itemList.map(it => {
                if (it.type === 'select') {
                    it.value = addressName
                }
                return it
            })
            setItemList([...itemList])
            setShowSiteModal(false)

        }
        setFormData({
            name: itemList[0]?.value,
            phone: itemList[2]?.value,
            site: addressName.join(' '),
            district_id: ev[ev.length - 1]?.id,
            is_default: ischecked,
            address_detail: itemList[4]?.value,
            id: infoObj?.id ? infoObj?.id : '',
            siteArray: ev,
            factory: itemList[1]?.value
        })

    }

    useEffect(() => {
        setFormData(formData)
    }, [formData])

    useEffect(() => {
        setItemList(itemList)
    }, [itemList])
    const onClose = () => {
        setShowSiteModal(false)
    }

    const changeInput = (e, item) => {
        itemList.map(it => {
            if (it.title === item.title) {
                it.value = e.detail.value
            }
            return it
        })
        setItemList([...itemList])
        setFormData((val) => ({
            ...val, name: itemList[0].value, phone: itemList[2].value, address_detail: itemList[4].value, factory: itemList[1].value
        }))
    }


    const showModal = (item) => {
        if (item.type === 'select') {
            setShowSiteModal(true)
        }

    }

    const navBack = () => {
        Taro.navigateBack({
            delta: 1
        })
    }
    //新增地址
    const { fetchData: addAddressFetch } = mppurchaseraddress()
    const handAdd = async () => {
        // if (!btnDisabled) return false
        let res = await addAddressFetch({ ...formData, purchaser_id: Number(router.params.purchaser_id) })
        if (res.data) {
            Taro.showToast({
                title: '成功',
                icon: "none"
            })
            navBack()
        } else {
            Taro.showToast({
                title: res.msg
            })
        }
    }

    // 编辑地址
    const { fetchData: putFetch } = mppurchaseraddressput()
    const handEdit = async () => {
        // if (!btnDisabled) return false
        let res = await putFetch({ ...formData, purchaser_id: Number(router.params.purchaser_id), id: Number(infoObj?.id) })
        if (res.msg === 'success') {
            Taro.showToast({
                title: '成功',
                icon: "none"
            })
            navBack()
        } else {
            Taro.showToast({
                title: res.msg
            })
        }
    }
    // 删除地址
    const { fetchData: deleteFetch } = mppurchaseraddressdelect()
    const handleDelete = async () => {
        Taro.showModal(({
            title: "提示",
            content: "是否删除地址？",
            async success(ev) {
                if (ev.confirm) {
                    Taro.showLoading({
                        title: '请稍等...'
                    })
                    const result = await deleteFetch({ id: Number(formData.id) });
                    if (result.success) {
                        alert.success("删除成功");
                        Taro.hideLoading()
                        Taro.navigateBack({
                            delta: 1
                        })
                    } else {
                        alert.error(result.msg);
                    }
                }
            }
        }))
    }
    return (
        <>
            <View className={styles.main}>
                {itemList.map((item, index) => {
                    return (
                        <View className={styles.itemBox} key={index}>
                            <View className={styles.leftBox}>
                                {item.title}
                                {
                                    item.require && <Text style={{ color: 'red' }}>*</Text>
                                }
                            </View>
                            <Input
                                placeholderStyle={styles.placeholderStyle}
                                maxlength={item.maxLength ? 11 : 100}
                                onBlur={(e) => changeInput(e, item)}
                                type={item.type}
                                onClick={() => showModal(item)}
                                style={{ width: '212px' }}
                                disabled={item.disabled}
                                placeholder={item.placeholderFont}
                                value={item.value}
                                className={styles.inputClass}
                            ></Input>
                            {
                                item.type === 'select' && <IconFont name={'icon-chakanquanbukehu'} color={'#000000'} size={40}></IconFont>
                            }
                        </View>
                    )
                })}


            </View>
            <View className={styles.checkBox}>
                <View className={styles.leftCheck}>
                    <View className={styles.topFont}>设置默认地址</View>
                    <View className={styles.bottomFont}>提醒：下单会优先使用该地址</View>
                </View>
                <Switch checked={ischecked} color={'#337fff'} onChange={(e) => { onChange(e) }} />
            </View>

            {
                router.params.type === 'add' &&
                <View className={styles.bottomBox}>
                    <Button disabled={btnDisabled} onClick={() => handAdd()} className={classnames(btnDisabled ? styles.btn : styles.adtiveBtns)}>保存</Button>
                </View>
            }
            {
                router.params.type === 'edit' &&
                <View className={styles.bottomBox}>
                    <Button className={styles.delectBox} onClick={() => handleDelete()}>删除</Button>
                    <Button onClick={() => handEdit()} disabled={btnDisabled} className={classnames(btnDisabled ? styles.nobtn : styles.sureBox)} >确认</Button>
                </View>
            }
            <Address addressOnChange={handleSetSite} defaultValue={formData.siteArray} addressOnClose={() => onClose()} show={showSiteModal} />

        </>
    )
}