<view class="container">
  <view class="title" catchtap="selectElement">
    <view class="weui-cells__title">更改用餐方式</view>
    <view class="title-dots">
      <view class="title__dot title-takeout__dot" data-selected="takeout"></view>
      <view class="title__dot title-hall__dot" data-selected="hall"></view>
    </view>
    <view class="title-descs">
      <view class="title__desc title-takeout__desc" data-selected="takeout">外送</view>
      <view class="title__desc title-hall__desc" data-selected="hall">堂食</view>
    </view>
    <view class="title-icons">
      <view class="title__icon title-takeout__icon" hidden="{{elementToggle}}">
        <image src="../../image/takeout_active.png"></image>
      </view>
      <view class="title__icon title-hall__icon" hidden="{{!elementToggle}}">
        <image src="../../image/hall_active.png"></image>
      </view>
    </view>
  </view>
  <view class="content">
    <view class="address" hidden="{{elementToggle}}">
      <view class="address-icon--left">
        <image src="../../image/position.png"></image>
      </view>
      <view class="address-index--middle">
        <view class="user__desc">{{userName}}<text>{{OrderWay}}</text></view>
        <view class="address__desc">{{address}}</view>
      </view>
      <view class="address--right">
        <view></view>
      </view>
    </view>
    <view class="shopping-list">
      <view class="shopping-item" wx:for="{{shoppingList}}" wx:key="item">
        <view class="item__name">{{item.name}}</view>
        <view class="item__num">{{item.num}}份</view>
        <view class="item__price">¥{{item.price}}</view>
      </view>
      <view class="shopping-footer">
        待支付{{totalPrice}}元
      </view>
    </view>
  </view>

  <view class="shopcart" bindtap="showCart" hidden="{{cartIsHidden}}">
    <view class="shopcart-main">
      <view class="shopcart-left">
        <image src="../../image/shopcart.png" class="shopcart__icon"></image>
        <view class="shopcart__count">{{totalCount}}</view>
      </view>
      <view class="shopcart-middle">
        <view class="shopcart__price">¥
          <text>{{totalPrice}}</text>
        </view>
      </view>
      <view class="shopcart-right" catchtap="toCount">
        <text>支付</text>
      </view>
    </view>
  </view>
</view>
<view class="list-mask" hidden="{{cartIndexIsHidden}}" animation="{{animationData}}">
  <view hidden="{{cartIndexIsHidden}}" class="shopcart__items" wx:for="{{shoppingList}}" wx:for-item="item">
    <view class="shopcart__item" hidden="{{cartIndexIsHidden}}">
      <view class="cart__left">
        <view class="item__h3">{{item.name}}</view>
        <view class="item__price">¥{{item.price}}</view>
      </view>
      <view class="cart__right">
        <view class="food__add food__add--delete" data-foodidx="{{index}}" data-price="{{item.price}}" data-name="{{item.name}}"
          catchtap="deleteShopcartInCart">-</view>
        <text>{{item.num}}</text>
        <view class="food__add" data-foodidx="{{index}}" data-price="{{item.price}}" data-name="{{item.name}}" catchtap="addShopcartInCart">+</view>
      </view>
    </view>
  </view>
</view>

.container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 667px;
    width: 100%;
    overflow-y: hidden;
    background-color: #f2f2f2;
}

.title {
    height: 87px;
    margin-top: 20px;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    box-shadow: 1px gray;
}

.title .weui-cells__title {
    font-size: 12px;
    margin-top: 7;
    margin-bottom: 11px;
}

.title:after,
.title-descs:after,
.title-dots:after {
    content: ' ';
    clear: both;
    display: table;
}

.title__dot {
    margin-right: 82px;
    float: left;
    background-color: #fff;
    height: 6px;
    width: 6px;
    border-radius: 999px;
    border: 4px solid #d6d3d3;
    position: relative;
}

.title__dot[data-selected="takeout"]::after {
    content: ' ';
    height: 5px;
    width: 160px;
    position: absolute;
    top: 0;
    left: 8px;
    background-color: #d6d3d3;
}

.title-takeout__dot {
    margin-left: 95px;
}

.title-hall__dot {
    margin-left: 73px;
}

.title-descs {
    background-color: #fff;
    margin-top: 3px;
    position: relative;
}

.title__desc {
    text-align: center;
    width: 49%;
    display: inline-block;
    font-size: 12px;
    color: #a9a9a9;
}

.title-takeout__desc {
    width: 48%;
    padding-left: 6px;
}

.title__icon {
    text-align: center;
    width: 25%;
    height: 41px;
    position: absolute;
}

.title-takeout__icon {
    top: 50px;
    left: 50px;
}

.title-hall__icon {
    top: 50px;
    left: 230px;
}

.title__icon image {
    background-color: #fff;
    width: 20px;
    height: 20px;
    padding: 5px;
    border-radius: 999px;
    border: 1px solid #d6d3d3;
}

.shopcart {
    position: fixed;
    background-color: #e02d3f;
    height: 45px;
    width: 100%;
    bottom: 0px;
    left: 0;
    z-index: 9;
}

.shopcart-main {
    display: flex;
    height: 45px;
}

.shopcart-left {
    flex: 2;
    position: relative;
}

.shopcart__icon {
    padding-top: 8px;
    height: 32px;
    width: 50px;
}

.shopcart__count {
    position: absolute;
    top: 5px;
    left: 46px;
    height: 15px;
    width: 15px;
    font-size: 12px;
    border-radius: 99px;
    background-color: #ff7b0f;
    color: #fff;
    text-align: center;
    line-height: 15px;
}

.shopcart-middle {
    flex: 5;
    background-color: #e02d3f;
    border-right: 1px solid #fff;
}

.shopcart__price {
    line-height: 45px;
    text-align: left;
    color: #fff;
}

.shopcart__price text {
    font-size: 24px;
}

.shopcart-right {
    position: relative;
    flex: 3;
    line-height: 45px;
}

.shopcart-right text {
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    margin-left: 14px;
}

.shopcart-right:after {
    content: '';
    position: absolute;
    top: 15px;
    left: 78px;
    height: 12px;
    width: 12px;
    opacity: .7;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotateZ(45deg)
}

.item {
    background-color: rebeccapurple;
}

.list-mask {
    position: fixed;
    width: 100%;
    height: 55px;
    bottom: 0px;
    left: 0px;
    opacity: .8;
    background-color: #fff;
    z-index: 5;
}

.shopcart__items {
    width: 100%;
}

.shopcart__items {
    width: 375px;
    background-color: rgba(0, 0, 0, .7);
}

.shopcart__item {
    height: 65px;
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #f5f0e9;
}

.food__add {
    float: right;
    width: 24px;
    height: 24px;
    line-height: 22px;
    font-size: 16px;
    text-align: center;
    color: #e02d3f;
    border: 1px solid #d6d3d3;
    border-radius: 37px;
}

.cart__left {
    margin-left: 4px;
    margin-top: 8px;
    flex: 1;
}

.cart__right {
    margin-top: 14px;
}

.cart__right .food__delete,
.cart__right text,
.cart__right .food__add {
    float: left;
    margin-right: 6px;
}

.shopcart__items:after,
.cart__right:after {
    clear: both;
    content: ' ';
    display: table;
}

.item__h3 {
    font-weight: 500;
    font-size: 14px;
}

.item__price {
    font-size: 18px;
    color: #e02d3f;
}

.content {
    margin-top: 22px;
    width: 100%;
    background-color: #f2f2f2;
    text-align: center;
}

.content .address {
    width: 100%;
    padding:6px 14px;
    background-color: #fff;
}
.address::after {
    content: ' ';
    display: table;
    clear: both;
}

.address-icon--left,
.address-index--middle,
.address--right {
    height: 100%;
    float: left;
}

.address-index--middle {
    padding: 0 12px;
    width: 70%;
    vertical-align: middle;
}

.address-icon--left {
    margin-top: 22px;
}
.content .address--right view {
    margin-top: 20px;
    margin-left: 20px;
    height: 12px;
    width: 12px;
    border-top: 1px solid #d6d3d3;
    border-right: 1px solid #d6d3d3;
    transform: rotateZ(45deg);
}
.address-index--middle {
    text-align: left;
    opacity: .7;
}
.address-index--middle .user__desc text {
    font-size: 14px;
    font-weight: 450;
    color: #333;
    margin-left: 20px;
}
.address-index--middle .address__desc{
    font-size: 14px;
    color: #a9a9a9;
}

.address-icon--left image {
    height: 20px;
    width: 20px;
}
.shopping-list {
    background-color: #fff;
    margin-top: 22px;
    padding: 12px 8px;
}
.shopping-item {
    display: flex;
    flex-direction: row;
    padding: 10px 0;
}
.shopping-item .item__name {
    font-size: 16px;
    padding-left: 6px;
    color: #333;
    flex: 6;
    text-align: left;
}
.shopping-item .item__num {
    font-size: 16px;
    flex: 2;
    color: #333;
    text-align: center;
}
.shopping-item .item__price {
    font-size: 16px;
    flex: 2;
    text-align: center;
}
.shopping-list .shopping-footer {
     border-top: 1px solid #d6d3d3;
     padding: 26px 30px 10px 10px;
     font-size: 16px;
     color: #e02d3f;
     text-align: right;
}

Page({
  data: {
    elementToggle: null, 
    shoppingList: [],
    totalPrice: 0,
    totalCount: 0,
    movelength: 0,
    address: '',
    userName: '',
    OrderWay: '',
    cartIsHidden: false,
    cartIndexIsHidden: true,
    animationData: {}
  },
  onReady: function () {
    wx.setNavigationBarTitle({
      title: '订单'
    })
  },
  onLoad: function (options) {
    let that = this
    wx.getStorage({
      key: 'OrderMenu',
      success: function (res) {
        console.log(res.data.list);
        that.setData({
          shoppingList: res.data.list,
          totalPrice: res.data.price,
          totalCount: res.data.count,
          movelength: res.data.list.length,
        })
      }
    })
    wx.getStorage({
      key: 'OrderWay',
      success: function (res) {
        console.log(res.data);
        that.setData({
          OrderWay: res.data
        })
      }
    })
    wx.getStorage({
      key: 'OrderAddress',
      success: function (res) {
        console.log(res.data);
        that.setData({
          address: res.data.address[0],
          elementToggle: res.data.isHall
        })
      }
    })
    wx.getUserInfo({
      success: function (res) {
        let userInfo = res.userInfo
        let nickName = userInfo.nickName
        let avatarUrl = userInfo.avatarUrl
        let gender = userInfo.gender //性别 0：未知、1：男、2：女 
        let province = userInfo.province
        let city = userInfo.city
        let country = userInfo.country
        // console.log(nickName)
        that.setData({
          userName: nickName,
        })
      }
    })
  },
  selectElement: function (e) {
    let element_toggle = !this.data.elementToggle
    this.setData({
      elementToggle: element_toggle
    })
  },
  showCart: function (e) {
    let animation = wx.createAnimation({
      duration: 400,
      timingFunction: "linear",
      delay: 0
    });
    let move_length = 0;
    move_length = this.data.movelength * 55;
    if (this.data.movelength > 1) {
      move_length = 55 + (this.data.movelength - 1) * 65;
    }
    this.animation = animation
    animation.bottom(move_length).step()
    let cart_indexIsHidden = !this.data.cartIndexIsHidden;
    this.setData({
      // movelength: move_length,
      cartIndexIsHidden: cart_indexIsHidden,
      animationData: animation.export()
    })
  },
  addShopcartInCart: function (e) {
    let total_count = this.data.totalCount + 1;
    let addTarget = this.data.shoppingList.findIndex(item => item.name === e.target.dataset.name);
    this.data.shoppingList[addTarget].num++;
    let tempPrice = parseInt(this.data.totalPrice) + parseInt(this.data.shoppingList[addTarget].price)
    this.setData({
      shoppingList: this.data.shoppingList,
      totalPrice: tempPrice,
      totalCount: total_count
    })
  },
  deleteShopcartInCart: function (e) {
    let move_length = this.data.movelength;
    let addTarget = this.data.shoppingList.findIndex(item => item.name === e.target.dataset.name);
    let tempPrice = 0;
    let total_count = this.data.totalCount - 1;
    this.data.shoppingList[addTarget].num--;
    if (this.data.shoppingList[addTarget].num < 1) {
      tempPrice = parseInt(this.data.totalPrice) - parseInt(this.data.shoppingList[addTarget].price)
      this.data.shoppingList.splice(addTarget, 1);
      move_length--;
      let animation = wx.createAnimation({
        duration: 400,
        timingFunction: "linear",
        delay: 0
      });
      let mlength = move_length * 61;
      if (move_length < 2) {
        mlength = move_length * 50
      }
      if (move_length < 1) {
        mlength = -55
      }
      console.log(this.data.totalPrice)
      this.animation = animation
      animation.bottom(mlength).step()
      if (total_count == 0) {
        let cart_isHidden = !this.data.cartIsHidden
        console.log(cart_isHidden)
        setTimeout(() => {
          this.setData({
            cartIsHidden: cart_isHidden
          })
          wx.navigateBack()
        }, 1000)

      }
      this.setData({
        shoppingList: this.data.shoppingList,
        movelength: move_length,
        animationData: animation.export(),
        totalPrice: tempPrice
      })
    } else {
      tempPrice = parseInt(this.data.totalPrice) - parseInt(this.data.shoppingList[addTarget].price)
      console.log(this.data.totalPrice)
    }

    this.setData({
      shoppingList: this.data.shoppingList,
      totalPrice: tempPrice,
      totalCount: total_count
    })
  },
  toCount: function (e) {
    // let OrderMenu = {
    //   list: this.data.shoppingList,
    //   price: this.data.totalCount
    // }
    // wx.setStorage({
    //   key: "OrderMenu",
    //   data: OrderMenu
    // });
    wx.navigateTo({
      url: '../order/order'
    })
  }
})