import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
import Product from '@/components/product'
import InfiniteScroll from '@/components/infiniteScroll'
import Popup from "@/components/popup";
import styles  from './index.module.scss'
import { useState } from "react";
import Filter from "./components/filter";

export default () => {
    const [showPopup, setShowPopup] = useState(false)
    return (
        <View className={styles.main}>
            <View className={styles.search}>
                <Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}}/>
            </View>
            <View className={styles.filter}>
                <View className={styles.filter_all}>
                    <View className={styles.text_one}>综合</View>
                    <View className={styles.text_two} onClick={() => setShowPopup(true)}>
                        <Text>筛选</Text>
                        <Text className={classnames('iconfont icon-bianji_bianji', styles.miconfont)}></Text>
                    </View>
                </View>
                <View className={styles.filter_btn}>
                    <View>系列</View>
                    <View>幅宽</View>
                    <View>克重</View>
                    <View className={styles.selected}>成分</View>
                </View>
            </View>
            <View className={styles.list}>
                <InfiniteScroll selfonScrollToLower={() => console.log('123123')}>
                    <Product desStatus={false}/>
                </InfiniteScroll>
            </View>
            <Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={(e) => console.log('e:::',e)}/>
        </View>
    )
}