import { View, Image, Input, Picker, Text } from "@tarojs/components"
import { useModel } from "@/store"

import withLayout from '@/layouts'
import { useState, useEffect } from "react"
import CustomNav from "@/components/CustomNav"
import searchs from '@/assets/homesImgaes/searchs.png'//搜索图片
import { getMachineryType, getMachinery } from "@/services/homes"
import CarTypeList from "./CarTypeList"



import './style.less'




export default withLayout((props) => {
  const [activeTab, setActiveTab] = useState(0)
  const { sserLocation } = useModel('userData')

  const [tabs, setTabs] = useState([])
  const [csrsListType, steCsrsListType] = useState([])
  const [activeNames, setActiveNames] = useState([])//全部分类
  const [classId, setClassId] = useState([])//分类ID



  const [tabIndex, steTabIndex] = useState(0)


  const handleSearch = (e) => {
  }




  // const ClassificationComparison = () => {
  //   for (let item1 of tabs) {
  //     let _index = activeNames.findIndex(c => c.name == item1.title)
  //     if (_index > -1) {
  //       item1.count = activeNames[_index].typeId;
  //       console.log('saleTypes=tempSales //这', activeNames[_index].typeId);

  //       // classId.push({ id: item1.count })

  //     }
  //   }



  // }

  useEffect(() => {
    if (tabIndex !== 0) {
      // ClassificationComparison()
      activeNames.map((item) => {
        classId.push({ id: item.typeId })

      })
      getMachinery(sserLocation, { typeId: classId[tabIndex - 1].id }).then((e) => {
        console.log('农机分类', e);
        steCsrsListType(e.records)
      })
    } else {
      // ClassificationComparison()

      getMachinery(sserLocation).then((e) => {
        steCsrsListType(e.records)
      })
    }


  }, [sserLocation, tabIndex])


  useEffect(() => {
    getMachineryType().then((e) => {
      const tabList = e.records
      setActiveNames(tabList)
      let tabss = tabList.map(x => ({ title: x.name, }))
      const newTabs = [{ title: '全部' }, ...tabss]
      setTabs(newTabs)

    })
  }, [])


  const handleTabChange = (e) => {
    console.log('e', e.detail);
    steTabIndex(e?.detail?.index)

  }


  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav title='更多' />
      </View>
      <scroll-view scrollY style='height: 100%;' >
        <View className='heads-content-searchClass-abcc'>
          <Input type='text' className='heads-content-searchClass-abcc-searchInput' onBlur={handleSearch} placeholder='搜索关键字查询订单' />
          <Image src={searchs} className='heads-content-searchClass-abcc-searchInput-searchImg' />
        </View>
        <mp-tabs
          tabClass='tabs-Unselected'
          swiperClass='tabs-swiper'
          activeClass='tabs-Selected'
          current={activeTab}
          activeTab={activeTab}
          tabs={tabs}
          onChange={handleTabChange}
        ></mp-tabs>


        {/* 内容区域 */}
        <View className='cententText'>
          <CarTypeList csrsListType={csrsListType} />
        </View>
      </scroll-view>
    </View>
  )
})