import { View, Input, Button, Image, Text, Textarea } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, ReactNode, memo } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { faceVerifyForPay, useDidShow, useRouter } from '@tarojs/taro'
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/format'
import {
    mpsaleOrder,
    mpreturnApplyOrder,
    mpenumrefundExplainone,
} from "@/api/order"
import Popup from '@/components/popup'


export default () => {

    useEffect(() => {
        getDetail()
        getEnum()
    }, [])
    const Router = useRouter()
    const { fetchData: infoFetch } = mpsaleOrder()
    const [ListArr, setListArr] = useState<any[]>([])
    const [infoObj, setInfoObj] = useState<any>({})

    //获取订单详情
    const getDetail = async () => {
        Taro.showLoading({
            title: '请稍等...',
            mask: true
        })
        const res = await infoFetch({ id: Router.params.orderId })
        if (res.data) {
            res.data.av_return_product.forEach(item => {
                item.av_product_color.map(it => {
                    it.isTui = false
                    it.nums = 1
                })
                return item
            })
            setInfoObj(res.data)
            setListArr(res.data.av_return_product)
            Taro.hideLoading()
        }
    }

    //点击退货
    const handTui = (val) => {
        let res = ListArr
        res.forEach(item => {
            item.av_product_color?.map(it => {
                if (it.sale_order_detail_id == val.sale_order_detail_id) {
                    it.isTui = true
                }
                return it
            })

        })
        setListArr([...res])

    }
    //点击取消退货
    const handCancel = (val) => {
        ListArr.forEach(item => {
            item.av_product_color.map(it => {
                if (it.sale_order_detail_id === val.sale_order_detail_id) {
                    it.isTui = false
                }
                return it
            })
        })
        setListArr([...ListArr])
    }

    //点击减
    const handReduce = (val) => {
        ListArr.forEach(item => {
            item.av_product_color.map(it => {
                if (it.sale_order_detail_id === val.sale_order_detail_id) {
                    if (val.nums === 1) {
                        // it.isTui = false
                        it.nums = 1
                    } else {
                        it.nums--
                    }
                }
                return it
            })
        })
        setListArr([...ListArr])
    }

    const onInputEven = (e, val) => {
        ListArr.forEach(item => {
            item.av_product_color.map(it => {
                if (it.sale_order_detail_id === val.sale_order_detail_id) {
                    if (Number(e.detail.value) < 1 || e.detail.value == '') {
                        it.isTui = false
                        it.nums = 1
                    } else {
                        it.nums = Number(e.detail.value)
                    }
                    if (Number(e.detail.value) > it.roll) {
                        it.nums = 1
                    }
                }
                return it
            })
        })
        setListArr([...ListArr])
    }

    const onBlur = (e, val) => {
        ListArr.forEach(item => {
            item.av_product_color.map(it => {
                if (it.sale_order_detail_id === val.sale_order_detail_id) {
                    if (Number(e.detail.value) < 1 || e.detail.value == '') {
                        it.isTui = false
                        it.nums = 1
                    } else {
                        it.nums = Number(e.detail.value)
                    }
                    if (Number(e.detail.value) > it.roll) {
                        it.nums = 1
                    }
                }
                return it
            })
        })
        setListArr([...ListArr])
    }

    //点击加
    const handAdd = (val) => {
        ListArr.forEach(item => {
            item.av_product_color.map(it => {
                if (it.sale_order_detail_id === val.sale_order_detail_id) {
                    if (it.nums < it.roll) {
                        it.nums++
                    } else {
                        return
                    }
                }
                return it
            })
        })
        setListArr([...ListArr])
    }

    //获取枚举
    const [List, setList] = useState<any[]>([])
    const { fetchData: explanFetch } = mpenumrefundExplainone()
    const getEnum = async () => {
        const res = await explanFetch()
        if (res.data) {
            setList(res.data.list)
        }
    }

    //选择退货原因
    const handReasonOne = (item) => {
        List.map(it => {
            if (it.id === item.id) {
                it.default = true
            } else {
                it.default = false
            }
            return it
        })
        setList([...List])
        setQuery((val) => ({ ...val, reasonId: item.id }))
        queryRef.current.reasonName = item.name
    }

    //筛选内容展示
    const [showPopup, setshowPopup] = useState(false)

    const queryRef = useRef({
        reasonName: '请选择'
    })
    const [Query, setQuery] = useState<any>({
        reasonId: '',
        reasonName: '请选择'
    })


    //备注信息
    const [TextareaValue, setTextareaValue] = useState('')
    const getDesc = (e) => {
        setTextareaValue(e)
    }

    //取消返回
    const handCancl = () => {
        Taro.navigateBack({
            delta: 1
        })
    }

    //确认选择
    const handSlect = () => {
        setQuery((val) => ({ ...val, reasonName: queryRef.current.reasonName }))
        setshowPopup(false)
    }

    const totalNums = useMemo(() => {
        const arr: any[] = []
        ListArr.forEach(item => {
            item.av_product_color.forEach(it => {
                if (it.isTui) {
                    arr.push(it)
                }
            })
        })
        return arr.length
    }, [ListArr])

    //重置
    const handReset = () => {
        setQuery(({ reasonId: '', reasonName: '请选择' }))
        queryRef.current.reasonName = '请选择'
        const arrOne = resetArr(List)
        setList([...arrOne])
    }

    //判断是否允许提交
    const isDisabled = useMemo(() => {
        if (Query.reasonId !== '') {
            return false
        } else {
            return true
        }
    }, [Query])

    //判断是否允许提交
    const canTui = useMemo(() => {
        if (totalNums > 0 && Query.reasonId !== '') {
            return false
        } else {
            return true
        }

    }, [Query, totalNums])

    const noGoods = useMemo(() => {
        if (Query.reasonId !== '') {
            return false
        } else {
            return true
        }

    }, [Query])


    //数组重置
    const resetArr = (arr) => {
        arr.map(it => {
            it.default = false
            return it
        })
        return arr
    }
    //确认退款
    const { fetchData: sureFetch } = mpreturnApplyOrder()
    const handSure = () => {
        let arr: any = [];
        if (infoObj.sale_mode == 0 && infoObj.status == 9) {
            ListArr.forEach((item) => {
                item.av_product_color.forEach((it) => {
                    if (it.isTui) {
                        arr.push({
                            product_color_id: it.sale_mode == 0 ? it.product_color_id : '',
                            product_id: it.sale_mode == 0 ? it.product_id : '',
                            product_roll: it.sale_mode == 0 ? it.nums : 0,
                            sale_order_detail_id: it.sale_order_detail_id,
                        });
                    }

                });
            });
        }
        if ((infoObj.sale_mode == 1 && infoObj.status == 9) || (infoObj.sale_mode == 2 && infoObj.status == 9)) {
            ListArr.forEach((item) => {
                item.av_product_color.forEach((it) => {
                    if (it.isTui) {
                        arr.push({
                            product_color_id: it.product_color_id,
                            product_id: it.product_id,
                            product_roll: 0,
                            sale_order_detail_id: it.sale_order_detail_id,
                        });
                    }

                });
            });
        }
        const query = {
            reason_describe: TextareaValue,
            fabric_piece_accessory_url: [],
            goods_status: 0,
            return_reason: 1,
            return_explain: Query.reasonId,
            roll: 0,
            roll_list: arr,
            sale_order_id: Number(Router.params.orderId),
        };
        console.log(query, 888)
        Taro.showModal({
            content: "确认退款吗？",
            confirmText: "确认",
            cancelText: "取消",
            success: async function (res) {
                if (res.confirm) {
                    Taro.showLoading({
                        title: '请稍等...',
                        mask: true
                    })
                    const res = await sureFetch(query)
                    if (res?.msg === 'success') {
                        Taro.showToast({
                            title: '成功'
                        })
                        Taro.hideLoading()
                        handCancl()
                    } else {
                        Taro.hideLoading()
                        Taro.showToast({
                            title: res?.msg,
                            icon: 'error'
                        })
                    }
                }

            }
        })
    }



    const showItem = useMemo(() => {
        if ((infoObj.sale_mode == 0 && infoObj.status == 9) || (infoObj.sale_mode == 1 && infoObj.status == 9) || (infoObj.sale_mode == 2 && infoObj.status == 9)) {
            return true
        } else {
            return false
        }

    }, [infoObj])

    return (
        <View className={styles.main}>
            {
                showItem && <View className={styles.bgBox}>
                    <GoodsItem
                        list={ListArr}
                        obj={infoObj}
                        handTui={(item) => handTui(item)}
                        handCancel={(item) => handCancel(item)}
                        onBlur={(e, item) => onBlur(e, item)}
                        handReduce={(item) => handReduce(item)}
                        handAdd={(item) => handAdd(item)}
                        onInputEven={(e, item) => onInputEven(e, item)}
                    ></GoodsItem>
                    <View className={styles.hasSelect}>汇总：已选{totalNums}种商品</View>
                </View>
            }
            <View className={styles.resonBig}>
                <View className={styles.reasonItem} onClick={() => { setshowPopup(true) }}>
                    <View className={styles.reasonLeft}>
                        <View className={styles.reasonFont}>退款原因</View>
                        <Text className={styles.xing}>*</Text>
                        {
                            Query.reasonName === '请选择' && <View className={styles.selectFont}>请选择</View>
                        }
                        {
                            Query.reasonName !== '请选择' && <View className={styles.selectFont}>{Query.reasonName}</View>
                        }
                    </View>
                    <View className={classnames('iconfont', 'icon-chakanquanbukehu', styles.chakanquanbukehu)}></View>
                </View>
            </View>
            <View className={styles.descBox}>
                <View className={styles.title}>其他说明</View>
                <View className={styles.textBox}>
                    <Textarea
                        onInput={(e) => getDesc(e.detail.value)}
                        value={TextareaValue}
                        // style='background:#f6f6f6;height:210px;padding:15rpx 24rpx 24rpx 24rpx;border-radius: 8rpx;'
                        placeholderStyle='font-size: 28rpx;font-weight: 400;'
                        autoFocus
                        placeholder={'选填/退货说明中选择时（其他问题）必填'}
                    ></Textarea>
                </View>
            </View>
            <View className={styles.safeBox}>
                <View className={styles.bottomBox}>

                    <Button className={styles.resetBox} onClick={() => { handCancl() }}> 取消</Button >
                    {
                        showItem && <Button className={classnames(canTui ? styles.button : styles.activeButton)} disabled={canTui} onClick={() => handSure()}> 确认退款</Button >

                    }
                    {
                        !showItem && <Button className={classnames(noGoods ? styles.button : styles.activeButton)} disabled={noGoods} onClick={() => handSure()}> 确认退款</Button >

                    }
                </View>
            </View>
            <Popup title={'筛选情况'} show={showPopup} onClose={() => { setshowPopup?.(false) }}>

                <View className={styles.popupBox}>
                    <View className={styles.thirdBox}>
                        <View className={styles.thirdTopfont}>退款原因</View>
                        <View className={styles.flexModebox}>
                            {
                                List.map((item, index) => {
                                    return (
                                        <View onClick={() => { handReasonOne(item) }} className={classnames(item.default ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
                                    )
                                })
                            }
                        </View>
                    </View>
                    <View className={styles.safeBoxs} ></View>
                    <View className={styles.bottomBox1}>

                        <Button className={styles.resetBox1} onClick={() => { handReset() }}> 重置</Button >
                        <Button className={classnames(isDisabled ? styles.button1 : styles.activeButton1)} disabled={isDisabled} onClick={() => handSlect()}> 确认</Button >
                    </View>
                </View>
            </Popup>
        </View>
    )
}



//产品商品元素
interface PropGoods {
    list: any[],
    obj: {
        sale_mode?: number | string
    },
    handTui?: (any) => void,
    handCancel?: (any) => void,
    onBlur?: (e: any, obj: any) => void,
    onInputEven?: (e: any, obj: any) => void,
    handReduce?: (any) => void,
    handAdd?: (any) => void,
}
const GoodsItem = memo((porps: PropGoods) => {
    const { list = [], obj = {}, handTui, handCancel, onBlur, handReduce, handAdd, onInputEven } = porps
    // const [value, setValue] = useState<any>({ count: 1 })
    // const onInputEven = (e) => {
    //     let res = Number(e.detail.value)
    //     if (res < 1) {
    //         setValue({ count: 1 })
    //     } else {
    //         setValue({ count: res })
    //     }
    // }

    return (
        <>
            {
                list.map((item, index) => {
                    return (
                        <View className={styles.goodsBox} key={index}>
                            <View className={styles.goodsProduct}>{item.product_code}# {item.product_name}</View>
                            <View className={styles.goodsLine}></View>
                            {
                                item.av_product_color.map((it, inx) => {
                                    return (
                                        <View className={styles.itemGoods} key={inx}>
                                            <View className={styles.itemPic} style={{ backgroundColor: `rgb(${it?.rgb?.r} ${it?.rgb?.g} ${it?.rgb?.b})` }}></View>
                                            <View className={styles.itemRight}>
                                                <View className={styles.item_right_top}>
                                                    <View className={styles.itemName}>{it.product_color_code} {it.product_color_name}</View>
                                                </View>
                                                <View className={styles.item_right_Bottom}>
                                                    <View className={styles.itemMoney}>x{obj?.sale_mode === 0 ? it.roll : it.length / 100}{obj?.sale_mode === 0 ? '条' : 'm'}</View>
                                                    {
                                                        !it.isTui && <View className={styles.btn} onClick={() => handTui?.(it)}>退货</View>
                                                    }
                                                    {
                                                        (it.sale_mode != 0 && it.isTui) && <View className={styles.btnOne} onClick={() => handCancel?.(it)}>已选择退货</View>
                                                    }
                                                    {
                                                        (it.sale_mode == 0 && it.isTui) && <View className={styles.inputBox} >
                                                            <View className={styles.redceBox} onClick={() => handReduce?.(it)}>
                                                                <View className={styles.reduce}></View>
                                                            </View>
                                                            <View className={styles.inputBig}>
                                                                <Input type={'number'} value={it.nums} onInput={(e) => onInputEven?.(e, it)} maxlength={it.roll} onBlur={(e) => onBlur?.(e, it)}></Input>
                                                            </View>
                                                            <View className={styles.addBox} onClick={() => handAdd?.(it)}>
                                                                +
                                                            </View>
                                                        </View>
                                                    }
                                                </View>
                                            </View>
                                        </View>
                                    )
                                })
                            }
                        </View>
                    )
                })
            }
        </>

    )
})