<template>
  <PullRefresh
    v-model="isLoading"
    @refresh="onRefresh">
    <List
      v-model="loading"
      :finished="finished"
      error-text="出错了"
      finished-text="没有更多了"
      @load="onLoad">
      <div
        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支付宝3POS机支付)-->
          <i
            :class="'icon-' + ['', 'wx', 'alipay', 'pos'][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>
      </div>
    </List>
  </PullRefresh>
</template>
<script>
import { List, PullRefresh, Dialog, Toast } from 'vant'
import { apiOrderList, apiOrderCancel } from './api/api'

export default {
  components: {
    List,
    PullRefresh,
    [Dialog.Component.name]: Dialog.Component
  },
  data () {
    return {
      isLoading: false,
      loading: false,
      finished: false,
      isRefresh: false, // 是否下拉刷新
      isFetchLock: false, // 接口调用加锁
      pagenum: 0,
      pagesize: 20,
      list: []
    }
  },
  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()
    },
    onLoad () {
      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)
          }
        } else {
          Toast(msg)
        }
        // 加载状态结束
        this.loading = false
        this.isLoading = false
        this.isFetchLock = false
      } catch (err) {
        this.isFetchLock = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.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: 10px 10px 0;

  .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;
    }

    .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;
}
</style>
