<import src="../../components/poi/poi.wxml"/>

<scroll-view scroll-x="true" class="header">
  <view class="nav">
    <view class="{{ poiType === 'all' ? 'selected' : ''}}" data-type="all" bindtap="changePOIType">全部</view>
    <view class="{{ poiType === 'sights' ? 'selected' : ''}}" data-type="sights" bindtap="changePOIType">景点</view>
    <view class="{{ poiType === 'hotel' ? 'selected' : ''}}" data-type="hotel" bindtap="changePOIType">住宿</view>
    <view class="{{ poiType === 'restaurant' ? 'selected' : ''}}" data-type="restaurant" bindtap="changePOIType">餐厅</view>
    <view class="{{ poiType === 'entertainment' ? 'selected' : ''}}" data-type="entertainment" bindtap="changePOIType">休闲娱乐</view>
    <view class="{{ poiType === 'mall' ? 'selected' : ''}}" data-type="mall" bindtap="changePOIType">购物</view>
  </view>
</scroll-view>
<scroll-view class="list" style="height: {{ windowHeight - 70 / pixelRatio }}px; width: {{ windowWidth }}px;" scroll-y="true"  bindscrolltolower="loadMore" lower-threshold="800">
  <block wx:for="{{ pois }}" wx:for-item="poi" wx:key="poi.id">
    <template is="m-poi" data="{{poi: poi}}" />
  </block>
  <view wx:if="{{ hasMore }}" class="loading">
    正在加载...
  </view>
</scroll-view>

@import "../../components/poi/poi.wxss";

page{
  background-color: #fbf7ed;
  margin-top: 90rpx;
}
.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70rpx;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 100;
}
.nav{
  display: inline-block;
  margin: 10rpx 20rpx;
  white-space: nowrap;
  overflow: hidden;
}
.nav view{
  color: #b0b0b0;
  display: inline-block;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 30rpx;
}
.nav .selected{
  color: #fff;
  border-radius: 50rpx;
  background-image: linear-gradient(to top, #4abdcc, #51d7df);
}
.list{
  position: absolute;
  top: 0;
  padding-top: 70rpx;
}
.m-poi{
  margin: 20rpx;
}
.loading{
  color: #999;
  text-align: center;
  margin: 20rpx 0;
}

const App = getApp();
const api = require('../../utils/api.js');

Page({
  data: {
    title: '',
    type: null,
    id: null,
    pois: null,
    poiType: 'all',
    start: 0,
    loading: false,
    hasMore: true,
    windowWidth: App.systemInfo.windowWidth,
    windowHeight: App.systemInfo.windowHeight,
    pixelRatio: App.systemInfo.pixelRatio,
  },
  onReady() {
    const self = this;
    wx.setNavigationBarTitle({
      title: self.data.title,
    });
  },
  onLoad(options) {
    const self = this;
    const type = options.type;
    const id = options.id;
    const name = options.name;
    wx.showToast({
      title: '正在加载',
      icon: 'loading',
      duration: 10000,
    });
    this.setData({
      title: name,
      type,
      id,
    });
    wx.setNavigationBarTitle({
      title: name,
    });
    wx.getSystemInfo({
      success(res) {
        self.setData({
          windowHeight: res.windowHeight,
        });
      },
    });
    this.getPOIList(type, id, 'all', true);
  },
  getPOIList(type, id, poiType, needRefresh) {
    const self = this;
    const loading = self.data.loading;
    const hasMore = self.data.hasMore;
    if (loading || (!hasMore && !needRefresh)) {
      return;
    }
    self.setData({
      loading: true,
    });
    if (needRefresh) {
      self.setData({
        pois: [],
        start: 0,
        hasMore: true,
      });
    }
    const data = {
      start: self.data.start,
    };
    api.getPlacePOIByID({
      data,
      query: {
        type,
        id,
        poiType,
      },
      success: (res) => {
        let newList = res.data.items;
        if (needRefresh) {
          console.log('needRefresh');
        } else {
          newList = self.data.pois.concat(newList);
        }
        const nextStart = res.data.next_start;
        if (nextStart) {
          self.setData({
            start: nextStart,
          });
        } else {
          self.setData({
            hasMore: false,
          });
        }
        self.setData({
          pois: newList,
          loading: false,
        });
        wx.hideToast();
      },
    });
  },
  loadMore() {
    const self = this;
    this.getPOIList(self.data.type, self.data.id, self.data.poiType, false);
  },
  changePOIType(e) {
    // TODO: stop previous request
    const self = this;
    const poiType = e.currentTarget.dataset.type;
    self.setData({
      poiType,
    });
    this.getPOIList(self.data.type, self.data.id, poiType, true);
  },
});