<template>
  <div>
    <status-nav />
    <scroll :data="orderList" class="order-list-scroll-wrap">
      <ul class="list-wrapper">
        <li v-for="order in orderList" :key="order.orderCode">
          <order-list-item :order="order">
            <template #orderStatus="{status}">{{ status }}</template>
          </order-list-item>
          <div class="actions">
            <Button v-for="action in order.buttons" :key="action.code">
              {{ action.text }}
            </Button>
          </div>
        </li>
      </ul>
    </scroll>
  </div>
</template>

<script>
import { Button, Scroll } from "cube-ui";
import { createNamespacedHelpers } from "vuex";
import OrderListItem from "./components/order-list-item";
import StatusNav from "./components/status-nav";

const { mapActions, mapState } = createNamespacedHelpers("order/orderList");

export default {
  components: {
    Button,
    Scroll,
    OrderListItem,
    StatusNav
  },
  computed: {
    ...mapState(["orderList"])
  },
  // 获取订单数据
  asyncData({ store, router }) {
    const { owner, status } = router.params;
    store.dispatch("order/orderList/fetchOrderList", { owner, status });
  },
  mounted() {
    const { owner, status } = this.$route.params;
    this.fetchOrderList({ owner, status });
  },
  methods: {
    ...mapActions(["fetchOrderList"]),
    fetchMore() {
      const { owner, status } = this.$route.params;
      this.fetchOrderList({ owner, status });
    }
  }
};
</script>
<style lang="scss" scoped>
.order-list-scroll-wrap {
  .list-wrapper {
    li {
      padding: 40px 40px;
      border-bottom: 1px solid #eee;
    }

    & :last-child {
      border-bottom: 0;
    }
  }

  .actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;

    button {
      font-size: 24px;
      padding: 24px 64px 22px 64px;
      color: #999;
      letter-spacing: 0;
      border-radius: 0;
      background: #fff;
      border: 1px solid #ccc;
      line-height: 1.3;
      width: 224px;
      margin-right: 20px;
    }

    & :last-child {
      background: #002b47;
      color: #fff;
      border: 1px solid #002b47;
      margin-right: 0;
    }
  }
}
</style>