import { View } from '@tarojs/components'
import React, { useCallback, memo, useEffect, useMemo, useRef, useState } from 'react'
import Search from '@/components/search'
import styles from "./index.module.scss"
import classnames from "classnames";
import Empty from './components/empty'
import Taro, { useDidShow } from '@tarojs/taro';
import Goods from './components/goods'
import { mpproductlist } from "@/api/search"
import { debounce } from "@/common/util";
import ShopCart from '@/components/shoppingCart'
import {
    mpproductcolorlist,
    mpshoppingCartproductColorlist,
    mpsearchHistorylist,
    mpsearchHistory
} from "@/api/order"
import { getFilterData } from '@/common/util'
import { ClientListApi } from '@/api/order'

export default memo(() => {


    useEffect(() => {
        getClient()
    }, [])

    const [clientObj, setclientObj] = useState({
        clientId: -1,
        clientName: ''
    })

    //获取客户
    const [clienList, setclienList] = useState<any[]>([])
    const { fetchData: listFetchData } = ClientListApi()
    const getClient = async () => {
        const res = await listFetchData({
            page: 1, size: 10
        })
        setclientObj({
            clientId: res.data.list.length > 0 ? res.data.list[0]?.id : -1,
            clientName: res.data.list.length > 0 ? res.data.list[0]?.name : '',
        })
        setclienList([...res.data.list])
    }

    useDidShow(() => {
        //获取选择的客户
        let pages = Taro.getCurrentPages();
        let currPage = pages[pages.length - 1]; // 获取当前页面
        //判断是否有跳转选择客户
        if (currPage.data?.clientId && currPage.data?.clientId !== '') {
            setclientObj({
                clientId: currPage.data?.clientId,
                clientName: currPage.data?.clientName,
            })
        }
        //默认客户
        if (currPage.data?.clientId == null) {
            setclientObj({
                clientId: clienList.length > 0 ? clienList[0]?.id : - 1,
                clientName: clienList.length > 0 ? clienList[0]?.name : '',
            })
        }
    })


    //选择的类型
    const [typeList, setTypeList] = useState<any[]>([{ id: 0, name: '大货', checked: true }, { id: 1, name: '剪版', checked: false }, { id: 2, name: '散剪', checked: false }])
    const [goodList, setGoodlist] = useState<any[]>([])
    const onj = JSON.parse(Taro.getStorageSync('userInfo'))
    const [search, setSearchObj] = useState({
        modeId: 0,
        goodsId: null,
        code_or_name: '',
        physical_warehouse: onj.physical_warehouse
    })
    const [showShopCart, setShowShopCart] = useState(false)


    //监听选择的类型
    useEffect(() => {
        setSearchObj(search)
        if (search.goodsId) getGoodList()
    }, [search])


    //获取商品
    const { fetchData: colorlistFetch } = mpproductcolorlist()
    const getGoodList = async () => {
        const res = await colorlistFetch({ product_id: search.goodsId, sale_mode: search.modeId, code_or_name: search.code_or_name, physical_warehouse: 1 })
        res.data.list.map((item) => {
            item.showInput = false
            if (search.modeId == 0) {
                item.nums = 1
                item.buyNums = 1
            }
            if (search.modeId == 1) {
                item.nums = 0.5
                item.buyNums = 0.5
            }
            if (search.modeId == 2) {
                item.nums = 3
                item.buyNums = 3
            }
            return item
        })
        setGoodlist([...res.data.list])
    }

    //加入购物车
    const { fetchData: preViewFetch, } = mpshoppingCartproductColorlist()
    const handSure = async () => {
        const arr = goodList.filter(item => {
            return item.showInput
        })
        const list: any[] = []
        arr.forEach(it => {
            list.push({
                roll: search.modeId === 0 ? it.nums : 0,
                length: search.modeId !== 0 ? it.nums * 100 : 0,
                product_color_id: Number(it.id)
            })
        })
        const query = {
            purchaser_id: clientObj.clientId,
            sale_mode: search.modeId,
            color_list: list,
            sale_offect: 0
        }
        let res = await preViewFetch(getFilterData(query))
        Taro.showLoading({
            mask: true,
            title: '请稍等...'
        })
        if (res.data) {
            Taro.showToast({
                title: "加入成功",
                duration: 2000,
            });
            setShowShopCart(false)
            goodList.map(item => {
                item.showInput = false
                return item
            })
            setGoodlist([...goodList])
            console.log(search, '000000.0.0.')
            Taro.hideLoading()
        } else {
            Taro.hideLoading()
            Taro.showToast({
                title: res.msg,
                duration: 2000,
            });
        }
    }

    //点击输入框的加
    const handPlus = useCallback((item) => {
        goodList.map((it) => {
            if (item.id === it.id) {
                // if (it.nums > item.buyNums) {
                it.nums++
                // }
            }
            return item
        })
        setGoodlist([...goodList])
    }, [goodList])


    //输入了搜索关键字
    const getSearchDataInput = useCallback((eq) => {
        setSearchObj((e) => ({ ...e, code_or_name: eq }))
    }, [])

    const [goodObj, setGoodsobj] = useState({})
    //点击对应商品显示购物车
    const showCart = async (item) => {
        setSearchObj((e) => ({ ...e, goodsId: item.id }))
        setShowShopCart(true)
        setGoodsobj(item)
    }

    //点击加展示输入框
    const handAdd = useCallback((item) => {
        goodList.map((it) => {
            if (item.id === it.id) {
                it.showInput = true
            }
            return item
        })
        setGoodlist([...goodList])
    }, [goodList])


    //点击减
    const reduceNums = useCallback((item) => {
        goodList.map((it) => {
            if (item.id === it.id) {
                item.nums--
                if (search.modeId == 0) {
                    if (item.nums < 1) it.showInput = false, it.nums = 1
                }
                if (search.modeId == 1) {
                    if (item.nums < 0.5) it.showInput = false, it.nums = 0.5
                }
                if (search.modeId == 2) {
                    if (item.nums < 3) it.showInput = false, it.nums = 3
                }

            }
            return item
        })
        setGoodlist([...goodList])
    }, [goodList])

    //选择类型
    const handCheckMode = (item) => {
        typeList.map(it => {
            if (it.id === item.id) {
                it.checked = true
                setSearchObj((e) => ({ ...e, modeId: it.id }))
            } else {
                it.checked = false
            }
            return it
        })
        setTypeList([...typeList])
        setGoodlist([])
    }

    //关闭弹窗
    const closePoup = () => {
        setShowShopCart(false)
    }

    //获取关键字数据
    const [histroyList, setHistroyList] = useState<any[]>([])
    const { fetchData: historyFetch } = mpsearchHistorylist()
    const getHistory = async () => {
        Taro.showLoading({
            title: '加载中...',
            mask: true
        })
        const res = await historyFetch()
        if (res.data) {
            setHistroyList([...res?.data?.list])
            Taro.hideLoading()
        }
    }

    //搜索商品的数组
    const [searchList, setSearchList] = useState<any[]>([])
    //是否有值输入框
    const [hasFonts, setHasFonts] = useState(false)
    useEffect(() => {
        getHistory()
    }, [])
    //输入了搜索关键字
    const getSearchData = useCallback((e) => {
        if (e) {
            setHasFonts(true)
            getProduct(e)
        } else {
            setHasFonts(false)
            setSearchList([])
        }
    }, [])
    //搜索获取商品数据
    const { fetchData: productFetch } = mpproductlist()
    const { fetchData: historyputFetch } = mpsearchHistory()
    const getProduct = debounce(async (e) => {
        Taro.showLoading({
            title: '加载中...',
            mask: true
        })
        await historyputFetch({ key: e, scene: 0 }).then((res) => {
            if (res.data) {
                getHistory()
            }
        })
        productFetch({ code_or_name: e }).then((res) => {
            if (res.data) {
                Taro.hideLoading()
                setSearchList([...res?.data?.list])
            }
        })
    }, 300)
    //返回
    const back = () => {
        Taro.navigateBack({
            delta: 1
        })
    }

    //输入框失焦
    const onBlur = (e, id) => {
        goodList.map(item => {
            if (item.id == id) {
                if (search.modeId == 0 && (e.detail.value == '' || Number(e.detail.value) == 0)) {
                    item.showInput = false
                    item.nums = 1

                } else if (search.modeId == 0 && (e.detail.value != '' || Number(e.detail.value) > 0)) {
                    item.nums = e.detail.value
                }
                if (search.modeId == 1 && Number(e.detail.value) < 0.5) {
                    item.nums = 0.5
                    item.showInput = false
                } else if (search.modeId == 1 && Number(e.detail.value) >= 0.5) {
                    item.nums = e.detail.value
                }
                if (search.modeId == 2 && Number(e.detail.value) < 3) {
                    item.nums = 3
                    item.showInput = false

                } else if (search.modeId == 2 && Number(e.detail.value) >= 3) {
                    item.nums = e.detail.value
                }

            }
            return item
        })
        setGoodlist([...goodList])
    }

    //选择中后的值到输入框
    const [defaultvalue, setdefaultvalue] = useState('')

    //点击关键字搜索内容
    const handItem = (item) => {
        Taro.showLoading({
            title: '加载中...',
            mask: true
        })
        productFetch({ code_or_name: item.search_key }).then((res) => {
            if (res.data) {
                setHasFonts(true)
                setSearchList([...res.data.list])
                Taro.hideLoading()
            }
        })
        setdefaultvalue(item.search_key)
    }
    //点击返回文字
    const handBack = () => {
        setHasFonts(false)
        setSearchList([])
    }
    return (
        <View className={styles.main}>
            <View className={styles.topBox}>
                <Search placeholder='请输入搜索布料' defaultValue={defaultvalue} showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
                    <View className={styles.cancelFont} onClick={() => back()}>取消</View>
                </Search>
            </View>
            <View className={styles.line}></View>
            {
                !hasFonts && <>
                    <View className={styles.topBox}>
                        <View className={styles.histroyFonts}>历史搜索</View>
                        <View className={classnames('iconfont', 'icon-shaixuan', styles.icon_delect)}></View>
                    </View>
                    {!!histroyList.length &&
                        <View className={styles.bigBox}>
                            {histroyList.map((item, index) => {
                                return (
                                    <View onClick={() => handItem(item)} key={index} className={styles.itemBox}>{item.search_key}</View>
                                )
                            })}
                        </View>
                    }
                    {
                        !histroyList.length && <Empty picUrl='https://cdn.zzfzyc.com/empty.png' fonst={'无搜索历史'}></Empty>
                    }
                </>
            }
            {
                hasFonts && <>
                    <View className={styles.topBox}>
                        <View className={styles.histroyLeft}>
                            <View className={styles.histroyFonts}>搜索结果</View>
                            <View className={styles.back} onClick={() => handBack()}>返回</View>
                        </View>
                    </View>
                    {
                        !!searchList.length && searchList.map((item, index) => {
                            return (
                                <Goods clickItem={() => showCart(item)} key={index} data={item}></Goods>
                            )
                        })
                    }
                    {
                        !searchList.length && <Empty picUrl='https://cdn.zzfzyc.com/empty.png' fonst={'暂无数据'}></Empty>
                    }
                </>
            }
            <ShopCart handSure={() => handSure()}
                clientName={clientObj?.clientName}
                clientId={clientObj?.clientId}
                modeFont={search.modeId}
                handPlus={(item) => handPlus(item)}
                obj={goodObj}
                getSearchData={(e) => { getSearchDataInput(e) }}
                hasBottom={false}
                reduceNums={(item) => { reduceNums(item) }}
                addNums={(item) => { handAdd(item) }}
                showPopup={showShopCart}
                handCheck={(item) => { handCheckMode(item) }}
                closePopup={() => closePoup()}
                goodList={goodList}
                typeList={typeList}
                onBlur={(e, id) => onBlur(e, id)}
            ></ShopCart>

        </View>

    )
})
// oninputEvent={(e, item) => { onInputEven?.(e, item) }}