<template>
  <div ref="afBS"
       class="better-scroll">
    <ul>
      <li
        :class="{'static': isRefresh}"
        class="pulldown-wrapper">
        <van-loading
          v-show="isRefresh"
          size="24px"
          type="spinner">加载中...
        </van-loading>
        <div
          v-show="!isRefresh"
          class="van-loading">
          <span
            class="van-loading__text">下拉刷新</span>
        </div>
      </li>
      <li
        v-for="(item, index) in list"
        :key="index"
        class="list-item">
        <div class="title">
          <span
            class="left">{{ ['待支付订单', '已支付订单', '全部退款订单', '部分退款订单', '已取消订单'][item.order_status] }}</span>
          <span
            :class="{'color-orange': item.order_status === 2}"
            class="right">{{
              ['待支付', '已支付', '发生退款', '发生退款', '已取消'][item.order_status]
            }}</span>
        </div>
        <div class="content">
          <p class="amount">￥{{ item.order_price | fen2Yuan }}</p>
          <p class="time">下单时间：{{ item.created_at }}</p>
          <!--order_pay_type: 1微信2支付宝3现场支付4美团支付5赠送-->
          <i
            :class="'icon-' + ['', 'wx', 'alipay', 'pos', 'meituan', 'zengsong'][item.order_pay_type]"
            class="icon"></i>
          <div class="btn-box">
            <div
              v-if="item.order_status === 0"
              class="btn-defaule"
              @click="cancel(item.id, index)">取消
            </div>
            <div
              class="btn-primary"
              v-if="item.order_status === 0"
              @click="pay">支付
            </div>
            <div
              v-if="item.order_status !== 0"
              class="btn-primary"
              @click="goDetail(item.id)">查看订单
            </div>
          </div>
        </div>
      </li>
      <li class="pullup-wrapper">
        <van-loading
          v-show="!finished"
          size="24px"
          type="spinner">加载中...
        </van-loading>
        <div
          v-show="finished"
          class="van-loading">
          <span
            class="van-loading__text">没有更多了</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import { Dialog, Toast, Loading } from 'vant'
import { apiOrderList, apiOrderCancel } from './api/api'

export default {
  components: {
    'van-loading': Loading
  },
  data () {
    return {
      finished: false, // 所有数据是否加载完
      isRefresh: false, // 是否下拉刷新
      isFetchLock: false, // 接口调用加锁
      pagenum: 0,
      pagesize: 20,
      list: [],
      scroll: null
    }
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.finished = false
      this.isRefresh = false
      this.isFetchLock = false
      this.pagenum = 0
      this.pagesize = 20
      this.list = []
      this.scroll = null
      this.getList()
    } else {

    }
    this.$route.meta.isUseCache = false
  },
  methods: {
    cancel (id, index) {
      Dialog.confirm({
        title: '',
        message: '确定要取消吗'
      }).then(async () => {
        try {
          const { status, msg } = await apiOrderCancel({ id: id })
          if (status) {
            // 手动改变订单状态
            this.$set(this.list[index], 'order_status', 4)
          } else {
            Toast(msg)
          }
        } catch (err) {}
      }).catch((err) => {
        Toast(err)
      })
    },
    pay () {
      // 暂时不用做
    },
    goDetail (id) {
      this.$router.push({
        path: '/orderDetail',
        query: {
          id: id
        }
      })
    },
    onRefresh () {
      this.pagenum = 0
      this.pagesize = 20
      this.finished = false
      this.isRefresh = true
      this.getList()
    },
    async getList () {
      if (this.finished) {
        return
      }
      if (this.isFetchLock) {
        return
      }
      this.isFetchLock = true
      this.pagenum++
      try {
        const { status, data, msg } = await apiOrderList({ page: this.pagenum, page_size: this.pagesize })
        if (status) {
          const { list } = data
          // 下拉刷新数据清空
          if (this.isRefresh) {
            this.isRefresh = false
            this.list = []
          }

          // 没有数据返回了
          if (Array.isArray(list) && !list.length) {
            this.finished = true
          }

          if (Array.isArray(list) && list.length) {
            // 总页数小于等于1页时
            if (list.length < this.pagesize) {
              this.finished = true
            }
            this.list = this.list.concat(list)

            this.$nextTick(() => {
              if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.afBS, {
                  click: true,
                  pullDownRefresh: {
                    threshold: 50, // 顶部下拉的距离
                    stop: 20 // 回弹停留的距离
                  },
                  pullUpLoad: {
                    threshold: -20
                  },
                  scrollbar: true
                })

                this.scroll.on('pullingDown', () => {
                  this.onRefresh()
                })

                this.scroll.on('pullingUp', () => {
                  this.getList()
                })
              } else {
                this.scroll.finishPullDown()
                this.scroll.finishPullUp()
                this.scroll.refresh()
              }
            })
          }
        } else {
          Toast(msg)
        }
        this.isFetchLock = false
      } catch (err) {
        this.isFetchLock = false
      }
    }
  },
  beforeDestroy () {
    this.scroll && this.scroll.destroy()
  },
  beforeRouteLeave (to, form, next) {
    if (['Mine', 'OrderDetail'].findIndex(item => item === to.name) > -1) {
      form.meta.isUseCache = true
    }
    next()
  }
}
</script>
<style lang="scss" scoped>
.better-scroll {
  position: absolute;
  left: 0;
  top: 43px;
  right: 0;
  bottom: 0;
  width: 100%;

  ul {
    padding-top: 10px;
    padding-bottom: 50px;
  }
}

.list-item {
  width: 355px;
  background: #ffffff;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  border: 1px solid #f2f2f2;
  margin: 0 10px 10px;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px 8px;
    border-bottom: 1px solid #f2f2f2;

    .left {
      color: #1f1e1e;
      font-size: 16px;
    }

    .right {
      color: #ccc6c6;
      font-size: 14px;
    }
  }

  .content {
    position: relative;
    padding: 9px 16px 12px;

    .icon {
      position: absolute;
      width: 21px;
      height: 21px;
      top: 15px;
      right: 17px;
      background: url("./image/icon-alipay.png") 0 0 no-repeat;
      background-size: cover;
    }

    .icon-wx {
      background: url("./image/icon-wx.png") 0 0 no-repeat;
      background-size: cover;
    }

    .icon-pos {
      background: url("./image/icon-pos.png") 0 0 no-repeat;
      background-size: cover;
    }

    .icon-meituan {
      background: url("./image/icon-meituan.png") 0 0 no-repeat;
      background-size: cover;
    }

    .icon-zengsong {
      background: url("./image/icon-zengsong.png") 0 0 no-repeat;
      background-size: cover;
    }

    .amount {
      font-size: 24px;
      font-weight: 500;
      color: #d32323;
    }

    .time {
      color: #736f6f;
      font-size: 12px;
      margin-top: 8px;
    }

    .btn-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 16px;

      > div {
        padding: 4px 19px 3px;
        font-size: 12px;
        border-radius: 12px;
        margin-left: 10px;
      }

      .btn-primary {
        background: #d32323;
        color: #fff;
      }

      .btn-defaule {
        background: #ffffff;
        border: 1px solid #f2f2f2;
      }
    }
  }
}

.color-orange {
  color: #e55e10 !important;
}

.pulldown-wrapper {
  position: absolute;
  left: 0;
  top: -43px;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;

  &.static {
    position: static;
    left: 0;
    top: 0;
  }
}

.pullup-wrapper {
  width: 100%;
  text-align: center;
}
</style>
