<template>
  <div v-if="actionList.length" class="footer-wrapper">
    <slot
      name="tip"
      :orderDetail="orderDetail"
      :statusDetail="statusDetail"
    ></slot>
    <order-actions class="detail-actions" :order="orderDetail" />
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";

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

import OrderActions from "../../components/order-actions";

export default {
  components: {
    OrderActions
  },
  computed: {
    ...mapState(["orderDetail"]),
    ...mapGetters(["actionList", "statusDetail"])
  }
};
</script>

<style lang="scss" scoped>
.footer-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: #fff;
  box-shadow: inset 0 1px 0 0 #eee;
  padding: 20px;
  z-index: 10;

  .detail-actions {
    margin-top: 0;
    flex: 1;
  }
}
</style>