import APIMOCK from './mock';
import { getSearchList, getSearchRecord, deleteSearchRecord } from '@api/search';

const historyMaxLength = 8; // 最多允许10条历史记录

Page({
  data: {
    searchHistoryList: new Array<SearchHistoryItem>(), // 搜索历史
    searchHotList: APIMOCK.searchHotList, // 热门搜索词列表
    value: '',
    recommendList: APIMOCK.RecommendList,
    showGuidePage: true,
    focus: true,
  },

  onLoad(options: { query: string }) {
    this.getSearchHistory();
    this.setData({ showGuidePage: !options.query, value: options.query });
  },

  onSearch(e: { detail: string }) {
    // todo 匹配搜索关键词和搜索热词的关系 没有匹配上则跳转搜索结果页
    this.showSearchResult(e.detail);
  },

  onChange(e: { detail: string }) {
    this.setData({ value: e.detail });
  },

  onClear() {
    this.setData({ showGuidePage: true });
  },

  // 点击搜索，获取搜索结果
  async showSearchResult(keyword: string) {
    this.changeSearchHistoryStorage(keyword);

    try {
      const resp = await getSearchList(keyword);
      const recommendList = resp.code === 0 ? resp.data.list : [];
      this.setData({
        recommendList: recommendList.map((item: GoodsItem) => ({
          id: item.goods_id,
          title: item.goods_name,
          price: item.sale_price,
          originPrice: item.goods_price,
          thumb: item.main_pic_path,
          type: item.type,
        })),
        showGuidePage: false,
      });
    } catch (error) {
      // TODO 网络错误的处理
    }
  },

  changeSearchHistoryStorage(str: string) {
    // 如果历史中有本条记录 调转位置
    // 否则插入历史记录最前端
    const historyResList = wx.getStorageSync('searchHistory')
      ? wx.getStorageSync('searchHistory').split(';')
      : [];
    if (historyResList.length) {
      const index = historyResList.indexOf(str);
      if (index > -1) {
        historyResList.splice(index, 1);
      }
    }
    historyResList.unshift(str);
    historyResList.slice(0, historyMaxLength);
    wx.setStorageSync('searchHistory', historyResList.join(';'));
    this.getSearchHistory();
  },

  async getSearchHistory() {
    // 使用本地缓存
    const searchHistory = wx.getStorageSync('searchHistory')
      ? wx.getStorageSync('searchHistory').split(';')
      : [];
    const searchHistoryList = searchHistory.map((item: string) => ({
      title: item,
      url: `/pages/search/index?query=${item}`,
    }));
    this.setData({
      searchHistoryList,
    });

    this.getSearchRecord();
  },

  async getSearchRecord() {
    // 请求接口获取数据
    try {
      const resp = await getSearchRecord();
      console.log(resp);
      const searchHistoryList = resp.data.keywords.map((item: string) => ({
        title: item,
        url: `/pages/search/index?query=${item}`,
      }));
      this.setData({
        searchHistoryList,
      });

      wx.setStorageSync('searchHistory', searchHistoryList.join(';'));
    } catch (error) {
      // TODO 网络错误的处理
    }
  },

  // 清空历史记录
  async clearSearchHistory() {
    try {
      const resp = await deleteSearchRecord();
      console.log(resp);
      wx.setStorageSync('searchHistory', '');
      this.setData({
        searchHistoryList: [],
      });
    } catch (error) {}
  },

  handleClickHistory(e: WechatMiniprogram.TouchEvent) {
    const title = e.currentTarget.dataset?.title;
    this.changeSearchHistoryStorage(title);
    this.setData({ showGuidePage: false, value: title });
  },

  handleClickIcon(e: WechatMiniprogram.TouchEvent) {
    // todo 要区分是其他小程序 or h5页面 or 当前小程序的其他页面
    const url = e.currentTarget.dataset?.url;
    wx.redirectTo({ url });
  },

  handleClickBack() {
    // if 当前显示搜索结果 退回搜索中间态 focus
    // elseif 当前搜索中间态且有搜索词 退回空搜索中间态
    // else 退回上一页
    if (!this.data.showGuidePage) {
      this.setData({ showGuidePage: true, focus: true });
      return;
    }
    if (this.data.value) {
      this.setData({ value: '', focus: true });
      return;
    }
    wx.navigateBack();
  },

  handleClickHome() {
    wx.navigateBack({ delta: 999 });
  },
});