import { View } from '@tarojs/components'
import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
import AddressDetailBox from '../orderDetails/components/addressDetailBox'
import Remark from '../orderDetails/components//remark'
import Popup from '@/components/popup'
import { debounce } from '@/common/util'
import {
    mpsaleOrderpreView,
    mpsaleOrderpost,
} from '@/api/order'
import { alert } from '@/common/common'
import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
import IconFont from '@/components/iconfont/iconfont'
export default () => {
    const router: any = useRouter()
    const [infoObj, setInfoObj] = useState<any>({})
    let selectId: number = -1
    useDidShow(() => {
        //获取选择的地址
        let pages = Taro.getCurrentPages();
        let currPage = pages[pages.length - 1]; // 获取当前页面
        setInfoObj((val) => ({
            ...val,
            sale_mode: Number(router.params.sale_mode),
            province_name: currPage.data?.addressObj?.province_name ? currPage.data?.addressObj?.province_name : '',
            address_id: currPage.data?.addressObj?.id ? currPage.data?.addressObj?.id : '',
            city_name: currPage.data?.addressObj?.city_name ? currPage.data?.addressObj?.city_name : '',
            address_detail: currPage.data?.addressObj?.address_detail ? currPage.data?.addressObj?.address_detail : '',
            district_name: currPage.data?.addressObj?.district_name ? currPage.data?.addressObj?.district_name : '',
            target_user_name: currPage.data?.addressObj?.name ? currPage.data?.addressObj?.name : '',
            purchaser_phone: currPage.data?.addressObj?.phone ? currPage.data?.addressObj?.phone : '',
        }))
        selectId = currPage.data?.addressObj?.id
        let obj = currPage?.data?.ids?.filter(item => { return item == selectId })
        if (currPage?.data?.ids && obj.length === 0) {
            setInfoObj((val) => ({
                ...val,
                sale_mode: Number(router.params.sale_mode),
                province_name: '',
                address_id: '',
                city_name: '',
                address_detail: '',
                district_name: '',
                target_user_name: '',
                purchaser_phone: '',
            }))
        }
        if (!currPage.data?.addressObj) {
            setReceivingStatus(1)
        } else {
            setReceivingStatus(2)
        }
    })
    useEffect(() => {
        getDetail()
    }, [])


    //收货方法,1:自提，2物流
    const [receivingStatus, setReceivingStatus] = useState<any>(null)
    //切换自提或者物流
    const onReceivingStatus = debounce(async (e, value) => {
        e.stopPropagation()
        if (receivingStatus == value) {
            alert.error('不能选择相同的方式')
            return false
        }
        Taro.showLoading({
            title: '请稍等...',
            mask: true
        })
        setReceivingStatus(value)
        Taro.hideLoading()
    }, 300)

    const { fetchData: infoFetch } = mpsaleOrderpreView()
    const [pussName, setPusername] = useState<String>('')
    //获取订单详情
    const getDetail = async () => {
        let arr: any[] = []
        setPusername(decodeURIComponent(router.params.purchaser_name))
        arr = JSON.parse(decodeURIComponent(router.params.shopping_cart_product_color_list))
        let list: any[] = []
        arr?.forEach(item => {
            list.push({
                shopping_cart_product_color_id: item,
                sale_price: 0
            })
        })
        const query = {
            purchaser_id: Number(router.params.purchaser_id),
            sale_mode: Number(router.params.sale_mode),
            shopping_cart_product_color_list: list
        }
        const res = await infoFetch(query)
        setInfoObj(res.data)
    }

    //备注操作
    const [showDesc, setShowDesc] = useState(false)
    const getRemark = useCallback(async (e) => {
        setShowDesc(false)
        setInfoObj((val) => ({ ...val, remark: e }))
    }, [])




    const handSelect = (obj) => {
        if (receivingStatus == 1) return false
        Taro.navigateTo({
            url: '/pages/addressManager/index?orderId=' + '-100' + '&purchaser_id=' + router.params.purchaser_id
        })
    }

    //提交订单
    const { fetchData: postFetch } = mpsaleOrderpost()
    const handSure = () => {
        if (receivingStatus == 2 && !infoObj.address_id) {
            return alert.error('请选择地址')
        }
        let list: any[] = []
        infoObj.product_list.forEach(item => {
            item.product_colors.forEach(it => {
                list.push({
                    sale_price: it.sale_price,
                    shopping_cart_product_color_id: Number(it.id)
                })
            })
        })
        let query = {
            address_id: Number(infoObj.address_id) ? Number(infoObj.address_id) : 0,
            list: list,
            physical_warehouse: infoObj.physical_warehouse,
            purchaser_id: Number(router.params.purchaser_id),
            remark: infoObj.remark,
            sale_mode: infoObj.sale_mode,
            shipment_mode: receivingStatus
        }
        Taro.showModal({
            content: "确认提交吗？",
            confirmText: "确认",
            cancelText: "取消",
            success: async function (res) {
                if (res.confirm) {
                    Taro.showLoading({
                        title: '请稍等...',
                        mask: true
                    })
                    const res = await postFetch(query)
                    if (res?.msg === 'success') {
                        Taro.showToast({
                            title: '成功'
                        })
                        Taro.hideLoading()
                        Taro.redirectTo({
                            url: '/pages/orderDetails/index?id=' + res.data.id
                        })
                    } else {
                        Taro.hideLoading()
                        Taro.showToast({
                            title: res?.msg,
                            icon: 'error'
                        })
                    }
                }

            }
        })
    }

    useEffect(() => {
        setInfoObj(infoObj)
    }, [infoObj])
    return (
        <View className={styles.mainBox}>
            <AddressDetailBox
                navSelect={(obj) => handSelect(obj)}
                obj={infoObj}
                receivingStatus={receivingStatus}
                onReceivingStatus={(e, value) => onReceivingStatus(e, value)}
            ></AddressDetailBox>
            <DefaultBox
                showMode={true}
                title={'客户信息'}
                modeName={infoObj.sale_mode_name}
            >
                <View className={styles.pussBox}>
                    <View className={styles.pussName}>{pussName}</View>
                    {/* <View className={styles.pussPhone}>{infoObj.purchaser_phone}</View> */}
                </View>
            </DefaultBox>
            {/* <View className={styles.total}> {infoObj.product_list?.length} 种面料，{infoObj.total_colors} 个颜色，共 {infoObj.sale_mode === 0 ? infoObj.total_number : infoObj.total_number / 100} {infoObj.sale_mode === 0 ? '条' : 'm'}</View> */}
            <View className={styles.productBox}>
                <GoodsItem list={infoObj?.product_list} obj={infoObj}></GoodsItem>
                <View className={styles.flexMoney}>
                    <View className={styles.flexTotalBox}>
                        <View className={styles.totalFont}>合计金额</View>
                        <IconFont name={'icon-tishi'} size={28} ></IconFont>
                        {/* <View className={classnames('iconfont', 'icon-tishi', styles.tishi)}></View> */}
                    </View>
                    <View className={styles.shoudPay}>¥{formatPriceDiv(infoObj.estimate_amount)}</View>
                </View>
            </View>
            <DefaultBox title={'备注信息'} showMode={true} modeName={`${'填写/修改备注'} >`} clickNode={() => setShowDesc(true)}>
                <View className={styles.remarkFont}>{infoObj.remark === '' ? '暂无' : infoObj.remark}</View>
            </DefaultBox>
            <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
                <Remark onSave={(e) => getRemark(e)} defaultValue={infoObj.remark} showInput={showDesc ? true : false} />
            </Popup>
            <View className={styles.safeBottom}></View>
            <View className={styles.bottomBox}>
                <View className={styles.leftBottom}>
                    <View className={styles.topFlex}>
                        <View className={styles.topFont}>预估金额:</View>
                        <View className={styles.topTotal}>¥{formatPriceDiv(infoObj.estimate_amount)}</View>
                    </View>
                    <View className={styles.bottomFlex}>{infoObj.product_list?.length} 种面料，{infoObj.total_colors} 种颜色，共 {infoObj.sale_mode === 0 ? infoObj.total_number : infoObj.total_number / 100} {infoObj.sale_mode === 0 ? '条' : 'm'}</View>
                </View>
                <View className={styles.rightBottom} onClick={() => handSure()}>提交订单</View>
            </View>
        </View>
    )
}



//卡片盒子元素
interface Obs {
    title?: string,
    modeName?: string,
    showMode?: boolean,
    children?: ReactNode,
    clickNode?: () => void
}

const DefaultBox = memo((props: Obs) => {
    const {
        title = '标题',
        modeName = '大货',
        showMode = false,
        children,
        clickNode
    } = props

    return (
        <View className={styles.defaltBox}>
            <View className={styles.titleBox}>
                <View className={styles.title}>{title}</View>
                {
                    showMode && <View className={styles.modeName} onClick={() => clickNode?.()}>{modeName}</View>
                }
            </View>
            <View className={styles.modeLine}></View>
            {children}
        </View>
    )
})


//产品商品元素
interface PropGoods {
    // item?: {
    //     code?: string | number
    // }
    list: any[],
    obj: {
        sale_mode?: number | string
    },
}
const GoodsItem = memo((porps: PropGoods) => {
    const { list = [], obj = {} } = porps
    return (
        <>
            {
                list.map((item, index) => {
                    return (
                        <View className={styles.goodsBox} key={index}>
                            <View className={styles.goodsProduct}>{item.code}# {item.name}</View>
                            <View className={styles.goodsLine}></View>
                            {
                                item.product_colors.map((it, inx) => {
                                    return (
                                        <View className={styles.itemGoods}>
                                            <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.code} {it.name}</View>
                                                    <View className={styles.itemNums}>x{obj?.sale_mode === 0 ? it.roll : it.length / 100}{obj?.sale_mode === 0 ? '条' : 'm'}</View>
                                                </View>
                                                <View className={styles.item_right_Bottom}>
                                                    <View className={styles.itemMoney}>¥{it.sale_price / 100}/{obj?.sale_mode === 1 ? 'm' : 'kg'}</View>
                                                    <View className={styles.itemMoneyOne}>¥{formatPriceDiv(it.estimate_amount)}</View>
                                                </View>
                                            </View>
                                        </View>
                                    )
                                })
                            }
                        </View>
                    )
                })
            }
        </>

    )
})