import {Image, ScrollView, View } 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, useEffect, useState } from "react";

type param = {
    show?: true|false,
    onClose?: () => void
}
export default memo(({show = false, onClose}: param) => {
    const selectList = [
        {step:1,  digits:2, title:'剪板', unit:'米'}, 
        {step:1,  digits:2, title:'散剪', unit:'米'}, 
        {step:1,  digits:0, title:'大货', unit:'件'}
    ]
    const [selectIndex, setSelectIndex] = useState(0)
    const selectProduct = (index:number) => {
        setSelectIndex(index)
    }

    const [list, setList] = useState<any[]>([])
    const [loading, setLoading] = useState(false)

    console.log('执行执行')

    useEffect(() => {
        let lists:any[] = []
        for(let i = 0; i < 20; i++) {
            lists = [...lists, {
                title:`${i}#薄荷绿`,
                subtitle: '0770# 21S单面平纹(食毛)',
                tag: '剪板',
                count:0,
                show: false,
            }]
        }
        setList([...lists])
    }, [])

    const [showPopup, setShowPopup] = useState(false)
    useEffect(() => {
        setShowPopup(show)
    }, [show])


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


    //计算总数量和总米/件数
    const [selectCount, setSelectCount] = useState({
        sumCount: 0,
        kindCount: 0
    })
    useEffect(() => {
        let sumCount = 0, kindCount = 0
        list.map(item => {
            if(item.count > 0) {
                sumCount = Big(sumCount).add(item.count).toNumber()
                kindCount ++
            }
        })
        setSelectCount({sumCount, kindCount})
    }, [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 = item.count == 0?1:item.count
        setList([...list])
    }

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

    
    return (
        <View className={styles.shop_cart_main}>
            <Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
                <View className={styles.popup_con}>
                    <View className={styles.header}>0770# 21S单面平纹(食毛)</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" />
                        </View>
                        <View className={styles.text} onClick={() => setSearchShow(false)}>取消</View>
                    </View>}
                    <View className={styles.colorNum}>
                        <View className={styles.title}>颜色分类 (13)</View>
                        <View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>
                    </View>
                    <View className={styles.product_color_con}>
                        {list.length > 0&&<InfiniteScroll>
                            <View className={styles.color_con}>
                                {list.map(item => {
                                    return <View className={styles.item}>
                                        <View className={styles.item_color}>
                                            <Image src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d'/>
                                        </View>
                                        <View className={styles.item_con}>
                                            <View className={styles.title}>{item.title}</View>
                                            <View className={styles.num}>¥25.5/m</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}
                                                />
                                            </View>}
                                        </View>
                                    </View>
                                })}
                            </View>
                        </InfiniteScroll>||
                        <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)}>加入购物车</View>
                        </View>
                    </View>
                </View>
                <View className="common_safe_area_y"></View>
            </Popup>
        </View>
    )
})