import { View } from '@tarojs/components'
import Search from '@/components/search'
import { alert, goLink } from '@/common/common';
import classnames from "classnames";
import styles  from './search.module.scss'
import { useEffect, useRef, useState } from 'react';
import {GetHotSearchApi, GetSearchHistoryApi, AddSearchHistoryApi} from "@/api/search"
import { SCENE } from '@/common/constant';
import useLogin from '@/use/useLogin';
import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro';

type searchDataParam = {'search_key':''}
export default () => {
  const {checkLogin} = useLogin()
  useDidShow(async () => {
    await checkLogin()
  })

  const [searchData, setSearchData] = useState<{hotField: searchDataParam[], historyField: searchDataParam[]}>({
    hotField: [],
    historyField: []
  })

  //获取热门搜索数据
  const {fetchData:hotFetchData} = GetHotSearchApi()
  const getHotSearch = async () => {
    let {data} = await hotFetchData()
    setSearchData((val) => ({...val, hotField: data.list}))
  }

  //获取历史搜索数据
  const {fetchData:HistoryFetchData} = GetSearchHistoryApi()
  const getSearchHistory = async () => {
    let {data} = await HistoryFetchData()
    setSearchData((val) => ({...val, historyField: data.list}))
  }

  useEffect(() => {
    getHotSearch(),
    getSearchHistory()
  }, [])

  //添加搜索关键字
  const addSearchField = useRef({key: '', screen: SCENE.SearchScene})
  const {fetchData:addFetchData} = AddSearchHistoryApi()
  const addSearchHistory = async () => {
    await addFetchData(addSearchField.current)
    // goLink('/pages/searchList/searchList', {key: addSearchField.current.key})
    
  }

  //搜索事件, status = true 添加搜索， status = false 直接跳转
  const searchEvent = (e, status = true) => {
    if(e == "") {
      alert.error('请输入关键词')
      return false
    } 
    addSearchField.current.key = e
    status&&addSearchHistory()
    Taro.navigateTo({
        url: `/pages/searchList/searchList?key=${addSearchField.current.key}`
    })
  }


  return (
    <View className={styles.main}>
      <View className={styles.search}>
        <Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={(e) => searchEvent(e)}/>
      </View>
      <View className={styles.up_search} onClick={() => goLink('/pages/searchList/searchList')}>高级搜索</View>
      {searchData?.hotField.length > 0 && <View className={styles.hot}>
        <View className={styles.hot_header}>
          <View className={styles.hot_header_title}>热门面料</View>
        </View>
        <View className={styles.list}>
          {searchData.hotField.map((item, index) => {
            return <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>
          })}
        </View>
      </View>}
      {searchData?.historyField.length > 0 && <View className={styles.history}>
        <View className={styles.history_header}>
          <View className={styles.history_header_title}>历史搜索</View>
          <View className={classnames('iconfont icon-lajixiang', styles.miconfont)}></View>
        </View>
        <View className={styles.list}>
          {searchData?.historyField?.map((item, index) => <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>)}
        </View>
      </View>}
    </View>
  )
}