<template>
  <div class="af-reserve">
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        error-text="出错了"
        @load="onLoad"
        class="content">
        <ul>
          <li
            v-for="(item, idx) in reserveList"
            :key="item.id">
            <p class="status-wrap">
              <span>{{ item.order_pre_time }}</span>
              <span
                :class="{'col-D32323': item.order_status === 1 }">{{
                  ['待支付', '已支付', '已退款', '部分退款', '已取消'][item.order_status]
                }}</span>
            </p>
            <p class="place-name">{{ item.place_name }}</p>
            <p class="outlet">{{ item.bar_name }}</p>
            <div class="payment">
              <p class="number">订位人数：{{ item.order_user_num }}</p>
              <p class="amount">
                <span>合计：{{ item.order_pay_price | fen2Yuan }}</span>
                <img src="./image/ic_Alipay_nor@2x.png" alt="" v-show="item.order_pay_type === 2">
                <img src="./image/ic_WeChat_nor@2x.png" alt="" v-show="item.order_pay_type === 1">
              </p>
            </div>
            <p class="create-at">订单创建时间：{{ item.created_at }}</p>
            <div class="btn-wrap">
              <van-button
                class="pay"
                type="danger"
                v-if="item.order_status === 0">支付
              </van-button>
              <van-button
                class="cancel"
                type="default"
                :disabled="booLock"
                @click="funRefund(item,idx)"
                v-if="item.order_status === 1">退款
              </van-button>
              <van-button
                class="check-code"
                type="danger"
                @click="funJump(item)"
                v-if="item.order_status === 1">我的订座二维码
              </van-button>
            </div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { apiReserveList, apiRefund } from './api'
import { PullRefresh, List, Button, Toast, Dialog } from 'vant'

export default {
  components: {
    'van-pull-refresh': PullRefresh,
    'van-list': List,
    'van-button': Button
  },
  data () {
    return {
      reserveList: [],
      isLoading: false,
      loading: false,
      finished: false,
      pagenum: 0,
      pagesize: 20,
      pagecount: 1,
      isRefresh: false,
      booLock: false
    }
  },
  methods: {
    onRefresh () {
      this.pagenum = 0
      this.pagesize = 20
      this.pagecount = 1
      this.finished = false
      this.isRefresh = true
      this.getList()
    },
    onLoad () {
      this.getList()
    },
    /**
     *  请求数据方法
     */
    async getList () {
      if (this.pagenum >= this.pagecount || this.pagecount === 0) {
        this.finished = true
        return
      }
      this.pagenum++
      try {
        const { status, data, msg } = await apiReserveList(this.pagenum, this.pagesize)
        if (status) {
          const { total, list } = data
          this.pagecount = Math.ceil(total * 1 / this.pagesize)

          // 下拉刷新数据清空
          if (this.isRefresh) {
            this.isRefresh = false
            this.reserveList = []
          }

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

          if (Array.isArray(list) && list.length) {
            this.reserveList = this.reserveList.concat(list)
          }
        } else {
          Toast(msg)
        }
        // 加载状态结束
        this.loading = false
        this.isLoading = false
      } catch (err) {
        console.log(err)
      }
    },
    funJump (item) {
      this.$store.commit('placeCheck/UPDATE_OBJPLACECHECK', item)
      this.$nextTick(() => {
        this.$router.push({ name: 'PlaceCheck' })
      })
    },
    // 退款
    async funRefund (item, idx) {
      Dialog.confirm({
        message: '您是否确认退款？',
        messageAlign: 'left'
      }).then(async () => {
        try {
          const { status, msg } = await apiRefund(item.id)
          if (status) {
            Toast('退款成功')
            this.reserveList.splice(idx, 1, {
              ...item,
              order_status: 2 // 这里没有调用接口，手动修改订单状态
            })
          } else {
            Toast(msg)
          }
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        // on cancel
      })
    }
  }
}
</script>

<style scoped lang="scss">
.af-reserve {
  .content {
    min-height: 100vh;
    padding-bottom: 30px;
  }
}

ul {
  li {
    width: 100%;
    padding: 16px 20px 10px;
    margin: 6px auto;
    background: #fff;

    &:nth-of-type(1) {
      margin-top: 0;
    }
  }
}

.status-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 17px;

    &:nth-of-type(1) {
      color: #1F1E1E;
    }

    &:nth-of-type(2) {
      color: #CCC6C6;

      &.col-D32323 {
        color: #D32323;
      }
    }
  }
}

.place-name {
  margin-top: 16px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1F1E1E;
  line-height: 25px;
  letter-spacing: 1px;
}

.outlet {
  margin-top: 4px;
  font-size: 14px;
  color: #736F6F;
  line-height: 20px;
}

.number {
  font-size: 14px;
  color: #736F6F;
  line-height: 20px;
}

.payment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.amount {
  display: flex;
  align-items: center;

  span {
    font-size: 14px;
    color: #736F6F;
    line-height: 20px;
  }

  img {
    width: 21px;
    height: 21px;
    margin-left: 10px;
  }
}

.create-at {
  margin-top: 12px;
  font-size: 14px;
  color: #736F6F;
  line-height: 20px;
}

.btn-wrap {
  text-align: right;

  ::v-deep .van-button {
    margin-left: 10px;

    &:nth-of-type(1) {
      margin-left: 0;
    }

    .van-button__text {
      font-size: 12px;
      color: #FFFFFF;
      line-height: 24px;
    }
  }

  .pay {
    width: 64px;
    height: 24px;
    background: #D32323;
    border-radius: 12px;
    border: none;
  }

  .check-code {
    width: 118px;
    height: 24px;
    background: #D32323;
    border-radius: 20px;
  }

  .cancel {
    width: 64px;
    height: 24px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #F2F2F2;

    .van-button__text {
      color: #736F6F;
    }
  }

  .hide {
    width: 82px;
    height: 24px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #F2F2F2;

    .van-button__text {
      color: #736F6F;
    }
  }
}
</style>
