import { View, Text } from '@tarojs/components'
import Popup from '@/components/popup'
import LoadingCard from '@/components/loadingCard'
import Search from '@/components/search'
import Counter from '../counter'
import Big from 'big.js'
import classnames from 'classnames'
import styles from './index.module.scss'
import { memo, useCallback, useEffect, useRef, useState } from 'react'
import { useSelector } from '@/reducers/hooks'
import { GetColorList } from '@/api/materialColor'
import { AddShoppingCartApi } from '@/api/shopCart'
import Taro, { useRouter } from '@tarojs/taro'
import UseLogin from '@/use/useLogin'
import { formatHashTag, formatPriceDiv } from '@/common/fotmat'
import { getFilterData } from '@/common/util'
import LabAndImg from '@/components/LabAndImg'
import VirtualList from '@tarojs/components/virtual-list'
import useCommonData from '@/use/useCommonData'
import LabAndImgShow from '@/components/LabAndImgShow'

type param = {
  show?: true | false
  onClose?: () => void
  title?: string
  productId?: number
}
export default memo(({ show = false, onClose, title = '', productId = 0 }: param) => {
  const { adminUserInfo } = useSelector((state) => state.userInfo)

  const [selectList, _] = useState([
    { id: 0, step: 1, digits: 0, maxNum: 100000, defaultNum: 1, title: '大货', unit: '条', eunit: 'kg', priceField: 'bulk_price' },
    { id: 1, step: 1, digits: 2, maxNum: 9.99, defaultNum: 1, title: '剪板', unit: '米', eunit: 'm', priceField: 'length_cut_price' },
    { id: 2, step: 1, digits: 2, minNum: 3, maxNum: 100000, defaultNum: 3, title: '散剪', unit: '米', eunit: 'kg', priceField: 'weight_cut_price' },
  ])
  const [selectIndex, setSelectIndex] = useState(0)
  const selectProduct = (index: number) => {
    setSelectIndex(() => index)
  }

  //重置数据
  useEffect(() => {
    const newList = initList(list)
    setList([...newList])
    condition.current.code_or_name = null
    setSearchShow(false)
  }, [selectIndex])

  //获取面料颜色列表
  const { fetchData: colorFetchData, state: colorState } = GetColorList()
  const [list, setList] = useState<any[]>([])
  const condition = useRef({ physical_warehouse: adminUserInfo?.physical_warehouse, sale_mode: selectIndex, product_id: 0, code_or_name: null })
  const getColorList = async () => {
    let { data } = await colorFetchData(getFilterData(condition.current))
    let lists = initList(data.list)
    setList(() => [...lists])
  }
  const [showPopup, setShowPopup] = useState(false)

  //显示获取
  useEffect(() => {
    if (show) {
      setSelectIndex(0)
      condition.current.code_or_name = null
      setSearchShow(false)
      condition.current.product_id = productId
      getColorList()
    }
    setShowPopup(show)
  }, [show])

  //初始化列表数据
  const initList = useCallback((list) => {
    const newList = list.map((item) => {
      item.count = 0
      item.show = false
      return item
    })
    return newList
  }, [])

  //卸载数据
  useEffect(() => {
    return () => {
      setList([])
    }
  }, [])

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

  //计算总数量和总米/件数
  const [selectCount, setSelectCount] = useState<{ sumCount: number; kindCount: number; color_list: any[] }>({
    sumCount: 0,
    kindCount: 0,
    color_list: [],
  })
  useEffect(() => {
    let sumCount = 0,
      kindCount = 0,
      color_list: any[] = []
    let color_list_info = {}
    list.map((item) => {
      if (item.count > 0) {
        sumCount = Big(sumCount).add(item.count).toNumber()
        kindCount++
        color_list_info = selectIndex == 0 ? { product_color_id: item.id, roll: item.count } : { product_color_id: item.id, length: item.count * 100 }
        color_list.push(color_list_info)
      }
    })
    setSelectCount({ ...selectCount, sumCount, kindCount, color_list })
  }, [list])

  //计数组件
  const getInputValue = useCallback(
    (num, item) => {
      item.count = parseFloat(num)
      if (num == 0) item.show = false
      setList(() => [...list])
    },
    [list],
  )

  const onAdd = (item) => {
    item.show = true
    item.count = selectList[selectIndex].defaultNum
    setList((list) => [...list])
  }

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

  //添加购物车
  const { getShopCount } = useCommonData()
  const { getSelfUserInfo } = UseLogin()
  const { fetchData: addFetchData } = AddShoppingCartApi()
  const addShopCart = async () => {
    try {
      await getSelfUserInfo()
    } catch (msg) {
      Taro.showToast({
        icon: 'none',
        title: '授权失败，请求完善授权',
      })
      return false
    }
    if (selectCount.sumCount == 0) {
      Taro.showToast({
        icon: 'none',
        title: '请选择面料颜色!',
      })
      return false
    }

    const state = await addFetchData({
      sale_mode: selectIndex,
      color_list: selectCount.color_list,
    })
    if (state.success) {
      Taro.showToast({
        title: '添加成功',
      })
      getShopCount()
      onClose?.()
    } else {
      Taro.showToast({
        icon: 'none',
        title: state.msg,
      })
    }
  }

  //筛选数据
  const searchInput = useCallback((e) => {
    condition.current.code_or_name = e
    getColorList()
  }, [])

  //清空搜索内容
  const searchRef = useRef<any>(null)
  const clearSearch = () => {
    searchRef.current.clearInput()
    setSearchShow(false)
  }

  //格式化金额
  const formatPrice = useCallback(
    (item) => {
      const price = Number(formatPriceDiv(item[selectList[selectIndex].priceField]))
      return (
        <View className={styles.priceText}>
          <Text>¥</Text>
          {price}
          <Text> /{selectList[selectIndex].eunit}</Text>
        </View>
      )
    },
    [selectIndex],
  )

  //显示图片弹窗
  const [showLabImage, setShowLabImage] = useState(false)
  const [labImageValue, setLabImageValue] = useState()
  const getLabAndImg = useCallback((val) => {
    setShowLabImage(() => true)
    setLabImageValue(val)
  }, [])
  const closeLabImgShow = useCallback(() => {
    setShowLabImage(() => false)
  }, [])

  //虚拟滚动
  const Rows = memo(({ id, index, style, data }: any) => {
    let item = data[index]
    return (
      <>
        {(item && (
          <View className={styles.item} key={item.id}>
            <View className={styles.item_color}>
              <LabAndImg value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.code }} showStatus={false} onClick={getLabAndImg} />
            </View>
            <View className={styles.item_con}>
              <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
              <View className={styles.num}>{formatPrice(item)}</View>
            </View>
            <View className={styles.btn_con}>
              {(!item.show && (
                <View className={styles.btn} onClick={() => onAdd(item)}>
                  添加
                </View>
              )) || (
                <View className={styles.btn_count}>
                  <Counter
                    otherData={item}
                    onBlue={getInputValue}
                    defaultNum={item.count}
                    step={selectList[selectIndex].step}
                    digits={selectList[selectIndex].digits}
                    onClickBtn={getInputValue}
                    unit={selectList[selectIndex].unit}
                    minNum={selectList[selectIndex].minNum}
                    maxNum={selectList[selectIndex].maxNum}
                  />
                </View>
              )}
            </View>
          </View>
        )) || <View className={styles.item}></View>}
      </>
    )
  })

  return (
    <View className={styles.shop_cart_main}>
      <Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
        <View className={styles.popup_con}>
          <View className={styles.header}>{title}</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' ref={searchRef} changeOnSearch={searchInput} debounceTime={400} />
              </View>
              <View className={styles.text} onClick={() => clearSearch()}>
                取消
              </View>
            </View>
          )}
          <View className={styles.colorNum}>
            <View className={styles.title}>颜色分类 ({list.length})</View>
            {!searchShow && <View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
          </View>

          <View className={styles.product_color_con}>
            {list.length <= 0 && colorState.loading && <LoadingCard />}
            {list.length > 0 && !colorState.loading && (
              <View className={styles.color_con}>
                <VirtualList
                  className={styles.virtual_list}
                  height={400} /* 列表的高度 */
                  width='100%' /* 列表的宽度 */
                  itemData={list} /* 渲染列表的数据 */
                  itemCount={list.length + 1} /*  渲染列表的长度 */
                  itemSize={100} /* 列表单项的高度  */
                  overscanCount={1}>
                  {Rows}
                </VirtualList>
                <View className='common_safe_area_y'></View>
              </View>
            )}
            {list.length <= 0 && !colorState.loading && <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)} onClick={() => addShopCart()}>
                加入购物车
              </View>
            </View>
          </View>
        </View>
        <View className='common_safe_area_y'></View>
      </Popup>
      <View>
        <LabAndImgShow value={labImageValue} show={showLabImage} onClose={closeLabImgShow} />
      </View>
    </View>
  )
})