import { Input, ScrollView, Text, Textarea, View } from '@tarojs/components'
import { useDidShow } from '@tarojs/taro'
import classnames from 'classnames'
import { memo, useEffect, useRef, 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 // 确定搜索
  onRest?: (val: Object) => void // 重置
} & PopuParams

const Filter = ({ onClose, onFiltr, show = false, onRest }: params) => {
  // 搜索条件
  const [filterObj, setFilterObj] = useState({
    seriesName: '',
    seriesId: '',
    width: '',
    weight: '',
    element: '',
  })

  const selectFieldValue = useRef({ width: '幅宽', weight: '克重', element: '成分', seriesName: '系列' })

  // 获取系列
  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, seriesName: e.name })
  }

  const onCloseEven = () => {
    onClose?.()
  }

  // 重置数据
  const onRestEven = () => {
    const res = {
      seriesName: '',
      seriesId: '',
      width: '',
      weight: '',
      element: '',
    }
    setFilterObj(res)
    onFiltr?.(filterObj)
    onClose?.()
  }

  // 提交搜索
  const onVerify = () => {
    onFiltr?.({ data: filterObj, field: selectFieldValue.current })
    onClose?.()
  }

  // 获取幅宽或克重输入值或成分
  const setFieldData = (e, field) => {
    filterObj[field] = e.detail.value
    setFilterObj({ ...filterObj })
  }

  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.width} onBlur={e => setFieldData(e, 'width')} 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 value={filterObj.weight} onBlur={e => setFieldData(e, 'weight')} placeholder="请输入克重" placeholderStyle="font-size: 26rpx" /></View>
                <View className={styles.unit}>kg</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 => setFieldData(e, 'element')} />
              </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={() => onRestEven()}>重置</View>
            <View className={styles.verify_btn} onClick={() => onVerify()}>确认</View>
          </View>
        </View>
      </View>
    </Popup>
  )
}
export default memo(Filter)
