<template>
  <layout-app>
    <status-nav />
    <div class="content-wrapper">
      <scroll
        @pulling-up="fetchMore"
        :options="options"
        :data="orderList"
        class="order-list-scroll-wrap"
        v-show="!isShowEmpty"
      >
        <ul class="list-wrapper">
          <li v-for="order in orderList" :key="order.orderCode">
            <order-info :order="order" />
            <order-list-item :order="order" />
            <!-- 订单操作 -->
            <order-item-footer :order="order" />
          </li>
        </ul>
      </scroll>

      <empty-list v-show="isShowEmpty" />
    </div>
  </layout-app>
</template>

<script>
import { Scroll } from "cube-ui";
import { createNamespacedHelpers } from "vuex";

import OrderListItem from "./components/order-item";
import StatusNav from "./components/status-nav";
import OrderInfo from "./components/order-info.vue";
import EmptyList from "./components/empty";
import OrderItemFooter from "./components/order-footer";

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

export default {
  components: {
    Scroll,
    OrderListItem,
    StatusNav,
    OrderInfo,
    EmptyList,
    OrderItemFooter
  },
  computed: {
    ...mapState(["orderList", "pullUpLoad", "isShowEmpty"]),
    options: function() {
      return {
        pullUpLoad: this.pullUpLoad
      };
    }
  },

  // 获取订单数据
  asyncData({ store, router }) {
    // const { owner, status } = router.params;
    // store.dispatch("order/orderList/fetchOrderList", { owner, status });
  },
  mounted() {
    const { params } = this.$route;
    const { status } = params;
    if (status) {
      this.setOrderStatus(status);
    }
    this.fetchOrderList(params);
  },
  methods: {
    ...mapActions(["fetchOrderList"]),
    ...mapMutations(["setOrderStatus"]),
    fetchMore() {
      this.fetchOrderList(this.$route.params);
    }
  },
  watch: {
    $route() {
      // console.log("---------route change----------");
      // this.fetchOrderList(this.$route.params);
    }
  }
};
</script>
<style lang="scss" scoped>
.content-wrapper {
  height: calc(100vh - 300px);
  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>