import { View } from '@tarojs/components'
import Taro, { useDidShow } from '@tarojs/taro'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import Search from '@/components/search'
import SideBar from '@/components/sideBar'
import Product from '@/components/product'
import ShopCart from '@/components/shoppingCart'
import { goLink } from '@/common/common'
import { KindListApi, ProductListApi } from '@/api/index'
// import useLogin from '@/use/useLogin'
import { ClientListApi, MpProductColorList, MpShoppingCartProductColorList } from '@/api/order'
import { dataLoadingStatus, getFilterData } from '@/common/util'

const Index = () => {
  const product_kind_id_ref = useRef(0)
  // 获取客户
  const [clienList, setclienList] = useState<any[]>([])
  const { fetchData: listFetchData } = ClientListApi()
  // 列表下拉刷新
  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)

  const [clientObj, setclientObj] = useState({
    clientId: -1,
    clientName: '',
  })
  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])
  }

  const [filtrate, setFiltrate] = useState({ product_kind_id: 0, size: 5, page: 1 })
  // 获取面料种类
  const [kindData, setKindData] = useState<any>({ list: [], defaultId: 0 })
  const { fetchData } = KindListApi()
  const categoryList = async() => {
    const res = await fetchData()
    if (res.data?.list) {
      setKindData({ ...kindData, list: res.data.list, defaultId: res.data.list[0].id })
      setFiltrate({ ...filtrate, product_kind_id: res.data.list[0].id })
      product_kind_id_ref.current = res.data.list[0].id
    }
  }

  // 获取面料列表
  const [productData, setProductData] = useState({ list: [], total: 0 })
  const [hasMore, setHasMore] = useState(true)
  const pageNum = useRef({ size: filtrate.size, page: filtrate.page })
  const { fetchData: productFetchData, state: productState } = ProductListApi()
  // 获取数据方法
  const getProductList = async() => {
    const { data, total } = await productFetchData(filtrate)
    setProductData({ ...productData, list: data.list, total })
    setRefresherTriggeredStatus(() => false)
  }
  // 监听查询条件
  useEffect(() => {
    if (filtrate.product_kind_id) { getProductList() }
  }, [filtrate])

  // 点击面料类型
  const getProductKindId = useCallback((e) => {
    pageNum.current.page = 1
    setProductData({ list: [], total: 0 })
    setFiltrate(list => ({ ...list, size: 5, product_kind_id: e.id }))
    product_kind_id_ref.current = e.id
  }, [])

  // 上拉加载数据
  const getScrolltolower = useCallback(() => {
    if (productData.list.length >= productData.total) {
      setHasMore(false)
    }
    else {
      pageNum.current.page++
      const newSize = pageNum.current.size * pageNum.current.page
      setFiltrate(e => ({ ...e, size: newSize }))
    }
  }, [productData])

  const [showShopCart, setShowShopCart] = useState(false)

  const getRefresherRefresh = async() => {
    pageNum.current.page = 1
    setFiltrate({ ...filtrate, size: 5 })
    setHasMore(true)
    setRefresherTriggeredStatus(true)
  }
  useEffect(() => {
    categoryList()
    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,
  })

  // 选择的类型
  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 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 { fetchData: colorlistFetch } = MpProductColorList()
  const ShopCartRef = useRef<any>(null)

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

  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 closePoup = () => {
    setShowShopCart(false)
  }
  // 数据加载状态
  const statusMore = useMemo(() => {
    return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading! })
  }, [productData, productState.loading])

  // 点击加展示输入框
  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 handPlus = useCallback((item) => {
    goodList.map((it) => {
      if (item.id === it.id) {
        it.nums++
      }
      return item
    })
    setGoodlist([...goodList])
  }, [goodList])

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

  // 加入购物车
  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])
      Taro.hideLoading()
    }
    else {
      Taro.hideLoading()
      Taro.showToast({
        icon: 'error',
        title: res.msg,
        duration: 2000,
      })
    }
  }
  // 输入框失焦
  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])
  }

  useEffect(() => {
    setGoodlist(goodList)
  }, [goodList])

  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 product_kind_id_next_ref = useRef(0)
  const getSelectClassId = useCallback((id) => {
    pageNum.current.page = 1
    setProductData({ list: [], total: 0 })
    const kind_id = id == -1 ? product_kind_id_ref.current : id
    product_kind_id_next_ref.current = id
    setFiltrate(list => ({ ...list, size: 5, product_kind_id: kind_id }))
  }, [])

  return (
  // <MoveBtn onClick={() => setShowShopCart(showShopCart)}>
    <View className={styles.main}>
      <View className={styles.search}>
        {/* <View className={styles.search_collect} onClick={() => goLink('/pages/collection/index')}>
                        我的收藏
                    </View> */}
        <View className={styles.search_input} onClick={() => goLink('/pages/searchPage/index')}>
          <Search disabled style={{ width: '263rpx' }} />
        </View>
      </View>
      <View className={styles.products}>
        <SideBar
          list={kindData.list}
          height="100%"
          defaultValue={kindData.defaultId}
          hasMore={hasMore}
          statusMore={statusMore}
          selfOnScrolltolower={getScrolltolower}
          sideBarOnClick={getProductKindId}
          heightItem={150}
          selectClass={getSelectClassId}
          refresherTriggered={refresherTriggeredStatus}
          selfOnRefresherRefresh={() => getRefresherRefresh()}
        >
          <Product productList={productData.list} popupShow={item => showCart(item)} />
        </SideBar>
      </View>
      {/* <View className='common_safe_area_y'></View> */}
      <ShopCart handSure={() => handSure()}
        clientName={clientObj?.clientName}
        clientId={clientObj?.clientId}
        modeFont={search.modeId}
        handPlus={item => handPlus(item)}
        obj={goodObj}
        ref={ShopCartRef}
        getSearchData={(e) => { getSearchData(e) }}
        onBlur={(e, id) => onBlur(e, id)}
        reduceNums={(item) => { reduceNums(item) }}
        addNums={(item) => { handAdd(item) }}
        showPopup={showShopCart}
        handCheck={(item) => { handCheckMode(item) }}
        closePopup={() => closePoup()}
        goodList={goodList}
        typeList={typeList}
      ></ShopCart>
    </View>
  // </MoveBtn>
  )
}
export default Index
// oninputEvent={(e, item) => { oninputEvent(e, item) }}
