import { View } from '@tarojs/components'
import Taro, { useDidShow } from '@tarojs/taro'
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import Goods from './components/goods'
import Search from '@/components/search'
import Empty from '@/components/empty'
import { MpProductList } from '@/api/search'
import { debounce, getFilterData } from '@/common/util'
import ShopCart from '@/components/shoppingCart'
import {
  ClientListApi,
  MpProductColorList,
  MpSearchHistory,
  MpSearchHistoryList
  , MpShoppingCartProductColorList,
} from '@/api/order'

const SearchPage = () => {
  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])
  }

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

  const onj = JSON.parse(Taro.getStorageSync('userInfo'))
  const [search, setSearchObj] = useState({
    modeId: 0,
    goodsId: null,
    code_or_name: '',
    physical_warehouse: onj.physical_warehouse,
    purchaser_id: -1,
  })

  useDidShow(() => {
    // 获取选择的客户
    const pages = Taro.getCurrentPages()
    const currPage = pages[pages.length - 1] // 获取当前页面
    // 判断是否有跳转选择客户
    if (currPage.data?.clientId && currPage.data?.clientId !== '') {
      setclientObj({
        clientId: currPage.data?.clientId,
        clientName: currPage.data?.clientName,
      })
      setSearchObj(val => ({ ...val, purchaser_id: currPage.data?.clientId }))
    }
    // 默认客户
    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 [showShopCart, setShowShopCart] = useState(false)

  // 获取商品
  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: search?.physical_warehouse, purchaser_id: clientObj?.clientId })
    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])
  }

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

  // 加入购物车
  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 ? Number(it.nums) : 0,
        length: search.modeId !== 0 ? Number(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,
    }
    const 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 ShopCartRef = useRef<any>()
  // 点击对应商品显示购物车
  const showCart = async(item) => {
    setSearchObj(e => ({ ...e, goodsId: item.id, purchaser_id: clientObj?.clientId }))
    setShowShopCart(true)
    setGoodsobj(item)
    ShopCartRef.current.SearchRef.current.clearInput()
  }

  // 点击加展示输入框
  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 { 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 getSearchData = useCallback((e) => {
    if (e) {
      setHasFonts(true)
      getProduct(e)
    }
    else {
      setHasFonts(false)
      setSearchList([])
    }
  }, [])

  // 返回
  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 = Number(e.detail.value).toFixed(2)
        }
        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 = Number(e.detail.value).toFixed(2)
        }
      }
      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} >
          <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" text="无搜索历史"></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" text="暂无数据"></Empty>
          }
        </>
      }
      <ShopCart
        ref={ShopCartRef}
        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>

  )
}
export default memo(SearchPage)
// oninputEvent={(e, item) => { onInputEven?.(e, item) }}
