import { View, ScrollView } from '@tarojs/components'
import { useCallback, forwardRef, useEffect, useMemo, useRef, useState, memo, useImperativeHandle, } from 'react'
import Search from '@/components/search'
import styles from "./index.module.scss"
import classnames from "classnames";
import Popup from '@/components/popup'
import Goods from "@/components/goodsItem"
import BottomCustomer from "@/components/BottomCustomer"
import VirtualList from '@tarojs/components/virtual-list'
import DotLoading from "@/components/dotLoading"
import Divider from '../divider';

interface prosObj {
    showPopup?: false | true,
    closePopup?: () => void,
    goodList?: any[],
    typeList?: any[],
    handCheck?: (any) => void,
    addNums?: (any) => void
    reduceNums?: (any) => void
    // oninputEvent?: (e: string, res: object) => void,
    getSearchData: (any) => void,
    handPlus: (any) => void,
    handSure: () => void,
    obj?: {
        code?: string,
        name?: string,

    },
    modeFont: Number | string,
    clientName: string,
    clientId: Number,
    hasBottom?: true | false, //默认不占位底部
    onBlur?: (e: string, res: object) => void
}
export default memo(forwardRef((props: prosObj, ref) => {
    const {
        showPopup = false,
        closePopup,
        goodList = [],
        typeList = [],
        handCheck,
        addNums,
        reduceNums,
        // oninputEvent,
        getSearchData,
        handPlus,
        obj = {},
        modeFont = 0,
        clientName = '',
        clientId = -1,
        handSure,
        hasBottom = true,
        onBlur
    } = props

    useImperativeHandle(ref, () => ({
        Object: props,
        typeList: typeList
    }))



    //判断选择的类型
    const showModefont = useMemo(() => {
        const modeObj = typeList.filter(item => {
            return item.checked
        })
        if (modeObj[0].id === 0) {
            return '条'
        } else {
            return '米'
        }
    }, [typeList])

    //已选的颜色
    const selectTotal = useMemo(() => {
        const totalArr = goodList.filter(item => {
            return item.showInput
        })
        return totalArr.length
    }, [goodList])

    //选择的条数或者米数
    const selectNums = useMemo(() => {
        let arr: any = []
        goodList.forEach(item => {
            if (item.showInput) {
                arr.push(Number(item.nums))
            }
        })
        let hate = sum(arr)
        return hate
    }, [goodList])
    // onInputEven={(e, item) => oninputEvent?.(e, item)}

    function sum(arr) {
        var s = 0;
        for (var i = arr.length - 1; i >= 0; i--) {
            s += arr[i];
        }
        return s;
    }


    const rows = memo(({ id, index, style, data }: any) => {
        let item = data[index]
        return (
            <>
                <Goods
                    onBlur={(e, id) => onBlur?.(e, id)}
                    modeFont={(modeFont as number)}
                    handPlus={(item) => handPlus?.(item)}
                    value={item || {}}
                    clickAdd={(item) => addNums?.(item)}
                    clickReduce={(item) => { reduceNums?.(item) }}
                    goodList={goodList}
                ></Goods>
            </>
        )
    })

    return (
      <Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}>
        <ScrollView className={styles.scrllStyle} scrollY>
          <View className={styles.shopcartBox}>
            <View className={styles.topTitle}>
              {obj?.code}# {obj?.name}
            </View>
            <View className={styles.selectFont}>
              已选 1 种面料，{selectTotal} 个颜色，共 {selectNums} {showModefont}
            </View>
            <Divider direction='horizontal' customStyles={{ margin: '12px 0' }}></Divider>
            <View className={styles.typeFont}>布料类型</View>
            <View className={styles.flexType}>
              {typeList.map((item, index) => {
                return (
                  <View
                    onClick={() => {
                      handCheck?.(item)
                    }}
                    key={index}
                    className={classnames(item.checked ? styles.activemodeFont : styles.modeFont)}>
                    {item.name}
                  </View>
                )
              })}
            </View>
            <View style={{position: 'sticky', top: 0, background: 'white',zIndex: '9999'}}>
                <Divider direction='horizontal' customStyles={{ margin: '12px 0' }}></Divider>
                <View className={styles.flexFonts}>
                <View className={styles.kingFont}>颜色分类({goodList?.length})</View>
                <View className={styles.danwei}>
                    {modeFont == 0 ? '大货' : modeFont == 1 ? '剪版' : '散剪'}单位：{showModefont}
                </View>
                </View>
                <View className={styles.searchBox}>
                <Search
                    cursorSpacing={100}
                    placeholder='请输入搜索布料'
                    showBtn={false}
                    changeOnSearch={getSearchData}
                    debounceTime={300}
                    adjustPosition={true}
                />
                </View>
            </View>
            {goodList.length > 0 && (
              <>
                <View className={styles.scrollviewBig}>
                  <VirtualList
                    className={styles.scrollview}
                    height={300} /* 列表的高度 */
                    width='100%' /* 列表的宽度 */
                    itemData={goodList} /* 渲染列表的数据 */
                    itemCount={goodList.length + 0} /*  渲染列表的长度 */
                    itemSize={100} /* 列表单项的高度  */
                    overscanCount={1}>
                    {rows}
                  </VirtualList>
                </View>

                <View className={styles.kongOne}></View>
              </>
            )}
            {goodList.length === 0 && (
              <>
                <View className={styles.loading_more}>
                  加载中
                  <DotLoading />
                </View>
              </>
            )}
            {!hasBottom && <View style={{ height: '100rpx' }}></View>}
            <View className={classnames(hasBottom === true ? styles.posBox : styles.noBottom)}>
              <BottomCustomer
                clientName={clientName}
                clientId={clientId}
                isDisabled={selectTotal > 0 && clientName !== '' ? false : true}
                handSure={() => {
                  handSure()
                }}></BottomCustomer>
            </View>
          </View>
        </ScrollView>
      </Popup>
    )


}))