<template>
  <layout-app title="出售中" class="in-sale-list-wrapper">
    <div class="content-wrapper">
      <LayoutScroll
        @pulling-up="fetchData"
        @pulling-down="onRefresh"
        @scroll="scrollHandler"
        :options="options"
        :loading="loadingOptions"
        :data="orderList"
        class="order-list-scroll-wrap"
        ref="scroll"
      >
        <ul class="list-wrapper">
          <li v-for="(order, i) in orderList" :key="i">
            <order-item :order="order" />
            <!-- 订单操作 -->
            <div class="footer-wrapper">
              <count-down :leftTime="order.leftTime" />
              <order-actions
                class="actions"
                :order="order"
                @on-action="
                  action => {
                    onInSaleOrderAction({ action, order, isInSale: true });
                    onAction({ action, order, isInSale: true });
                  }
                "
              />
            </div>
          </li>
        </ul>

        <empty-list
          class="empty-wrapper"
          tip="这里什么都没有..."
          v-show="isShowEmpty"
        />
      </LayoutScroll>
    </div>
  </layout-app>
</template>

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

import OrderItem from "./components/in-sale-order-item";

import EmptyList from "components//ufo-no-item";

import OrderActions from "../components/order-actions";
import CountDown from "../components/count-down";

import orderInSaleActionMixin from "../mixin/order-in-sale-action";
import orderActionMixin from "../mixin/order-action";

const IN_SALE_STORE_PATH = "order/inSaleOrderList";

const detailRouterNames = ["buyOrderDetail", "sellOrderDetail"];

const {
  mapActions,
  mapState,
  mapGetters,
  mapMutations
} = createNamespacedHelpers(IN_SALE_STORE_PATH);

export default {
  // 订单操作
  mixins: [orderInSaleActionMixin, orderActionMixin],
  data() {
    return {
      scrollY: 0
    };
  },
  components: {
    Scroll,
    OrderItem,
    EmptyList,
    OrderActions,
    CountDown
  },
  computed: {
    ...mapState(["entryOrder", "notEntryOrder", "isShowEmpty"]),
    ...mapGetters(["orderList", "pullUpLoad"]),

    options: function() {
      return {
        pullUpLoad: this.pullUpLoad,
        pullDownRefresh: this.isShowEmpty
          ? false
          : {
              txt: "更新成功"
            },
        bounce: this.isShowEmpty ? false : true
      };
    },
    isFetchEntryOrder() {
      return this.entryOrder.pullUpLoad;
    },
    loadingOptions() {
      return {
        hide: !this.viewOrderList || !this.viewOrderList.length,
        noMore: !this.pullUpLoad
      };
    }
  },

  // 获取订单数据
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$store.commit(`${IN_SALE_STORE_PATH}/resetData`);
      vm.$store.dispatch(`${IN_SALE_STORE_PATH}/fetchEntryOrderList`);
    });
  },
  activated() {
    if (this.scrollY) {
      this.scrollY && this.$refs.scroll.scrollTo(this.scrollY);
    }
  },
  methods: {
    ...mapActions(["fetchEntryOrderList", "fetchNotEntryOrderList"]),
    ...mapMutations(["resetData"]),
    scrollHandler({ y }) {
      this.scrollY = -y;
    },
    onRefresh() {
      this.resetData(this.$route.params);
      this.fetchData();
    },
    fetchData() {
      if (this.isFetchEntryOrder) {
        this.fetchEntryOrderList();
      } else {
        this.fetchNotEntryOrderList();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.in-sale-list-wrapper /deep/ .layout-context {
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1 0 0;
  overflow: hidden;

  .empty-wrapper {
    margin: 20vh 0;
  }

  .footer-wrapper {
    display: flex;
    margin-top: 40px;

    .actions {
      flex: 1;
    }
  }

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

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