import wx from '../../../utils/wx';
import Yas from '../../../common/yas';
import searchModel from '../../../models/product/search';

const {windowHeight} = getApp().getSystemInfo();
const app = getApp();

let yas;

Page({
  data: {
    query: '',
    order: '',
    gender: '',
    searched: false,
    productList: [],
    isLoading: false,
    currentPage: 0,
    totalPage: 0,
    noResult: false,
    showLoading: false,
    showNoMore: false,
    showBackTop: false,
    recentKeys: [],
    windowHeight: windowHeight
  },
  onReachBottom: function() {
    if (this.data.currentPage < this.data.totalPage) {
      this.setData({
        showLoading: true
      });
      this.productList({
        query: this.data.query,
        order: this.data.order,
        gender: this.data.gender,
        page: this.data.currentPage + 1,
        limit: 20
      });
    } else {
      this.setData({
        showNoMore: true
      });
    }
  },
  onLoad: function() {
    yas = new Yas();
    yas.pageOpenReport();
  },
  onShow: function() {
    this.getRecentKeys();
  },
  onPageScroll: function({scrollTop}) {
    if (scrollTop > windowHeight * 2 !== this.data.showBackTop) {
      this.setData({
        showBackTop: scrollTop > windowHeight * 2
      });
    }
  },
  backTop: function() {
    wx.pageScrollTo({
      scrollTop: 0
    });
  },
  bindQueryInput: function(e) {
    this.setData({
      query: e.detail.value
    });
  },
  clearQuery: function() {
    this.setData({
      query: ''
    });
  },
  confirmQuery: function(e) {
    let query = e.detail.value.trim();

    if (!query) {
      return wx.showToast({
        title: '请输入检索关键词',
        icon: 'none',
        duration: 1000
      });
    }

    this.setData({searched: true, query});
    this.data.productList = [];
    this.setRecentKeys(query);
    this.productList({page: 1, limit: 20, query, order: this.data.order, gender: this.data.gender});
  },
  productList: function(params) {
    if (!params.query) {
      return wx.showToast({
        title: '检索关键词不能为空',
        icon: 'none',
        duration: 1500
      });
    }
    if (this.data.isLoading) {
      return;
    }

    this.data.isLoading = true;
    wx.showLoading({title: '加载中'});
    params.shop_id = app.getShopId();
    searchModel.productList(params).then(res => {
      if (res.code === 200) {
        const keyAdapter = {
          skn: 'product_skn',
          salesPrice: 'sales_price',
          marketPrice: 'market_price',
          productName: 'product_name',
          defaultImages: 'default_images'
        };
        let list = [];

        (res.data.product_list || []).forEach(product => {
          let item = {};

          Object.keys(keyAdapter).forEach(key => {
            item[key] = product[keyAdapter[key]];
          });
          list.push(item);
        });

        this.data.isLoading = false;
        this.setData({
          showLoading: false,
          productList: this.data.productList.concat(list),
          currentPage: params.page,
          totalPage: res.data.page_total,
          noResult: this.data.productList.concat(list).length === 0
        });

        if (params.resetScroll) {
          wx.pageScrollTo({
            scrollTop: 0,
            duration: 10
          });
        }
        wx.hideLoading();
      }
    }).catch(() => {
      this.data.isLoading = false;
      wx.hideLoading();
    });
  },
  sortChange: function(e) {
    let params;
    let {curSort, gender} = e.detail;

    this.data.gender = gender;
    this.data.order = curSort;

    params = {
      gender,
      order: curSort,
      page: 1,
      limit: 20,
      query: this.data.query
    };
    this.data.productList = [];
    params.resetScroll = true;
    this.productList(params);
  },

  searchRecent: function(e) {
    const key = e.target.dataset.key;

    this.confirmQuery({
      detail: {
        value: key
      }
    });
  },

  deleteRecent: function() {
    wx.setStorage({
      key: 'search_hot_keys',
      data: []
    });
    this.setData({
      recentKeys: []
    });
  },

  setRecentKeys: function(key) {
    let distinctArr = this.data.recentKeys.filter(item => {
      return item !== key;
    });

    distinctArr.unshift(key);
    wx.setStorage({
      key: 'search_hot_keys',
      data: distinctArr
    });
  },

  getRecentKeys: function() {
    wx.getStorage({
      key: 'search_hot_keys'
    }).then(res => {
      this.setData({
        recentKeys: res.data || []
      });
    });
  }
});