import { Input, ScrollView, Text, Textarea, View } from '@tarojs/components'
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'

type params = {
  onFiltr?: (val: object) => void
} & PopuParams
const Filter = ({ onClose, onFiltr, show = false }: params) => {
  const [filterObj, setFilterObj] = useState({
    series: '',
    minWidth: '',
    maxWidth: '',
    minWeight: '',
    maxWeight: '',
    element: '',
  })
  const onCloseEven = () => {
    onClose?.()
  }
  const onRest = () => {
    console.log('12123')
    setFilterObj({
      series: '',
      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}>
                <View className={classnames(styles.btn_item, styles.select_btn_item)}>不限</View>
                <View className={styles.btn_item}>不限</View>
                <View className={styles.btn_item}>不限</View>
                <View className={styles.btn_item}>不限</View>
                <View className={styles.btn_item}>不限</View>
                <View className={styles.btn_item}>不限</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
                    alwaysEmbed
                    cursorSpacing={150}
                    value={filterObj.minWidth}
                    type="digit"
                    onBlur={e => setNumber(e, 'minWidth')}
                    placeholder="自定义最低值"
                    placeholderStyle="font-size: 26rpx"
                  />
                </View>
                <Text>—</Text>
                <View className={styles.btn_width}>
                  <Input
                    alwaysEmbed
                    cursorSpacing={150}
                    value={filterObj.maxWidth}
                    type="digit"
                    onBlur={e => setNumber(e, 'maxWidth')}
                    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
                    alwaysEmbed
                    cursorSpacing={150}
                    type="digit"
                    value={filterObj.minWeight}
                    onBlur={e => setNumber(e, 'minWeight')}
                    placeholder="自定义最低值"
                    placeholderStyle="font-size: 26rpx"
                  />
                </View>
                <Text>—</Text>
                <View className={styles.btn_width}>
                  <Input
                    alwaysEmbed
                    cursorSpacing={150}
                    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 Filter
