import wx from '../../utils/wx';
import Yas from '../../common/yas';
import Promise from '../../vendors/es6-promise';
import commonModel from '../../models/common';
import indexModel from '../../models/index/index';

let yas;
const app = getApp();
const router = global.router;

Page({
  data: {
    shopInfo: {},
    shopBanner: '',
    shopProductList: [],
    decorFloors: [],
    floatFilter: false,
    pageScrollTop: 0,
    standInClientTop: 0,
    disableDecide: false,
    searchBarHeight: 0,
    filterHeight: 0,
    filterTrigger: false,

    gender: '',
    order: '',
    page: 1,
    limit: 20,
    totalPage: 1,
    allLoaded: false,
    showLoading: false
  },
  onLoad: function() {
    yas = new Yas(app);
  },
  onShow: function() {
    const shopId = app.getShopId();

    if (shopId) {
      this.getShopData(shopId);
      this.getShopProducts(shopId);
    } else {
      commonModel.getBindShop({app_id: app.getAppId()}).then(res => {
        if (res.code === 200 && res.data.shopId) {
          const id = res.data.shopId;

          app.globalData.unionShop = res.data;
          app._setSync('unionShop', res.data);

          this.getShopData(id);
          this.getShopProducts(id);
        } else {
          return Promise.reject();
        }
      }).catch(() => {});
    }

    // 记录
    this.recordHeight();
  },

  onPageScroll: function({scrollTop}) {
    this._decideFloatFilter(scrollTop);
  },

  onReachBottom: function() {
    this._productList();
  },

  getShopData: function(shopId) {
    this._shopInfo(shopId);
    this._shopDecor(shopId);
  },

  getShopProducts: function() {
    this._productList();
  },

  toSearch() {
    router.go('productSearch');
  },

  resourceClickReport: function(e) {
    yas.report('YB_MAIN_EVENT', e.detail);
  },

  recordHeight: function() {
    const query = wx.createSelectorQuery();

    query.select('.search-bar').boundingClientRect(rect => {
      this.data.searchBarHeight = rect.bottom - rect.top;
    }).exec();

    query.select('.header-filter').boundingClientRect(rect => {
      this.data.filterHeight = rect.bottom - rect.top;
    }).exec();
  },

  // 筛选变更
  filterChange: function(e) {
    let {curSort, gender} = e.detail;

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

    this._resetPage();
    this.data.shopProductList = [];
    this.data.filterTrigger = true;
    this._productList();
  },

  _resetPage: function() {
    this.data.page = 1;
    this.data.totalPage = 1;
    this.data.allLoaded = false;
  },

  // 店铺信息
  _shopInfo: function(shopId) {
    const params = {
      shop_id: shopId
    };

    indexModel.shopInfo(params)
      .then(res => {
        if (res.data.shop_name) {
          let shopName = res.data.shop_name;

          wx.setNavigationBarTitle({
            title: shopName,
          });
        }

        let shopInfo = res.data;

        this.setData({
          shopInfo: shopInfo
        });
      });
  },

  // 店铺装修
  _shopDecor: function(shopId) {
    const params = {
      shop_id: shopId
    };

    indexModel.shopDecorator(params)
      .then(res => {
        if (res.code === 200) {
          let floors = [];
          let modules = res.data.modules;

          if (modules && modules.length > 0) {
            floors = modules.map(module => {
              module.data = JSON.parse(module.module_data).data;
              module.properties = JSON.parse(module.module_data).properties;
              delete module.module_data;

              return module;
            });

            const banner = floors[0];

            if (banner && banner.module_type === 'ShopBanner') {
              this.setData({
                shopBanner: banner.data[0] && banner.data[0].pic
              });
            }

            this.setData({
              decorFloors: floors
            });
          }
        }
      })
      .catch(() => {});
  },

  // 商品列表
  _productList: function(params = {}) {
    if (this.data.allLoaded) {
      return;
    }

    this.setData({
      showLoading: true
    });

    params.page = this.data.page;
    params.limit = this.data.limit;
    params.gender = this.data.gender;
    params.order = this.data.order;
    params.shop_id = app.getShopId();

    indexModel.shopProductList(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.page += 1;
        this.data.totalPage = res.data && res.data.page_total || 1;

        this.setData({
          showLoading: false,
          allLoaded: this.data.page > this.data.totalPage,
          shopProductList: this.data.shopProductList.concat(list)
        });

        if (this.data.floatFilter && this.data.filterTrigger) {
          let calcTop;

          calcTop = this.data.pageScrollTop + this.data.standInClientTop - this.data.searchBarHeight;
          this.data.disableDecide = true;
          wx.pageScrollTo({
            scrollTop: calcTop,
            duration: 10
          });
          setTimeout(() => {
            this.data.disableDecide = false;
            this.data.filterTrigger = false;
          }, 200);
        }
      }
    }).catch(() => {});
  },

  _decideFloatFilter: function(scrollTop) {
    const query = wx.createSelectorQuery();
    const serHeight = this.data.searchBarHeight;

    if (this.data.disableDecide) {
      return;
    }

    this.data.pageScrollTop = scrollTop;
    query.select('.header-filter').boundingClientRect(rect => {
      if (rect.top < serHeight && !this.data.floatFilter) {
        this.setData({
          floatFilter: true
        });
      }
    }).exec();

    query.select('.filter-stand-in').boundingClientRect(rect => {
      this.data.standInClientTop = rect.top;
      if (rect.top > serHeight && this.data.floatFilter) {
        this.setData({
          floatFilter: false
        });
      }
    }).exec();
  }
});