<template>
  <List
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <PullRefresh v-model="isLoading" @refresh="onRefresh">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="title">
          <span class="left">{{ changeStatus(item.order_status) }}</span>
          <span
            :class="[
              'right',
              { 'color-orange': changeState(item.order_status) == '发生退款' },
            ]"
            >{{ changeState(item.order_status) }}</span
          >
        </div>
        <div class="content">
          <p class="amount">￥{{ item.order_price | fen2Yuan }}</p>
          <p class="time">下单时间：{{ item.created_at }}</p>
          <i :class="['icon', { 'icon-wx': item.order_pay_type == 1 }]"></i>
          <div class="btn-box">
            <div
              class="btn-primary"
              v-if="item.order_status !== 0"
              @click="goDetail(item.id)"
            >
              查看订单
            </div>
            <div class="btn-primary" v-if="item.order_status === 0">支付</div>
            <div
              class="btn-defaule"
              v-if="item.order_status === 0"
              @click="cancel(item.id)"
            >
              取消
            </div>
          </div>
        </div>
      </div>
    </PullRefresh>
  </List>
</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 {
      loading: false,
      finished: true,
      isLoading: false,
      page: 1,
      page_size: 10,
      list: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    cancel(id) {
      let _this = this;
      Dialog.confirm({
        title: "",
        message: "确定要取消吗",
      })
        .then(() => {
          apiOrderCancel({ id: id }).then((res) => {
            Toast(res.msg);
            _this.getList();
          });
        })
        .catch((err) => {
          Toast(err);
        });
    },
    goDetail(id) {
      this.$router.push({
        path: "/orderDetail",
        query: {
          id: id,
        },
      });
    },
    changeStatus(status) {
      switch (status) {
        case 0:
          return "待支付订单";
          break;
        case 1:
          return "已支付订单";
          break;
        case 2:
          return "全部退款订单";
          break;
        case 3:
          return "部分退款订单";
          break;
        case 4:
          return "已取消订单";
          break;
      }
    },
    changeState(status) {
      switch (status) {
        case 0:
          return "待支付";
          break;
        case 1:
          return "订单已支付成功";
          break;
        case 2:
          return "发生退款";
          break;
        case 3:
          return "发生退款";
          break;
        case 4:
          return "已取消";
          break;
      }
    },
    getList() {
      apiOrderList({ page: this.page, page_size: this.page_size }).then(
        (res) => {
          this.isLoading = false;
          if (res.code == 200) {
            this.list = res.data.list;
          }
        }
      );
    },
    onLoad() {
      this.page += 1;
      this.finished = false;
      apiOrderList({ page: this.page, page_size: this.page_size }).then(
        (res) => {
          if (res.code == 200) {
            this.list = this.list.concat(res.data.list);
            this.finished = true;
          }
        }
      );
    },
    onRefresh() {
      this.page = 1;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.list-item {
  width: 355px;
  background: #ffffff;
  box-shadow: 0px 3px 4px 0px 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;
    }
    .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>