import { Button, Image, Input, ScrollView, Text, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useReady } from '@tarojs/taro'
import classnames from 'classnames'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import Popup from '@/components/popup'
import { GetProductKindListApi } from '@/api/material'
import { getFilterData } from '@/common/util'
import { alert } from '@/common/common'

interface Props {
  showPopup: boolean
  closePopup: () => void
  handSearch: (any) => void
}

const SearchPopup = (props: Props) => {
  const [searchObj, setsearchObj] = useState<any>({
    width: '',
    weight_density: '',
    product_kind_ids: '',
    component: '',
  })

  // 获取系列
  const { fetchData: kindFetchData } = GetProductKindListApi()
  const [kindList, setKindList] = useState<any[]>([])
  const getCategoryList = async() => {
    const { data } = await kindFetchData()
    setKindList(data.list)
  }

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

  const handCheckMode = (it) => {
    kindList.map((item) => {
      if (item.id == it.id) {
        item.check = !item.check
      }
      return item
    })
    setKindList([...kindList])
    const arr: number[] = []
    const res = kindList.filter((item) => { return item.check })
    res.forEach((kb) => {
      arr.push(kb.id)
    })
    setsearchObj(val => ({ ...val, product_kind_ids: arr.toString() }))
  }

  const handBlur = (e, index) => {
    if (index == 1) {
      setsearchObj(val => ({ ...val, width: Number(e.detail.value) }))
    }
    if (index == 2) {
      setsearchObj(val => ({ ...val, weight_density: Number(e.detail.value) }))
    }
    if (index == 3) {
      setsearchObj(val => ({ ...val, component: e.detail.value }))
    }
  }

  const handReset = () => {
    kindList.map((item) => {
      item.check = false
      return item
    })
    setKindList([...kindList])
    setsearchObj({
      width: '',
      weight_density: '',
      product_kind_ids: '',
      component: '',
    })
  }

  const handSure = () => {
    // if (searchObj.width === ''
    // && searchObj.weight_density === ''
    // && searchObj.product_kind_ids === ''
    // && searchObj.component === ''
    // ) {
    //   alert.error('请选择筛选内容')
    //   return true
    // }
    props.handSearch(getFilterData(searchObj))
  }

  return (
    <Popup title="全部筛选" show={props.showPopup} onClose={() => props.closePopup?.()}>
      <ScrollView scrollY style={{ height: '600rpx' }}>
        <View className={styles.main}>
          <View className={styles.thirdBox}>
            <View className={styles.thirdTopfont}>系列名称</View>
            <View className={styles.flexModebox}>
              {kindList.map((item, index) => {
                return (
                  <View
                    onClick={() => {
                      handCheckMode(item)
                    }}
                    className={classnames(item.check ? styles.activemodeBox : styles.modeBox)}
                    key={index}
                  >
                    {item.name}
                  </View>
                )
              })}
            </View>
          </View>
          <View className={styles.topBox}>
            <View className={styles.leftTop} >
              <View className={styles.lefttopTitle}>幅宽</View>
              <View className={styles.lefttopSelectBox}>
                <Input className={styles.inputstyle} type="number" value={searchObj.width} onBlur={e => handBlur(e, 1)} placeholder="请输入幅宽"></Input>
                <View className={styles.danwei}>CM</View>
              </View>
            </View>
            <View className={styles.leftTop} >
              <View className={styles.lefttopTitle}>克重</View>
              <View className={styles.lefttopSelectBox}>
                <Input className={styles.inputstyle} type="number" value={searchObj.weight_density} onBlur={e => handBlur(e, 2)} placeholder="请输入克重"></Input>
                <View className={styles.danwei}>KG</View>
              </View>
            </View>
          </View>
          <View className={styles.topBox}>
            <View className={styles.leftTop} >
              <View className={styles.lefttopTitle}>成分</View>
              <View className={styles.inputBox}>
                <Input className={styles.inputClass} type="text" value={searchObj.component} onBlur={e => handBlur(e, 3)} placeholder="请输入成分"></Input>
              </View>
            </View>
          </View>
          <View className={styles.safeBox}></View>
          <View className={styles.bottomBox}>
            <Button
              className={styles.resetBox}
              plain
              onClick={() =>
                handReset()
              }
            >
              重置
            </Button>
            <Button
              className={styles.activeButton}
              plain
              //   disabled={isDisabled}
              onClick={() =>
                handSure?.()
              }
            >
              确认
            </Button>
          </View>
        </View>
      </ScrollView>
    </Popup>
  )
}
export default memo(SearchPopup)
