<scroll-view class="page"  bindscrolltolower="lower" scroll-y="true" style="height:100%" scroll-into-view="{{toView}}"
upper-threshold="10"
>
 <view class="section swiper-container">
    <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{4000}}" duration="{{300}}">
      <block wx:for="{{banners}}" wx:for-item="banner">
        <swiper-item   data-activity-id="{{banner.link_id}}" data-activity-type="{{banner.type}}"
    data-activity-url="{{banner.link_url}}"
    bindtap="navigateToActivity">
          <image mode="aspectFill" src="{{banner.image_src}}"
          ></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="section activity-list">
    <view class="activity" wx:for="{{activities}}" wx:for-item="activity"
    data-activity-id="{{activity.link_id}}" data-activity-type="{{activity.type}}"
    data-activity-url="{{activity.link_url}}"
    bindtap="navigateToActivity">
      <image mode="aspectFill" src="{{activity.image_src}}"></image>
      <label>{{activity.title}}</label>
    </view>
  </view>

  <view  class="section feature-list" >
    <view class="feature-header">
      <icon><image  class="header-img" src="./images/feature.png"></image></icon>
      <text>{{shop_info.index_recommend_title}}</text>
    </view>
   <block  wx:for="{{features}}" wx:for-item="feature" >
      <view wx:if="{{feature.is_sold_out}}" class="feature clearfix" data-goods-id="{{feature.goods_id}}">
        <image mode="aspectFill" src="{{feature.image_url}}"></image>
        <view  class="sold-out-overlay">
         <text class="sold-out-tag">已售罄</text>
           </view>
        <view class="title-wrapper">
        <label class="title">{{feature.goods_name}}</label>
       </view>
         <label class="sold-out-price">¥ {{feature.goods_price}}</label>
        </view>
      <view wx:else class="feature clearfix" data-goods-id="{{feature.goods_id}}" bindtap="navigateToProduct">   
       <image mode="aspectFill" src="{{feature.image_url}}"></image>
        <view class="title-wrapper">
        <label class="title">{{feature.goods_name}}</label>
      </view>
      <label class="price">¥ {{feature.goods_price}}</label>
    </view>
    </block>
  </view>
</scroll-view>

.page{
  background-color: #f8f8f8
}
.swiper-container {
  margin-top: 0;
  padding: 0;
}

.swiper-container swiper {
  height: 315.9rpx;
}

swiper-item image {
  width: 100%;
  height: 100%;
}

.activity-list {
  display: flex;
  flex-direction: row;
  background-color: white;
  padding: 0;
}

.activity {
  width: 25%;
  text-align: center;
}

.activity image {
  width: 117rpx;
  height: 117rpx;
  margin: 0 auto;
  margin-top: 28.08rpx;
  border-radius: 50%;
}

.activity label {
  display: block;
  line-height: 65.52rpx;
  font-size: 28.08rpx;
}

.feature-header {
  border-bottom: 1px solid #f8f8f8;
  height: 85rpx;
}

.feature-header text {
    margin: 0;
    font-weight: normal;
    font-size: .9rem;
    line-height: 1.6rem;
    display: inline;
    position: relative;
    top: -29rpx;
}

.feature {
  margin: 0 -16.38rpx;
  padding: 16.38rpx;
  border-bottom: 1px solid #f8f8f8;
  background-size: cover;
  position: relative;
}

.feature image {
  width: 100%;
  height: 315.9rpx;
}

.feature .title-wrapper {
  font-size: 28.08rpx;
  height: 70.2rpx;
  line-height: 70.2rpx;
  overflow: hidden;
}

.feature .price {
  display: block;
  color: #fc3151;
  float: right;
  font-size: 1rem;
}
.sold-out-tag{
    display: block;
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    color: white;
    line-height: 140rpx;
    font-size: 35rpx;
    text-align: center;
    margin: 0 auto;
    margin-top: 100rpx;
    background-color: rgba(0, 0, 0, 0.5);
}
.sold-out-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.5);
}
.sold-out-price{
  display: block;
  color: darkgray;
  float: right;
}
.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 
.header-img {
    width: 55rpx;
    height: 40rpx;
    margin-right: 20rpx;
    padding: 24rpx 0;
}

import Promise from '../../lib/promiseEs6Fix';
import request from '../../lib/request';
import resource from '../../lib/resource';
import serviceData from '../../data/config';

function homeSay(name) {
  console.log(`Hello ${name} !`);
}
module.exports.hSay = homeSay;
var app = getApp();
Page({
  data: {
    shop_id: app.globalData.shop_id,
    shop_info:[],
    banners: [],
    activities: [],
    features: [],
    currentPage: 1,
  },
  navigateToProduct(event) {
    var productId = event.currentTarget.dataset.goodsId;
    wx.navigateTo({
      url: '../products/products?id=' + productId
    });
  },
  navigateToActivity(event) {
    var activityType = event.currentTarget.dataset.activityType;
    var activityId = event.currentTarget.dataset.activityId;
    var activityTitle = event.currentTarget.dataset.activityTitle;
    var activityUrl;
    switch (activityType) {
      case 1:
        activityUrl = "../category-product/category-product?id=" + activityId + '&title=' + activityTitle;
        break;
      case 2:
        activityUrl = "../products/products?id=" + activityId;
        break;
      case 3:
        activityUrl = event.currentTarget.dataset.activityUrl;
        break;
      default:
        break;
    }
    console.log(activityUrl);
    wx.navigateTo({
      url: activityUrl
    });
  },
  onLoad() {
    this.setData({ shop_info: app.globalData.shopInfo });
    this.setData({banners: serviceData.bannerData, activities:serviceData.activityData, features:serviceData.featureData});
    //发起多个请求
    // const requests = ['/banners?shop_id=2' + this.data.shop_id,
    //     '/activities',
    //     '/features?shop_id=' + this.data.shop_id + '&per_page=5'
    //   ]
    //   .map(path => (
    //     request({ path })
    //     .then(response => response.data)
    //     .catch(() => [])
    //   ));
    // Promise.all(requests).then(([banners, activities, features]) => {
    //   features.forEach(item => {
    //     item.goods_price = item.goods_price.toFixed(2);
    //   })
    //   this.setData({ banners, activities, features });
    //   console.log(23);
    // },([banners, activities, features]) => {
    //   console.log([banners, activities, features]);
    // },([banners, activities, features]) => {
    //   console.log([banners, activities, features]);
    // });
  },
  lower: function() {
    console.log('lower more features data');
    wx.showNavigationBarLoading();
    var that = this;
    setTimeout(() => {
      wx.hideNavigationBarLoading();
      var nextPageData = new Object();
      nextPageData.per_page = 5;
      nextPageData.page = this.data.currentPage + 1;
      nextPageData.shop_id = this.data.shop_id;
      var features = serviceData.featureData;
      if (features.length != 0) {
        this.setData({ currentPage: ++this.data.currentPage });
        this.setData({ features: this.data.features.concat(features) }); //concat 拼接在一起
      }
      // request({ path: '/features', data: nextPageData }).then(({ data: features }) => {
      //   if (features.length != 0) {
      //     this.setData({ currentPage: ++this.data.currentPage });
      //     this.setData({ features: this.data.features.concat(features) }); //concat 拼接在一起
      //   }
      // });
    }, 1000);
  }
});