import { Input, ScrollView, Text, Textarea, View } from '@tarojs/components'
import { useDidShow } from '@tarojs/taro'
import classnames from 'classnames'
import { useEffect, useState } from 'react'
import styles from './index.module.scss'
import Popup from '@/components/popup'
import type { Params as PopuParams } from '@/components/popup'
import { GetProductKindListApi } from '@/api/material'

type params = {
  onFiltr?: (val: object) => void
} & PopuParams

const FilterV2 = ({ onClose, onFiltr, show = false }: params) => {
  // 搜索条件
  const [filterObj, setFilterObj] = useState({
    seriesId: '',
    minWidth: '',
    maxWidth: '',
    minWeight: '',
    maxWeight: '',
    element: '',
  })

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

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

  // 切换系列
  const changeKind = (e) => {
    setFilterObj({ ...filterObj, seriesId: e.id })
  }

  const onCloseEven = () => {
    onClose?.()
  }
  const onRest = () => {
    console.log('12123')
    setFilterObj({
      seriesId: '',
      minWidth: '',
      maxWidth: '',
      minWeight: '',
      maxWeight: '',
      element: '',
    })
  }
  useEffect(() => {
    console.log(filterObj)
  }, [filterObj])

  const onVerify = () => {
    console.log(filterObj)
    onFiltr?.(filterObj)
  }

  const setNumber = (e, field) => {
    console.log(e)
    const num = parseFloat(e.detail.value)
    if (Number.isNaN(num)) {
      filterObj[field] = null
    }
    else {
      filterObj[field] = parseFloat(num.toFixed(2))
    }
    setFilterObj({ ...filterObj })
  }

  const setElement = (e) => {
    const res = e.detail.value
    setFilterObj({ ...filterObj, element: res })
  }
  return (

    <Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton>
      <View className={styles.popup_main}>
        <View className={styles.popup_title}>全部筛选</View>
        <ScrollView scrollY className={styles.scroll}>
          <View className={styles.popup_filter}>
            <View className={styles.popup_filter_item}>
              <View className={styles.title}>系列</View>
              <View className={styles.btn_list}>
                {kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id) && styles.select_btn_item)}>{item.name}</View>)}
              </View>
            </View>
            <View className={styles.popup_filter_item}>
              <View className={styles.title}>幅宽</View>
              <View className={styles.btn_list_input}>
                <View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={e => setNumber(e, 'minWidth')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx" /></View>
                <View className={styles.unit}>cm</View>
              </View>
            </View>
            <View className={styles.popup_filter_item}>
              <View className={styles.title}>克重</View>
              <View className={styles.btn_list_input}>
                <View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={e => setNumber(e, 'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx" /></View>
                <Text>—</Text>
                <View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={e => setNumber(e, 'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx" /></View>
                <View className={styles.unit}>g</View>
              </View>
            </View>
            <View className={styles.popup_filter_item}>
              <View className={styles.title}>成分</View>
              <View className={styles.btn_list_element}>
                <Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={e => setElement(e)} />
              </View>
            </View>

            <View className="common_safe_area_y"></View>
          </View>
        </ScrollView>
        <View className={styles.btns_con}>
          <View className={styles.btns_two}>
            <View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
            <View className={styles.verify_btn} onClick={() => onVerify()}>确认</View>
          </View>
        </View>
      </View>
    </Popup>

  )
}

export default FilterV2
