<template>
  <div style="overflow-y: scroll;">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div style="min-height: calc(100vh - 93px);padding: 13px 0;">
        <div
          class="card"
          v-for="(item, index) in list"
          :key="item.order_id + '-' + index"
        >
          <div class="card_head" v-text="item.order_time"></div>
          <div class="card_body">
            <van-card
              v-for="(v, i) in item.goods"
              :key="v.goods_url + i"
              :num="v.goods_quantity"
              :price="(v.goods_price*1).toFixed(2)"
              :title="v.goods_title"
              :thumb="v.goods_url"
            />
          </div>
          <div class="card_footer" style="text-align: right">合计：{{totalPrice(item.goods)}}</div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
let size = 10,
  page = 1;
import { listOrder } from "@/api/index";
import {
  Toast,
  PullRefresh as VanPullRefresh,
  Card as VanCard,
} from "vant";
import "vant/lib/toast/style/index";
import "vant/lib/card/style/index";
import "vant/lib/pull-refresh/style/index";
export default {
  name: "orders",
  data() {
    return {
      isLoading: false,
      list: [],
    };
  },
  mounted() {
    page = 1;
    size = 10;
    listOrder({ size, page }).then(r => {
      this.list = (r || []).reverse();
    });
  },
  computed: {},
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功 ");
        this.isLoading = false;
      }, 1000);
    },
    totalPrice(list){
        let total = 0;
        for (let i = 0; i < list.length; i++) {
            const  v = list[i];
            total += v.goods_quantity*v.goods_price * 100;
        }
        return (total/100).toFixed(2)
    }
  },
  beforeUnmount: function () {},
  components: {
    VanPullRefresh,
    VanCard,
  },
};
</script>

<style>
.card {
  border-radius: 4px;
  background-color: #fafafa;
  padding: 0 11px;
  margin: 0 13px 13px 13px;
}
.card > div {
  /* height: 24px; */
  line-height: 24px;
  font-size: 12px;
}
.card .card_body {
  border-top: 1px solid #fff;
  border-bottom: 1px dashed #fff;
}
</style>
