<template>
  <div class="content-wrapper">
    <scroll
      @pulling-up="fetchData"
      :options="options"
      :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" />
          <!-- 订单操作 -->
          <order-actions :order="order" />
        </li>
      </ul>
    </scroll>
  </div>
</template>

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

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

export default {
  components: {
    Button,
    Scroll,
    OrderListItem,
    OrderActions
  },
  computed: {
    ...mapState(["entryOrder", "notEntryOrder"]),
    ...mapGetters(["orderList", "pullUpload"]),
    options: function() {
      return {
        pullUpload: this.pullUpload
      };
    },
    isFetchEntryOrder() {
      return this.entryOrder.pullUpload;
    }
  },

  // 获取订单数据
  asyncData({ store, router }) {
    // const { owner, status } = router.params;
    // store.dispatch("order/orderList/fetchOrderList", { owner, status });
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    ...mapActions(["fetchEntryOrderList", "fetchNotEntryOrderList"]),
    fetchData() {
      if (this.isFetchEntryOrder) {
        this.fetchEntryOrderList(this.$route.params);
      } else {
        this.fetchNotEntryOrderList(this.$route.params);
      }
    }
  },
  watch: {
    isFetchEntryOrder(val) {
      if (!val) {
        this.fetchData();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.content-wrapper {
  height: calc(100vh);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-box-orient: vertical;

  .order-list-scroll-wrap {
    .list-wrapper {
      li {
        padding: 40px 40px;
        border-bottom: 1px solid #eee;
      }

      & :last-child {
        border-bottom: 0;
      }
    }
  }
}
</style>