import {Image, ScrollView, View, Text, CustomWrapper } from "@tarojs/components"
import Popup from "@/components/popup"
import LoadingCard from "@/components/loadingCard";
import Search from "@/components/search";
import InfiniteScroll from "@/components/infiniteScroll";
import Counter from "../counter";
import Big from 'big.js'
import classnames from "classnames";
import styles from "./index.module.scss"
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useSelector } from "@/reducers/hooks"
import {GetColorList} from "@/api/materialColor"
import {AddShoppingCartApi} from "@/api/shopCart"
import Taro, { useRouter } from "@tarojs/taro";
import UseLogin from "@/use/useLogin"
import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
import { debounce, getFilterData } from "@/common/util";
import LabAndImg from "@/components/LabAndImg";



type param = {
    show?: true|false,
    onClose?: () => void,
    title?: string,
    productId?: number
}
export default memo(({show = false, onClose, title = '', productId = 0}: param) => {
    const {adminUserInfo} = useSelector(state => state.userInfo)

    const [selectList, _] = useState([
        {id: 0, step:1,  digits:0,  maxNum:100000,  defaultNum:1, title:'大货', unit:'条', eunit:'kg', priceField:'bulk_price'},
        {id: 1, step:1,  digits:2,  maxNum:9.99, defaultNum:1, title:'剪板', unit:'米', eunit:'m', priceField:'length_cut_price'}, 
        {id: 2, step:1,  digits:2, minNum:10, maxNum:100000, defaultNum:10, title:'散剪', unit:'米', eunit:'kg', priceField:'weight_cut_price'}, 
    ])
    const [selectIndex, setSelectIndex] = useState(0)
    const selectProduct = (index:number) => {
        setSelectIndex(() => index)
    }

    //重置数据
    useEffect(() => {
        const newList =  initList(list)
        setList([...newList])
        condition.current.code_or_name = null
        setSearchShow(false)
    }, [selectIndex])
   
    //获取面料颜色列表
    const {fetchData:colorFetchData, state: colorState} = GetColorList()
    const [list, setList] = useState<any[]>([])
    const [loading, setLoading] = useState(false)
    const condition = useRef({physical_warehouse:adminUserInfo?.physical_warehouse, sale_mode:selectIndex, product_id:0, code_or_name:null})
    const getColorList = async () => {
        setLoading(() => true)
        let {data} = await colorFetchData(getFilterData(condition.current))
        let lists =  initList(data.list)
        setList(() => [...lists])
        setLoading(() => false)
    }
    const [showPopup, setShowPopup] = useState(false)

    useEffect(() => {
        console.log('colorState::',colorState)
    }, [colorState])

    //显示获取
    useEffect(() => {
        if(show) {
            setSelectIndex(0)
            condition.current.code_or_name = null
            setSearchShow(false)
            condition.current.product_id = productId
            getColorList()
        }
        setShowPopup(show)
    }, [show])

    //初始化列表数据
    const initList  = useCallback((list) => {
        const newList = list.map(item => {
            item.count = 0
            item.show = false
            return item
        })
        return newList
    }, [])

    //卸载数据
    useEffect(() => {
        return () => {
            setList([])
        }
    }, [])

    //popup关闭
    const closePopup = () => {
        onClose?.()
        setShowPopup(false)
        setList([])
    }

    //计算总数量和总米/件数
    const [selectCount, setSelectCount] = useState<{sumCount:number, kindCount:number, color_list:any[]}>({
        sumCount: 0,
        kindCount: 0,
        color_list: []
    })
    useEffect(() => {
        let sumCount = 0, kindCount = 0, color_list:any[] = []
        let color_list_info = {}
        list.map(item => {
            if(item.count > 0) {
                sumCount = Big(sumCount).add(item.count).toNumber()
                kindCount ++
                color_list_info = selectIndex == 0? {product_color_id:item.id, roll:item.count}:{product_color_id:item.id, length:(item.count*100)}
                color_list.push(color_list_info)
                
            }
        })
        setSelectCount({...selectCount, sumCount, kindCount, color_list})
    }, [list])

    //计数组件
    const getInputValue = (num, item) => {
       item.count = parseFloat(num)
       if(num == 0) item.show = false
       setList([...list])
       console.log(num)
    }
    const onAdd = (item) => {
        item.show = true
        item.count = selectList[selectIndex].defaultNum
        setList((list) => [...list])
    }

    //搜索显示与隐藏
    const [searchShow, setSearchShow] = useState(false)
    const changeSearchShow = () => {
        setSearchShow(true)
    }

    //添加购物车
    const {getSelfUserInfo} = UseLogin()
    const {fetchData:addFetchData} = AddShoppingCartApi()
    const addShopCart =  async () => {
        // try {
        //     await getSelfUserInfo()
        // } catch(msg) {
        //     Taro.showToast({
        //         icon:'none',
        //         title:'授权失败，请求完善授权'
        //     })
        //     return false
        // }
        
        if(selectCount.sumCount == 0) {
            Taro.showToast({
                icon:'none',
                title:'请选择面料颜色!'
            })
            return false
        } 
        const state =  await addFetchData({
            "sale_mode": selectIndex,
            color_list: selectCount.color_list
        })
        if(state.success) {
            Taro.showToast({
                title:'添加成功'
            })
            onClose?.()
        } else {
            Taro.showToast({
                icon:'none',
                title: state.msg
            })
        }
        
    }

    //筛选数据
    const searchInput = useCallback((e) => {
        condition.current.code_or_name = e
        getColorList()
    }, [])

    //清空搜索内容
    const searchRef = useRef<any>(null)
    const clearSearch = () => {
        searchRef.current.clearInput()
        setSearchShow(false)
    }

    //格式化金额
    const formatPrice = useCallback((item) => {
        const price = Number(formatPriceDiv(item[selectList[selectIndex].priceField]))
        return <View className={styles.priceText}><Text>¥</Text>{price}<Text> /{selectList[selectIndex].eunit}</Text></View> 
    }, [selectIndex])


    return (
        <View className={styles.shop_cart_main}>
            
            <Popup showTitle={false} show={showPopup} onClose={() => closePopup()} >
                <View className={styles.popup_con}>
                    <View className={styles.header}>{title}</View>
                    <View className={styles.search}>
                        <View className={styles.search_title}>下单类型:</View>
                        <View className={styles.search_list}>
                            {selectList.map((item, index) => {
                                return <View key={index} onClick={() => selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item.title}</View>
                            })}
                        </View>
                    </View>
                    {searchShow&&<View className={styles.colorFind}>
                        <View className={styles.search}>
                            <Search placeIcon="out" ref={searchRef} changeOnSearch={searchInput} debounceTime={400}/>
                        </View>
                        <View className={styles.text} onClick={() => clearSearch()}>取消</View>
                    </View>}
                    <View className={styles.colorNum}>
                        <View className={styles.title}>颜色分类 ({list.length})</View>
                        {!searchShow&&<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
                    </View>
                    
                    <View className={styles.product_color_con}>
                        {(list.length <= 0 && colorState.loading)&&<LoadingCard/>}
                        {(list.length > 0&& !colorState.loading)&&

                            <InfiniteScroll moreStatus={false}>
                                <View className={styles.color_con}>
                                    {list.map(item => {
                                        return <View className={styles.item} key={item.id}>
                                            <View className={styles.item_color}>
                                                <LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
                                            </View>
                                            <View className={styles.item_con}>
                                                <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
                                                <View className={styles.num}>
                                                    {formatPrice(item)}
                                                </View>
                                            </View>
                                            <View className={styles.btn_con}>
                                                {!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}>添加</View>
                                                ||<View className={styles.btn_count}>
                                                    <Counter
                                                        onBlue={(e) => getInputValue(e, item)} 
                                                        defaultNum={item.count}   
                                                        step={selectList[selectIndex].step} 
                                                        digits={selectList[selectIndex].digits}
                                                        onClickBtn={(e) => getInputValue(e, item)}
                                                        unit={selectList[selectIndex].unit}
                                                        minNum={selectList[selectIndex].minNum}
                                                        maxNum={selectList[selectIndex].maxNum}
                                                    />
                                                </View>}
                                            </View>
                                        </View>
                                    })}
                                </View>
                        </InfiniteScroll>}
                        {(list.length <= 0 && !colorState.loading)&&<View className={styles.noData}>暂无此商品</View>}
                    </View>
                    <View className={styles.buy_btn}>
                        <View className={styles.buy_btn_con}>
                            <View className={styles.count}>当前已选{selectCount.kindCount}种，共{selectCount.sumCount}{selectList[selectIndex].unit}</View>
                            <View className={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)} onClick={() => addShopCart()}>加入购物车</View>
                        </View>
                    </View>
                </View>
                <View className="common_safe_area_y"></View>
            </Popup>
        </View>
    )
})