import { View, Input, Image, Text, ScrollView } from "@tarojs/components"
import CustomNav from "@/components/CustomNav";
import searchImg from '@/assets/comm/search.png'
import { useState } from "react";
import MyCard from "@/components/MyCard";
import Footer from "@/components/Footer";
import './style.less'

export default () => {
  const [imageShow, setImageShow] = useState(true)
  const [currentTab, setCurrentTab] = useState(0);
  const handleSearch = (e) => {
    if (e.detail.value) {
      console.log(e.detail.value)
      setImageShow(false)
    } else {
      setImageShow(true)
    }
  }
  const handleClick = () => {
    setImageShow(false)
  }
  const handleChange = (val) => {
    setCurrentTab(val)
  }
  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav title='更多' />
      </View>
      <View className='searchClass'>
        <Input type='text' className='searchInput' onClick={handleClick} onBlur={handleSearch} placeholder='搜索关键字查询订单' />
        {
          imageShow && (
            <Image src={searchImg} className='searchImg' />
          )
        }
      </View>
      <View className='tabbar'>
        <View
          className={['tabberItem', currentTab === 0 ? "activeTabber" : '']}
          onClick={() => handleChange(0)}
        >
          <View>
            <Text className='text'>待付款</Text>
            {
              currentTab === 0 && <View className='line' />
            }
          </View>
        </View>
        <View
          className={['tabberItem', currentTab === 1 ? "activeTabber" : '']}
          onClick={() => handleChange(1)}
        >
          <View>
            <Text className='text'>进行中</Text>
            {
              currentTab === 1 && <View className='line' />
            }
          </View>
        </View>
        <View
          className={['tabberItem', currentTab === 2 ? "activeTabber" : '']}
          onClick={() => handleChange(2)}
        >
          <View>
            <Text className='text'>已完成</Text>
            {
              currentTab === 2 && <View className='line' />
            }
          </View>
        </View>
      </View>
      <View className='index-container'>
        <ScrollView scrollY style={{ height: '100%' }}>
          {currentTab}
          <MyCard />
          <MyCard />
          <MyCard />
          <Footer />
        </ScrollView>
        {/* {currentTab === 0 && <View>777</View>}
        {currentTab === 1 && <View>888</View>}
        {currentTab === 2 && <View>999</View>} */}
      </View>
    </View>
  )
}