<template>
  <div class="snacks-wrapper">
    <mt-swipe :auto="5000" :speed="600" style="position: relative; height: 162px;" ref="banner">
      <mt-swipe-item v-for="item in banner" :key="item.id" :style="{backgroundImage: 'url(' + item.src + ')' }" class="banner"></mt-swipe-item>
    </mt-swipe>
    <scroll :data="goodsList" @scroll="scroll" :listen-scroll="listenScroll" :probe-type="probeType" class="list" ref="list">
      <div class="goods-wrapper" ref="goodsWrapper" >
        <div v-for="goods in goodsList" :key="goods.id" class="goods" :ref="'goods-' + goods.id">
          <div class="thumb">
            <img alt="小盒爆米花" title="小盒爆米花" :src="goods.thumb" />
          </div>
          <div class="content">
            <h1>{{goods.name}}</h1>
            <div class="desc">
              <span>{{goods.desc}}</span>
              <span style="padding-left: 0 5px; font-size: 14px; min-width: 45px;">剩余:
                <font style="color: red">{{goods.surplus}}</font>
              </span>
            </div>
            <div class="footer">
              <div>
                <span class="discount">￥{{goods.discount + ''}}</span>
                <span class="marketPrice">￥{{goods.marketPrice}}</span>
              </div>
              <div class="counter">
                <div v-if="goods.selectCount > 0" @click="unselectGoods(goods.id)"   class="icon">
                  <svg fill="#2395ff">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
                    <svg viewBox="0 0 44 44" id="cart-add" width="100%" height="100%">
                      <path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm0 42C11 42 2 33 2 22S11 2 22 2s20 9 20 20-9 20-20 20z" clip-rule="evenodd"></path>
                      <path fill-rule="evenodd" d="M32 20c1.1 0 2 .9 2 2s-.9 2-2 2H12c-1.1 0-2-.9-2-2s.9-2 2-2h20z" clip-rule="evenodd"></path>
                    </svg>
                  </svg>
                </div>
                <span v-if="goods.selectCount > 0" style="padding: 0px 6px; color: #666">{{ goods.selectCount }}</span>
                <div @click.stop="selectGoods(goods.id)" class="icon add">
                  <svg :fill="goods.selectCount >= goods.surplus ? '#c8c9cc' : '#2395ff'">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
                    <svg viewBox="0 0 44 44" id="cart-minus" width="100%" height="100%">
                      <path fill="none" d="M0 0h44v44H0z"></path>
                      <path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path>
                    </svg>
                  </svg>
                  <div :ref="'add-' + goods.id"  style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 4px; z-index: 999; ">
                    <svg :fill="goods.selectCount >= goods.surplus ? '#c8c9cc' : '#2395ff'">
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
                      <svg viewBox="0 0 44 44" id="cart-minus" width="100%" height="100%">
                        <path fill="none" d="M0 0h44v44H0z"></path>
                        <path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path>
                      </svg>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </scroll>

    <div ref="cartView" class="cartview" style="z-index: 11;">
      <span ref="cart" aria-label="购物车" :attr-quantity="total" class="cart-icon"></span>
      <div aria-label="购物车有商品5件，共44元，配送费&amp;yen;3。" class="cart-info">
        <p class="cart-info-total">
          <span>¥{{totalPrice}}</span>
        </p>
        <p class="cart-info-desc">已省下¥{{(totalMarketPrice - totalPrice).toFixed(2)}}</p>
      </div>
      <div class="cart-submit" @click="toPay">去结算</div>
    </div>
  </div>
</template>

<script>
import Scroll from '@/base/scroll'
import animations from 'create-keyframe-animation'
import { MessageBox, Toast } from 'mint-ui'
import axios from '@/api/axiosApi'

const RESERVED_HEIGHT = 40

export default {
  data () {
    return {
      scrollY: 0,
      banner: [],
      goodsList: []
    }
  },
  created () {
    this.probeType = 3
    this.listenScroll = true
  },
  mounted () {
    this.imageHeight = this.$refs.banner.$el.clientHeight
    this.$refs.list.$el.style.top = `${this.imageHeight}px`
    const openId = localStorage.getItem('openId')
    // const dormitoryId = this.$route.query.dormitoryId
    const _self = this
    if (openId === null) {
      MessageBox.confirm('您当前未登录QD校园，是否跳转登录？').then(action => {
        localStorage.setItem('backPath', _self.$router.currentRoute.path + '?dormitoryId=' + _self.$router.currentRoute.query.dormitoryId)
        _self.$router.push({
          path: '/wechat/login'
        })
      }).catch(() => {})
    }
    this._getPersonInfo()
    this._getBannerList()

    // 注册动画
    this.registerScalAnimation()
  },
  computed: {
    total () {
      let total = 0
      this.goodsList.forEach(goods => {
        if (goods.selectCount > 0) {
          total += goods.selectCount
        }
      })
      return total
    },
    totalPrice () {
      let totalPrice = 0
      this.goodsList.forEach(goods => {
        if (goods.selectCount > 0) {
          totalPrice += goods.selectCount * goods.discount
        }
      })
      return totalPrice.toFixed(2)
    },
    totalMarketPrice () {
      let totalMarketPrice = 0
      this.goodsList.forEach(goods => {
        if (goods.selectCount > 0) {
          totalMarketPrice += goods.selectCount * goods.marketPrice
        }
      })
      return totalMarketPrice.toFixed(2)
    }
  },
  methods: {
    _getPersonInfo () {
      const openId = localStorage.getItem('openId')
      const _self = this
      axios.post('/student/findByOpenId', {
        openId: openId
      }, (data) => {
        let URL = document.URL
        if (typeof URL.split('?')[1] !== 'undefined') {
          if (URL.split('?')[1].indexOf('dormitoryId') === -1) {
            // 重置URL
            window.history.replaceState({}, 0, document.URL + '&' + 'dormitoryId=' + data.dormitoryId)
          }
        } else {
          window.history.replaceState({}, 0, document.URL + '?' + 'dormitoryId=' + data.dormitoryId)
        }
        _self.$route.query.dormitoryId = data.dormitoryId
        if (data.createBy === 'admin') {
          _self.$router.push({
            path: '/wechat/snacks/manage',
            query: {
              dormitoryId: data.dormitoryId
            }
          })
          return
        }
        _self._getGoodsList()
      })
    },
    _getBannerList () {
      axios.get('/snacks/banner', null, (data) => {
        this.banner = data
      })
    },
    _getGoodsList () {
      const dormitoryId = this.$route.query.dormitoryId
      axios.get('/snacks/goods', {
        dormitoryId: dormitoryId
      }, (data) => {
        data.forEach(item => {
          item.discount = (item.discount / 100).toFixed(2)
          item.marketPrice = (item.marketPrice / 100).toFixed(2)
          item.selectCount = 0
        })
        this.goodsList = data
      })
    },
    scroll (pos) {
      this.scrollY = pos.y
    },
    paoAnimation (id, callback) {
      // 加号到顶部的距离
      let iconTop = this.$refs.banner.$el.clientHeight + this.$refs['goods-' + id][0].offsetTop + this.$refs['goods-' + id][0].clientHeight - 6
      // 商品列表滚动的距离
      const scrollTop = this.$refs.list.scroll.wrapperOffset.top - this.$refs.list.scroll.y + RESERVED_HEIGHT
      // 向上滚动
      if (scrollTop > 0) {
        iconTop = iconTop - scrollTop
      }
      // 加号到左边的距离
      const iconLeft = window.innerWidth - this.$refs['add-' + id][0].clientWidth - 12
      const x = iconLeft - this.$refs.cart.offsetLeft - this.$refs.cart.clientWidth / 2
      const y = window.innerHeight - (this.$refs.cartView.clientHeight - this.$refs.cart.offsetTop - this.$refs.cart.clientHeight / 2) - iconTop + 10
      const a = y / (x * x)
      let animation = {}
      for (let i = 0; i <= 10; i++) {
        animation[(i * 10) + '%'] = {transform: `translate(${-i / 10 * x}px,  ${(-i / 10 * x) * (-i / 10 * x) * a}px) rotateZ(${360 * (1 - i / 10)}deg)`}
      }
      animations.registerAnimation({
        name: 'move-' + id,
        animation,
        presets: {
          duration: 250,
          easing: 'linear',
          fillMode: 'forwards',
          resetWhenDone: true
        }
      })
      animations.runAnimation(this.$refs['add-' + id][0], 'move-' + id, callback)
    },
    registerScalAnimation () {
      const animation = {
        '0%': {transform: `scale(1)`},
        '25%': {transform: `scale(1.1)`},
        '50%': {transform: `scale(1.2)`},
        '75%': {transform: `scale(1.1)`},
        '100%': {transform: `scale(1)`}
      }
      animations.registerAnimation({
        name: 'cartScale',
        animation,
        presets: {
          duration: 300,
          resetWhenDone: true
        }
      })
    },
    unselectGoods (id) {
      this.goodsList.forEach(goods => {
        if (goods.id === id && goods.selectCount > 0) {
          if (goods.iconDisabled) {
            return
          }
          goods.selectCount--
          return 0
        }
      })
    },
    selectGoods (id) {
      this.goodsList.forEach(goods => {
        if (goods.id === id && goods.selectCount < goods.surplus) {
          if (goods.iconDisabled === true) {
            return
          }
          goods.iconDisabled = true
          const _self = this
          this.paoAnimation(id, function () {
            animations.runAnimation(_self.$refs.cart, 'cartScale')
            goods.selectCount++
            goods.iconDisabled = false
          })
          return 0
        }
      })
    },
    toPay () {
      if (this.totalPrice <= 0) {
        if (this.toastInstance) {
          this.toastInstance.close()
        }
        this.toastInstance = Toast('请选择商品')
        return
      }
      const openId = localStorage.getItem('openId')
      const _self = this
      if (openId === null) {
        MessageBox.confirm('您当前未登录QD校园，是否跳转登录？').then(action => {
          localStorage.setItem('backPath', _self.$router.currentRoute.path + '?dormitoryId=' + _self.$router.currentRoute.query.dormitoryId)
          _self.$router.push({
            path: '/wechat/login'
          })
        }).catch(() => {})
      } else {
        /* eslint-disable */
        let type = ''
        let ua = window.navigator.userAgent.toLowerCase()
        if (ua.match(/micromessenger/i) == 'micromessenger') {
          type = 'weixin'
        } else {
          type = 'H5'
        }
        MessageBox.confirm('您当前消费' + _self.totalPrice + '元').then(action => {
          axios.post('/snacks/pay', {
            openId: openId,
            feeTotal: parseInt(_self.totalPrice * 100),
            spbillCreateIp: returnCitySN['cip'],
            type: type
          }, (data) => {
            let data1 = data.data
            if (type !== 'H5') {
              data1.timeStamp = data1.timestamp
              if (typeof WeixinJSBridge === 'undefined') {
                if (document.addEventListener) {
                  document.addEventListener('WeixinJSBridgeReady', _self.onBridgeReady(data1), false)
                } else if (document.attachEvent) {
                  document.attachEvent('WeixinJSBridgeReady', _self.onBridgeReady(data1))
                  document.attachEvent('onWeixinJSBridgeReady', _self.onBridgeReady(data1))
                }
              } else {
                _self.onBridgeReady(data1)
              }
            } else {
              window.location.href = data1.mweb_url + '&redirect_url=' + encodeURIComponent('http://www.qdcollege.cn/paySuccess.html?out_trade_no='+ data1.out_trade_no)
            }
          })
          /* eslint-enable */
        }).catch(() => { })
      }
    },
    onBridgeReady (data) {
      /* eslint-disable */
      const _self = this
      WeixinJSBridge.invoke('getBrandWCPayRequest', data, (res) => {
        // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
        if (res.err_msg == 'get_brand_wcpay_request:ok') {
          let urlParams = []
          _self.goodsList.forEach(item => {
            if (item.selectCount > 0) {
              urlParams.push({
                id: item.stockId,
                surplus: item.selectCount
              })
            }
          })
          axios.post('/stock/reduceGoodsNum', {stockslistStr: JSON.stringify(urlParams)}, () => {
            _self._getGoodsList()
          })
          Toast('支付成功')
        } else {
          Toast('支付失败')
        }
      })
      /* eslint-enable */
    }
  },
  components: {
    Scroll
  },
  watch: {
    scrollY (newVal) {
      // console.log(newVal)
      let scale = 1
      const percent = Math.abs(newVal / this.imageHeight)
      if (newVal > 0) {
        scale = 1 + percent
        this.$refs.banner.$el.style.height = `${this.imageHeight * scale}px`
      } else {
        this.$refs.banner.$el.style.height = `${Math.max(RESERVED_HEIGHT, this.imageHeight + newVal)}px`
      }
      this.$refs.list.$el.style.top = this.$refs.banner.$el.style.height + 'px'
      this.$refs.banner.$el.style.zIndex = 10
      // this.$refs.banner.$el.style[transform] = `scale(${scale})`
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~assets/stylus/variable.styl';

.snacks-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  .banner {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 10;
  }

  .list {
    position: fixed;
    top: 0;
    bottom: 48px;
    width: 100%;
  }

  .goods-wrapper {
    .goods {
      display: flex;
      min-height: 85px;
      margin-bottom: 6px;
      padding: 6px 12px;
      border-bottom: 1px solid #eee;

      .thumb {
        width: 20.266667vw;
        height: 20.266667vw;
        margin-right: 3%;

        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
      }

      .content {
        position: relative;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-bottom: 30px;

        h1 {
          font-size: $font-size-medium-x;
          font-weight: bolder;
        }

        .desc {
          font-size: $font-size-medium;
          color: #666;
          font-weight: 400;
          margin: 10px 0 !important;
          display: flex;
          justify-content: space-between;
        }

        .footer {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 30px;
          line-height: 30px;
          display: flex;
          justify-content: space-between;

          .discount {
            font-size: $font-size-medium-x;
            color: $color-theme;
            font-weight: bolder;
          }

          .marketPrice {
            font-size: $font-size-small;
            color: #666;
            text-decoration: line-through;
          }

          .counter {
            display: flex;
            justify-content: center;
            color: #2395ff;
            line-height: 30px;
            min-width: 65px;
            .icon {
              position: relative;
              display: inline-block;
              width: 22px;
              height: 22px;
              padding: 4px;
              vertical-align: middle;

              svg {
                width: 22px;
                height: 22px;
              }
            }

            span {
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  .cartview {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 2.106667rem;
    padding-left: 21.066667vw;
    background-color: rgba(61, 61, 63, 0.9);
    -webkit-backdrop-filter: blur(0.266667rem);
    -webkit-backdrop-filter: blur(2.666667vw);
    height: 1.28rem;
    height: 12.8vw;

    .cart-icon {
      position: absolute;
      left: 0.32rem;
      left: 3.2vw;
      bottom: 0.2rem;
      bottom: 2vw;
      width: 1.333333rem;
      width: 13.333333vw;
      height: 1.333333rem;
      height: 13.333333vw;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-radius: 100%;
      background-color: #3190e8;
      border: 0.133333rem solid #444;
      border: 1.333333vw solid #444;
      -webkit-box-shadow: 0 -0.08rem 0.053333rem 0 rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: 0 -0.8vw 0.533333vw 0 rgba(0, 0, 0, 0.1);
      box-shadow: 0 -0.08rem 0.053333rem 0 rgba(0, 0, 0, 0.1);
      box-shadow: 0 -0.8vw 0.533333vw 0 rgba(0, 0, 0, 0.1);
      will-change: transform;

      &:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTggNTgiPjxkZWZzPjxmaWx0ZXIgaWQ9ImEiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiIHg9Ii01MCUiIHk9Ii01MCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+PGZlT2Zmc2V0IGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiLz48ZmVHYXVzc2lhbkJsdXIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIiBzdGREZXZpYXRpb249IjEuNSIvPjxmZUNvbG9yTWF0cml4IGluPSJzaGFkb3dCbHVyT3V0ZXIxIiByZXN1bHQ9InNoYWRvd01hdHJpeE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA4IDAiLz48ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49InNoYWRvd01hdHJpeE91dGVyMSIvPjxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyIvPjwvZmVNZXJnZT48L2ZpbHRlcj48cGF0aCBpZD0iYiIgZD0iTTcuNjE0IDQuMDUxYy0xLjA2Ni4wODYtMS40NTItLjM5OC0xLjc1Mi0xLjU4NEM1LjU2MiAxLjI4LjMzIDUuODguMzMgNS44OGwzLjcxIDE5LjQ3NmMwIC4xNDgtMS41NiA3LjUxNS0xLjU2IDcuNTE1LS40ODkgMi4xOS4yOTIgNC4yNyAzLjU2IDQuMzIgMCAwIDM2LjkxNy4wMTcgMzYuOTIuMDQ3IDEuOTc5LS4wMTIgMi45ODEtLjk5NSAzLjAxMy0zLjAzOS4wMy0yLjA0My0xLjA0NS0yLjk3OC0yLjk4Ny0yLjk5M0w4LjgzIDMxLjE5MnMuODYtMy44NjUgMS4wNzctMy44NjVjMCAwLTUuNzg4LjEyMiAzMi4wNjUtMS45NTYuNjA2LS4wMzMgMi4wMTgtLjc2NCAyLjI5OC0xLjg0OCAxLjExMy00LjMxNyA0LjAwOC0xMy4yNiA0LjQ1OC0xNS42NC45MzItNC45MjUgMi4wNjEtOC41NTgtNC4yOC03LjQwNSAwIDAtMzUuNzY4IDMuNDg3LTM2LjgzMyAzLjU3M3oiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWx0ZXI9InVybCgjYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMikiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUuMDM4IDcuODA4KSI+PG1hc2sgaWQ9ImMiIGZpbGw9IiNmZmYiPjx1c2UgeGxpbms6aHJlZj0iI2IiLz48L21hc2s+PHVzZSBmaWxsPSIjRkZGIiB4bGluazpocmVmPSIjYiIvPjxwYXRoIGZpbGw9IiMyMDczQzEiIGQ9Ik01My45NjIgNy43NzRsLTUuNzAxIDE5LjMwNS00MC43OCAxLjU3NHoiIG1hc2s9InVybCgjYykiIG9wYWNpdHk9Ii4xIi8+PC9nPjxwYXRoIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjYiIGQ9Ik05LjM3NCAxOC43MjJTNy44NjggMTEuMjgzIDcuMzIzIDguNzFDNi43NzggNi4xMzYgNS44NiA1LjMzIDMuOTc4IDQuNTIgMi4wOTYgMy43MTMuMzY3IDIuMjg2LjM2NyAyLjI4NiIvPjxjaXJjbGUgY3g9IjQ2IiBjeT0iNTEiIHI9IjQiIGZpbGw9IiNGRkYiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjUxIiByPSI0IiBmaWxsPSIjRkZGIi8+PC9nPjwvc3ZnPg==') 50% no-repeat;
        background-size: 0.6rem;
        background-size: 6vw;
        content: '';
      }

      &:after {
        position: absolute;
        right: -1.2vw;
        top: -1.333333vw;
        line-height: 1;
        background-image: -webkit-gradient(linear, right top, left top, from(#ff7416), color-stop(98%, #ff3c15));
        background-image: -webkit-linear-gradient(right, #ff7416, #ff3c15 98%);
        background-image: linear-gradient(-90deg, #ff7416, #ff3c15 98%);
        color: #fff;
        border-radius: 3.2vw;
        padding: 0.053333rem 0.133333rem;
        padding: 0.533333vw 1.333333vw;
        content: attr(attr-quantity);
        font-size: 13px;
      }
    }

    .cart-info {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;

      .cart-info-total {
        font-size: $font-size-large;
        line-height: normal;
        color: #fff;
      }

      .cart-info-desc {
        font-size: $font-size-small;
        color: #999;
      }
    }

    .cart-submit {
      height: 100%;
      width: 28vw;
      background-color: #4cd964;
      color: #fff;
      text-align: center;
      text-decoration: none;
      font-size: $font-size-large-x;
      font-weight: 700;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      line-height: 1.28rem;
      line-height: 12.8vw;
    }
  }
}
</style>