<view class="shoppingCart-wrap page" id="shoppingCart">
  <view class="shoppingCart-top-nav">购物车
  <view class="top-nav-right"><view class="shoppingCart-edit-btn" hidden="{{ editing }}" bindtap="switchToEdit">编辑</view><view class="shoppingCart-edit-complete" hidden="{{ !editing }}" bindtap="editComplete">完成</view></view></view>
  <view class="shoppingCart-bottom-nav" hidden="{{ editing }}">
    <label class="shoppingCart-check-box" bindtap="clickSelectAll">
      <label class="shoppingCart-select-all check-box {{ selectAll ? 'checked' : '' }}">
        <image src="http://img.zhichiwangluo.com/zc_app_fontschecked.png"></image>
      </label> 全选
    </label>
    <form report-submit="true" bindsubmit="goToPay">
      <button formType="submit" class="btn pull-right shoppingCart-goto-pay">结算({{ goodsCountToPay }})</button>
    </form>
    <!-- <label class="btn btn-red pull-right shoppingCart-goto-pay" bindtap="goToPay">结算（{{ goodsCountToPay }}）</label> -->
    <label class="pull-right" style="margin-right:10px;">合计:<text class="shoppingCart-all-price">¥ {{ priceToPay }}</text></label>
  </view>
  <view class="shoppingCart-edit-bar" hidden="{{ !editing }}"><label class="shoppingCart-check-box" bindtap="clickEditSelectAll"><label class="shoppingCart-select-all check-box {{ editSelectAll ? 'checked' : '' }}"><image src="http://img.zhichiwangluo.com/zc_app_fontschecked.png"></image></label>全选</label><text class="shoppingCart-delete-goods btn btn-red pull-right" bindtap="deleteGoods">删除所选</text></view>
  <view class="shoppingCart-list-wrap {{ editing ? 'editing-list' : '' }}">
    <view class="shoppingCart-goods-list">
      <view wx:for="{{ goodsList }}" wx:for-item="goods" style="position:relative; overflow:hidden;">
        <label hidden="{{ editing }}" data-index="{{ index }}" class="shoppingCart-check-box" bindtap="clickSelectGoods">
          <label class="check-box pull-left {{ goods.selected ? 'checked' : '' }}" >
            <image src="http://img.zhichiwangluo.com/zc_app_fontschecked.png"></image>
          </label>
        </label>
        <label hidden="{{ !editing }}" data-index="{{ index }}" class="shoppingCart-check-box" bindtap="clickEditSelectGoods">
          <label class="check-box pull-left {{ goods.editSelected ? 'checked' : '' }}">
            <image src="http://img.zhichiwangluo.com/zc_app_fontschecked.png"></image>
          </label>
        </label>
        <view class="shoppingCart-goods-content">
          <image class="shoppingCart-goods-cover" src="{{ goods.cover }}"></image>
          <view class="ellipsis shoppingCart-goods-title">{{ goods.title }}</view>
          <view class="ellipsis shoppingCart-goods-model" wx:if="{{ goods.model_value_str }}">{{ goods.model_value_str }}</view>
          <view class="quantity" hidden="{{ editing }}">
            <label class="minus {{ goods.num <= 1 ? 'disabled' : '' }}"></label>
            <input type="text" class="txt" value="{{ goods.num }}" data-index="{{ index }}" bindinput="inputGoodsCount"/>
            <label class="plus"></label>
            <view class="response-area response-area-minus" bindtap="clickMinusButton" data-index="{{ index }}"></view>
            <view class="response-area response-area-plus" bindtap="clickPlusButton" data-index="{{ index }}"></view>
          </view>
        </view>
        <view class="shoppingCart-goods-right">
          <view>¥ <text class="shoppingCart-goods-price">{{ goods.price }}</text></view>
          <view>× <text class="shoppingCart-goods-count">{{ goods.num }}</text></view>
        </view>
      </view>
    </view>
  </view>
</view>
<modal hidden="{{ modalConfig.hidden }}" bindconfirm="modalConfirm" bindcancel="modalCancel">{{ modalConfig.text }}</modal>

.shoppingCart-top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2.625rem;
  line-height: 2.625rem;
  padding: 0 0.625rem;
  margin-bottom: 0.625rem;
  box-shadow: 0 0.0625rem 0.125rem #eee;
  text-align: center;
  z-index: 9;
  background-color: #fff;
}
.top-nav-right {
  position: absolute;
  top: 0;
  right: 0.625rem;
  height: 100%;
}

.shoppingCart-edit-bar {
  position: fixed;
  top: 3.1875rem;
  left: 0;
  right: 0;
  margin-bottom: 0.625rem;
  padding: 0.3125rem 0.625rem;
  line-height: 1.9375rem;
  background: #fff;
}
.shoppingCart-list-wrap {
  margin-top: 2.8125rem;
  margin-bottom: 2.8125rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.shoppingCart-list-wrap.editing-list {
  margin-top: 6.25rem;
  margin-bottom: 0;
}
.shoppingCart-goods-list {
  background-color: #fff;
  margin-bottom: 0.625rem;
}
.shoppingCart-goods-list:last-child {
  margin-bottom: 0;
}
.shoppingCart-goods-list > view {
  position: relative;
}
.shoppingCart-goods-content {
  padding: 0.625rem 4.5rem 0.625rem 0;
}
.shoppingCart-goods-right {
  position: absolute;
  top: 0.625rem;
  right: 0.75rem;
  line-height: 1.25rem;
  text-align: right;
}
.shoppingCart-goods-list .shoppingCart-check-box {
  margin: 1.1rem 0.625rem 0;
  padding: 0.3rem;
  float: left;
}
.shoppingCart-goods-list .check-box {
  margin: 0;
}
.shoppingCart-goods-cover {
  float: left;
  width: 3.125rem;
  height: 3.125rem;
  margin-right: 0.625rem;
}
.shoppingCart-goods-title {
  font-size: 0.75rem;
}
.shoppingCart-goods-model {
  margin-top: 5rpx;
  color: #818181;
}
.quantity {
  margin-top: 14rpx;
}
.shoppingCart-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14rpx 23rpx;
  line-height: 89rpx;
  z-index: 9;
  background-color: #fff;
  box-shadow: 0 -2rpx 5rpx #eee;
}
.shoppingCart-all-price {
  color: #d20e10;
}
.shoppingCart-goto-pay {
  min-width: 5rem;
  background-color: #ffcc01;
  border-color: #ffcc01;
  color:#333;
}
.shoppingCart-pay-dialog {
  text-align: center;
}
.shoppingCart-pay-dialog .shoppingCart-check-box {
  margin-top: 0.375rem;
}
.shoppingCart-dialog-detail > view {
  line-height: 2.125rem;
}
.shoppingCart-payment {
  text-align: left;
  padding: 0 0.9375rem;
}
.shoppingCart-pay-directly {
  margin: 0 0.9375rem;
}

var app = getApp()

Page({
  data: {
    editing: false,
    goodsCount: 0,
    goodsCountToPay: 0,
    priceToPay: 0.00,
    goodsList: [],
    selectAll: false,
    editSelectAll: false,
    modalConfig: {
      hidden: true,
      text: ''
    },
    timeout: null,
    isFromBack: false
  },
  franchiseeId: '',
  isFromUserCenterEle: '',
  onLoad: function(options){
    this.franchiseeId = options.franchisee || '';
    this.isFromUserCenterEle = options.from || '';
    this.getShoppingCartData();
  },
  onShow: function(){
    if(this.data.isFromBack){
      this.getShoppingCartData();
      this.setData({
        selectAll: false
      });
    } else {
      this.setData({
        isFromBack: true
      });
    }
    // app.checkIfBindPhone();
  },
  getShoppingCartData: function(){
    var that = this,
        franchiseeId = this.franchiseeId,
        fromUserCenterEle = this.data.isFromUserCenterEle;

    // 获取购物车列表时 传sub_shop_app_id获取
    app.sendRequest({
      url: '/index.php?r=AppShop/cartList',
      data: {
        page: 1,
        page_size: 1000,
        sub_shop_app_id: fromUserCenterEle ? '' : franchiseeId,
        parent_shop_app_id: franchiseeId ? app.getAppId() : ''
      },
      success: function(res){
        for (var i = res.data.length - 1; i >= 0; i--) {
          var modelArr = res.data[i].model_value;

          if(modelArr && modelArr.join){
            res.data[i].model_value_str = '('+modelArr.join('|')+')';
          }
        }
        that.setData({
          goodsCount: res.data.length,
          goodsList: res.data
        });
        that.recalculateCountPrice();
      }
    })
  },
  switchToEdit: function(){
    this.setData({
      editing: true
    })
  },
  editComplete: function(){
    var list = this.data.goodsList;

    for (var i = list.length - 1; i >= 0; i--) {
      list[i].editSelected = false;
    }

    this.setData({
      editing: false,
      goodsList: list
    })
    this.recalculateCountPrice();
  },
  clickSelectAll: function(){
    var alreadySelect = this.data.selectAll,
        list = this.data.goodsList;

    if(alreadySelect){
      for (var i = list.length - 1; i >= 0; i--) {
        list[i].selected = false;
      }
    } else {
      for (var i = list.length - 1; i >= 0; i--) {
        list[i].selected = true;
      }
    }
    this.setData({
      selectAll: !alreadySelect,
      goodsList: list
    })
    this.recalculateCountPrice();
  },
  clickEditSelectAll: function(){
    var alreadySelect = this.data.editSelectAll,
        list = this.data.goodsList;

    if(alreadySelect){
      for (var i = list.length - 1; i >= 0; i--) {
        list[i].editSelected = false;
      };
    } else {
      for (var i = list.length - 1; i >= 0; i--) {
        list[i].editSelected = true;
      };
    }

    this.setData({
      editSelectAll: !alreadySelect,
      goodsList: list
    })
  },
  clickSelectGoods: function(e){
    var index = e.currentTarget.dataset.index,
        list = this.data.goodsList,
        selectAll = true;

    list[index].selected = !list[index].selected;
    for (var i = list.length - 1; i >= 0; i--) {
      if(!list[i].selected){
        selectAll = false;
        break;
      }
    }
    this.setData({
      goodsList: list,
      selectAll: selectAll
    })
    this.recalculateCountPrice();
  },
  clickEditSelectGoods: function(e){
    var index = e.currentTarget.dataset.index,
        list = this.data.goodsList,
        editSelectAll = true;

    list[index].editSelected = !list[index].editSelected;
    for (var i = list.length - 1; i >= 0; i--) {
      if(!list[i].editSelected){
        editSelectAll = false;
        break;
      }
    }
    this.setData({
      goodsList: list,
      editSelectAll: editSelectAll
    })
  },
  recalculateCountPrice: function(){
    var list = this.data.goodsList,
        totalCount = 0,
        price = 0;

    for (var i = list.length - 1; i >= 0; i--) {
      var goods = list[i];
      if(goods.selected){
        totalCount += +goods.num;
        price += +goods.price * +goods.num;
      }
    }

    this.setData({
      goodsCountToPay: totalCount,
      priceToPay: price.toFixed(2)
    })
  },
  deleteGoods: function(){
    var deleteIdArr = [],
        list = this.data.goodsList,
        listExcludeDelete = [],
        franchiseeId = this.franchiseeId,
        fromUserCenterEle = this.data.isFromUserCenterEle,
        that = this;

    for (var i = list.length - 1; i >= 0; i--) {
      if(list[i].editSelected){
        deleteIdArr.push(+list[i].id);
      } else {
        listExcludeDelete.push(list[i]);
      }
    }
    if(!deleteIdArr.length) { return; }

    app.sendRequest({
      url : '/index.php?r=AppShop/deleteCart',
      method: 'post',
      data: {
        cart_id_arr: deleteIdArr,
        sub_shop_app_id: fromUserCenterEle ? '' : franchiseeId
      },
      success: function(res){
        that.setData({
          goodsList: listExcludeDelete,
          goodsCount: listExcludeDelete.length
        })
      }
    });
  },
  goToPay: function(e){
    var payIdArr = [],
        list = this.data.goodsList,
        franchiseeId = this.franchiseeId,
        fromUserCenterEle = this.data.isFromUserCenterEle,
        selectGoodsType = '',
        cartIdArray = [],
        sameGoodsType = true,
        that = this;

    for (var i = list.length - 1; i >= 0; i--) {
      var li = list[i];
      if(li.selected){
        selectGoodsType = selectGoodsType == '' ? li.goods_type : selectGoodsType;
        if(sameGoodsType && selectGoodsType != li.goods_type){
          sameGoodsType = false;
        }
        cartIdArray.push(li.id);
        payIdArr.push({
          cart_id: li.id,
          goods_id: li.goods_id,
          model_id: li.model_id,
          num: li.num
        });
      }
    }
    if(!payIdArr.length) {
      app.showModal({
        content: '请选择结算的商品'
      })
      return;
    }
    if(sameGoodsType && selectGoodsType == 3){
    // 当购物车勾选商品全部为到店时 不生成订单而是跳转到预览订单页面
      var pagePath = '/pages/previewOrderDetail/previewOrderDetail'+(franchiseeId ? '?franchisee='+franchiseeId : '');

      pagePath += (franchiseeId ? '&' : '?') + 'cart_arr=' + encodeURIComponent(cartIdArray);
      app.turnToPage(pagePath);
      return;
    }

    app.sendRequest({
      url : '/index.php?r=AppShop/addCartOrder',
      method: 'post',
      data: {
        cart_arr: payIdArr,
        formId: e.detail.formId,
        sub_shop_app_id: fromUserCenterEle ? '' : franchiseeId
      },
      success: function(res){
        var pagePath = '/pages/orderDetail/orderDetail?detail='+res.data+(franchiseeId ? '&franchisee='+franchiseeId : '');
        app.turnToPage(pagePath);
      }
    });
  },
  clickMinusButton: function(e){
    var index = e.currentTarget.dataset.index,
        num = this.data.goodsList[index].num;

    if(num-1 < 1) return;
    this.changeGoodsNum(index, 'minus');
  },
  clickPlusButton: function(e){
    var index = e.currentTarget.dataset.index;
    this.changeGoodsNum(index, 'plus');
  },
  changeGoodsNum: function(index, type){
    var goods = this.data.goodsList[index],
        currentNum = +goods.num,
        targetNum = type == 'plus' ? currentNum + 1 : currentNum - 1,
        that = this,
        data = {},
        param;

    data['goodsList['+index+'].num'] = targetNum;
    this.setData(data);
    this.recalculateCountPrice();

    param = {
      goods_id: goods.goods_id,
      model_id: goods.model_id || '',
      num: targetNum,
      sub_shop_app_id: this.franchiseeId
    };
    app.sendRequest({
      url: '/index.php?r=AppShop/addCart',
      data: param,
      success: function(res){
        data = {};
        data['goodsList['+index+'].cart_id'] = res.data;
        that.setData(data);
      },
      fail: function(res){
        data = {};
        data['goodsList['+index+'].num'] = currentNum;
        that.setData(data);
      }
    })
  },
  modalConfirm: function(){
    this.setData({
      'modalConfig.hidden': true
    })
    this.afterModalConfirm && this.afterModalConfirm();
    this.afterModalConfirm = null;
  },
  modalCancel: function(){
    this.setData({
      'modalConfig.hidden': true
    })
  },
  inputGoodsCount: function(e){
    var index = e.target.dataset.index,
        count = e.detail.value,
        data = {};

    data['goodsList['+index+'].num'] = +count;
    this.setData(data);
  }
})