<template>
  <LayoutApp :show-back="true">
    <div class="body">
      <TitleComp txt="确认订单" class="title-class"></TitleComp>
      <AddressInfo :data="orderDetail.userAddress" class="order-item" :show-tip="false"></AddressInfo>
      <ProductInfo :data="orderDetail.goodsInfo" class="product-info order-item"></ProductInfo>
      <BuyerFeeInfo :data="price" class="order-item"></BuyerFeeInfo>
      <OrderInfo class="order-item"></OrderInfo>
    </div>

    <OrderFooter class="footer"></OrderFooter>
  </LayoutApp>
</template>

<script>

import ProductInfo from './components/confirm/buyer-product';
import AddressInfo from './components/confirm/address';
import TitleComp from './components/confirm/title';
import BuyerFeeInfo from './components/confirm/buyer-fee';
import OrderInfo from './components/confirm/order-info';
import OrderFooter from './components/confirm/buyer-order-footer';

import { createNamespacedHelpers } from 'vuex';

const { mapState, mapActions, mapMutations } = createNamespacedHelpers('order/orderConfirm');

export default {
  name: 'OrderConfirm',
  props: {
    orderCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      price: {}
    };
  },
  components: {
    ProductInfo,
    AddressInfo,
    TitleComp,
    BuyerFeeInfo,
    OrderInfo,
    OrderFooter
  },
  mounted() {
    this.fetchOrderDetail({ orderCode: this.orderCode });
  },
  computed: {
    ...mapState(['orderDetail'])
  },
  methods: {
    ...mapActions(['fetchOrderDetail'])
  }
};
</script>

<style lang="scss" scoped>
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 100;
}

.body {
  height: 100%;
  margin: 0 40px;
  padding-bottom: 100px;
  overflow-y: auto;
}

.title-class {
  margin-bottom: 30px;
}

.order-item {
  padding-top: 40px;
  padding-bottom: 40px;
  border-top: 1px solid #eee;
}

.product-info {
  height: 260px;
}

</style>