<view class="tit">
  <view class="tit-back" catchtap="goBack" wx:if="{{his}}">返回</view>
  <text class="tit-text">详情(滑动可移除)</text>
  <view class="tit-tool" catchtap="clearCart">清空</view>
</view>
<view class="pro" animation="{{p._ani}}" wx:if="{{!p.del}}" wx:for="{{plist}}" wx:for-item="p" wx:key="supplyno">
  <view class="pro-con" animation="{{p.ani}}" bindtouchstart="ptouchsatrt" data-index="{{p.index}}" bindtouchend="ptouchend">
    <view class="pimg" data-index="{{p.index}}" data-name="{{p.name}}" data-brand="{{p.brand}}" catchtap="previewImg" >
      <image src="{{p.img}}" mode="aspectFill"></image>
    </view>
    <view class="pname">
      <view class="name">{{p.name}}</view>
      <text class="des">{{p.size}}</text>
    </view>
    <view class="ptprice">￥{{p.price*p.num}}</view>
    <view class="pnum">
      <view class="num num-a" data-type="-1" data-index="{{p.index}}" catchtouchstart="changeNum"><text>-</text></view>
      <text class="num-text">{{p.num}}</text>
      <view class="num num-b" data-type="1" data-index="{{p.index}}" catchtouchstart="changeNum"><text>+</text></view>
    </view>
  </view>
  <view class="del" data-index="{{p.index}}" catchtap="del">
    <text>删除</text>
  </view>
</view>
<view wx:if="{{plist.length==0||total==0}}" class="null">暂无商品</view>
<view class="tool">
  <view class="total">总金额：
    <text>￥{{total}}</text>
  </view>
  <view class="gobuy" bindtap="goOrder">确认下单</view>
</view>
<view class="tool-layer"></view>

page {
  padding: 0 0 55px;
  background-color: #f3f3f3;
}

.tit {
  border-bottom: 1rpx solid #ddd;
  padding: 20rpx 25rpx;
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
}

.tit-back {
  flex: 1;
  text-align: left;
  color: #576b95;
}

.tit-text {
  font-size: 11pt;
  color: #999;
  flex: 2;
}

.tit-tool {
  flex: 1;
  text-align: right;
  color: #576b95;
}

.pro {
  border-bottom: 1rpx solid #eee;
  position: relative;
  overflow-x: hidden;
}

.del {
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
  height:99.5%;
  text-align: center;
  background-color: #f00;
  color: #fff;
  z-index: 1;
  font-size: 15pt;
  display: flex;
  justify-content: center;
  align-items: center;
}

.del text {
  flex: 1;
}

.pro-con {
  height: 140rpx;
  position: relative;
  z-index: 2;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pro-con .pimg {
  width: 150rpx;
  text-align: center;
}

.pro-con .pimg image {
  width: 110rpx;
  height: 100rpx;
  border-radius: 5px;
}

.pro-con .pname {
  flex: 1;
}

.pname .name {
  font-size: 11pt;
}

.pname .des {
  font-size: 11pt;
  color: #999;
}

.pro-con .ptprice {
  width: 150rpx;
  text-align: right;
  padding: 0 30rpx 0 0;
  color: #ff6a00;
  font-size: 13pt;
}

.pro-con .pnum {
  width: 110px;
  display: flex;
  align-items: center;
}

.num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  align-content: center;
}
.num text{flex: 1;}
.num-a {
  border: 1rpx solid #999;
  color: #ff6a00;
  background-color: #f6f6f6;
}

.num-b {
  border: 1rpx solid #ff6a00;
  background-color: #ff6a00;
  color: #fff;
}

.num-text {
  width: 30px;
  line-height: 30px;
  text-align: center;
}

.null {
  text-align: center;
  padding: 20px 0;
  color: #ccc;
  background-color: #fff;
}

.tool {
  position: fixed;
  left: 0;
  bottom: 6px;
  z-index: 3;
  display: flex;
  width: 750rpx;
  align-items: center;
}

.tool .total {
  flex: 2;
  text-align: left;
  padding: 0 20rpx;
  font-size: 11pt;
  color: #999;
}

.tool .total text {
  color: #ff6a00;
  font-size: 15pt;
}

.tool .gobuy {
  flex: 1;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 3px;
  background-color: #576b95;
  border: 1rpx solid #576b95;
  color: #fff;
  margin: 0 20rpx 0 10rpx;
}

.tool-layer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: 53px;
  background-color: #fff;
  opacity: 0.9;
  box-shadow: 0 -1px 5px 0 #eee;
}

var base = getApp();
var preview=require('../../utils/preview.js');
Page({
    data: {
        plist: [],
        total: 0,
        his: ""
    },
    onLoad: function (e) {

    },
    onShow: function (e) {
        if (base.cart.ref) {
            this.setData({ his: base.cart.ref });
            base.cart.ref = "";
        }
        var l = base.cart.getList();
        for (var i = 0; i < l.length; i++) {
            l[i].img = base.path.res + 'images/ksk/item/w_127/' + l[i].name + '.jpg';
            l[i].index = i;
        }
        this.setData({ plist: l });
        this.changeTotal();
    },
    goBack: function () {
        var _this = this;
        wx.navigateTo({
            url: _this.data.his
        })
    },
    previewImg: function (e) {
        preview.show(e.currentTarget.dataset.name,e.currentTarget.dataset.brand,e.currentTarget.dataset.index)
    },
    changeTotal: function () {
        var l = this.data.plist;
        var t = 0;
        for (var i = 0; i < l.length; i++) {
            if (!l[i].del) {//排除删除选项
                t += l[i].price * l[i].num;
            }
        }
        this.setData({ total: t });
    },
    changeNum: function (e) {
        var t = e.currentTarget.dataset.type;
        var index = e.currentTarget.dataset.index;
        var re = this.data.plist[index].num + parseInt(t);
        if (re < 100 && re > 0) {
            var key = "plist[" + index + "].num";
            var obj = {}; obj[key] = re;
            this.setData(obj);
            this.changeTotal();
            base.cart.num(this.data.plist[index].supplyno, obj[key]);
        }
    },
    del: function (e) {
        var index = e.currentTarget.dataset.index;
        var sno = this.data.plist[index].supplyno;
        //var l = this.data.plist;
        // var _l = [];
        //var obj = { total: 0 };
        // for (var i = 0; i < l.length; i++) {
        //     if (i != index) {
        //         // _l.push(l[i]);
        //         obj.total += l[i].price * l[i].num;
        //     }
        // }

        var key1 = "plist[" + index + "].del";
        var obj = {};
        obj[key1] = true;



        // var ani = wx.createAnimation({
        //     duration: 300,
        //     timingFunction:"ease"
        // })
        // ani.height(0).step();
        // var key = "plist[" + index + "]._ani";
        // obj[key] = ani.export();

        this.setData(obj);



        this.changeTotal();
        base.cart.remove(sno);
    },

    clearCart: function () {
        var _this = this;
        if (this.data.total > 0) {
            base.modal({
                title: "确认清空所有商品？", confirmText: "清空", success: function (res) {
                    if (res.confirm) {
                        _this.setData({ plist: [], total: 0 });
                        base.cart.clear();
                    }
                }
            })
        }
    },
    goOrder: function () {
     //   this.ing();
        if (this.data.plist.length > 0 && this.data.total > 0) {
            wx.navigateTo({
                url: '../order/order?from=cart'
            })
        } else {
            base.modal({
                title: '购物车无商品',
                showCancel: false
            })
        }
    },
    tips: ["尽请期待!", "不用点了、暂时下不了单！", "真de、不骗你！", "不信再试试？！", "没错吧？！", "您可以去其它地方转转了！", "嘿、还挺执着！", "就喜欢你这股子劲！", "但没有任何niao用！", "你已经陷入无限轮回..."],
    //,"......", ".........", "好吧、你赢了！", "你即将获得一份随机奖励！", "just for your 执着！", "不过先声明、我们真的还未开放下单！"],
    tipsN: 0,
    ing: function () {
        if (this.tipsN >= this.tips.length) {
            this.tipsN = 0;
        }

        base.modal({
            title: this.tips[this.tipsN],
            showCancel: false
        });
        this.tipsN += 1;



        // if (this.tipsN < this.tips.length) {
        //     base.modal({
        //         title: this.tips[this.tipsN],
        //         showCancel: false
        //     });
        //     this.tipsN += 1;
        // }
        // else {
        //     base.modal({
        //         title: "恭喜",
        //         content: "您已免费获得价值88元经典系列蛋糕优惠券,限领一次",
        //         cancelText: "放弃机会",
        //         confirmText: "立即领取",
        //         showCancel: true,
        //         success: function (res) {
        //             if (res.confirm) {
        //                 wx.navigateTo({
        //                     url: "../buy/buy?type=0&price=88&&pay=free"
        //                 })
        //             } else {

        //             }
        //         }
        //     })
        // }

    },
    p: {
        currentIndex: -1,
        eventOk: true,
        eventStartOk: true,
        aniOk: true,
        len: 0,//当前位置
        ani: wx.createAnimation(),
        // _ani: wx.createAnimation({
        //     duration: 200,
        //     timingFunction: 'ease-out'//
        // }),
        max: 80,
        size: 40
    },
    moveTo: function (index, x) {
        this.p.eventOk = false;//停止事件
        if (x == 0) {
            this.p.currentIndex = -1;
            if (this.p.len > 0 - this.p.max / 2) {
                if (this.p.len > 0) {
                    this.p.ani.translateX(this.p.size).step({
                        duration: 100,
                        timingFunction: 'ease-out'
                    });

                }
                this.p.ani.translateX(0 - this.p.size).step({
                    duration: 200,
                    timingFunction: 'ease'
                });
            }
        }
        if (x == 0 - this.p.max) {
            this.p.currentIndex = index;
            this.p.ani.translateX(x - this.p.size).step({
                duration: 200,
                timingFunction: 'ease'
            });
        }
        this.p.ani.translateX(x).step({
            duration: 200,
            timingFunction: 'ease-out'
        });
        var obj = {};
        var key = "plist[" + index + "].ani";
        obj[key] = this.p.ani.export();
        this.setData(obj);
    },
    ptouchsatrt: function (e) {

        var index = e.currentTarget.dataset.index;
        if (this.p.currentIndex >= 0) {
            this.moveTo(this.p.currentIndex, 0);
            return;
        }
        if (this.p.eventStartOk) {
            this.p.eventOk = true;
            this.p.len = 0;
            var pt = e.changedTouches[0];
            pt.aaaaaaa = 11111;
            this.p.x = pt.pageX;
            this.p.y = pt.pageY;
            console.log("start")
        }
    },
    ptouchend: function (e) {
        if (this.p.eventOk) {
            var pt = e.changedTouches[0];
            var len = pt.pageX - this.p.x;//预计目标位置
            var ht = pt.pageY - this.p.y;
            if (len != 0 && Math.abs(ht) / Math.abs(len) < 0.3) {//滑动倾斜度限制
                this.p.len = len;
                var index = e.currentTarget.dataset.index;
                if (len > 0 - this.p.max / 2) {
                    this.moveTo(index, 0);
                } else {
                    this.moveTo(index, 0 - this.p.max);
                }
            }
        }
        this.p.eventOk = false;
        this.p.eventStartOk = false;
        var _this = this;
        if (this.p.tm) {
            clearTimeout(this.p.tm);
        }
        this.p.tm = setTimeout(function () {
            _this.p.eventStartOk = true;
        }, 300);
    }
});