<template>
  <layout-app>
    <div class="content-wrapper">
      <scroll
        @pulling-up="fetchData"
        :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" @on-action="() => {}" /> -->
            <div class="footer-wrapper">
              <count-down :leftTime="order.leftTime" />
              <order-actions
                class="actions"
                :order="order"
                @on-action="action => onAction({ action, order })"
              />
            </div>
          </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 OrderInfo from "./components/order-info.vue";
import EmptyList from "./components/empty";
import OrderItemFooter from "./components/order-footer";
import { routeNames } from "../order-detail";

import OrderActions from "../components/order-actions";
import CountDown from "../components/count-down";
import CancelConfirmInfo from "../components/order-list/cancel-confirm-info";

import {
  orderActionsMap,
  ownType
} from "../../../../constants/order-constants";

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

const { mapActions: orderListMapActions } = createNamespacedHelpers(
  "order/orderList"
);

export default {
  components: {
    Scroll,
    OrderListItem,
    OrderInfo,
    EmptyList,
    OrderItemFooter,
    OrderActions,
    CountDown
  },
  computed: {
    ...mapState(["entryOrder", "notEntryOrder", "isShowEmpty"]),
    ...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 });
  },
  activated() {
    this.fetchData();
  },
  methods: {
    ...mapActions(["fetchEntryOrderList", "fetchNotEntryOrderList"]),
    ...orderListMapActions(["cancelTradeConfirmInfo", "cancelTrade"]),
    ...mapMutations(["filterOrderList"]),
    fetchData() {
      if (this.isFetchEntryOrder) {
        this.fetchEntryOrderList();
      } else {
        this.fetchNotEntryOrderList();
      }
    },
    async onAction({ action, order }) {
      console.log("----------action---------", action);
      const { owner = ownType.SELL } = this.$route.params;
      const {
        orderCode,
        earnestMoney = 0,
        realPrice = "",
        priceInfo = {}
      } = order;

      const { productId, storageId, skup } = order.goodsInfo;

      switch (action.name) {
        case orderActionsMap.NOT_SOLD.name:
          const confirmInfo = await this.cancelTradeConfirmInfo({
            orderCode,
            owner
          });
          this.$createDialog(
            {
              type: "confirm",
              confirmBtn: { text: "不卖了" },
              cancelBtn: { text: "继续出售" },
              onConfirm: async () => {
                const isOk = await this.cancelTrade({
                  orderCode,
                  owner
                });
                if (isOk) {
                  this.filterOrderList(orderCode);
                }
                // const txt = isOk ? "取消成功" : "取消失败";
                // this.$createToast({ txt, type: "txt" }).show();
              }
            },
            createElement => {
              return [
                createElement(CancelConfirmInfo, {
                  slot: "content",
                  props: { confirmInfo }
                })
              ];
            }
          ).show();
          break;
        default:
          return;
      }
    }
  },
  watch: {
    isFetchEntryOrder(val) {
      if (!val) {
        this.fetchData();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.content-wrapper {
  height: calc(100vh - 200px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-box-orient: vertical;

  .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>