<template>
  <LayoutApp :show-back="true">
    <div class="body">
      <TitleComp txt="出售"></TitleComp>
      <ProductInfo :data="{}" class="product-info"></ProductInfo>
      <InputPrice class="input-price"></InputPrice>
      <OrderMargin class="order-item order-margin"></OrderMargin>
      <OrderFee class="order-item"></OrderFee>
      <AddressInfo :data="address" class="order-item"></AddressInfo>
      <OrderAgree v-model="agree" class="order-item"></OrderAgree>
    </div>
    <YohoButton :txt="txt" class="footer" @click="onClick"></YohoButton>
  </LayoutApp>
</template>

<script>

import ProductInfo from './components/confirm/product';
import InputPrice from './components/confirm/input-price';
import AddressInfo from './components/confirm/address';
import TitleComp from './components/confirm/title';
import OrderMargin from './components/confirm/order-margin';
import OrderFee from './components/confirm/order-fee';
import OrderAgree from './components/confirm/agree';

import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('order/orderConfirm');

const UserType = {
  sell: 'sell',
  buy: 'buy'
}

export default {
  name: 'OrderConfirm',
  props: {
    orderCode: {
      type: String,
      default: ''
    }
  },
  components: {
    ProductInfo,
    AddressInfo,
    InputPrice,
    TitleComp,
    OrderMargin,
    OrderFee,
    OrderAgree
  },
  data() {
    return {
      txt: '提交',
      agree: false
    };
  },
  mounted() {
    this.fetchOrderAddress({tabType: UserType.sell});
  },
  computed: {
    ...mapState(['orderDetail', 'address'])
  },
  methods: {
    ...mapActions(['fetchOrderAddress']),
    onClick() {
      this.$createOrderPayType().show();
    }
  }
};
</script>

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

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

.order-item {
  padding-top: 40px;
  padding-bottom: 40px;
}

.order-item + .order-item {
  border-top: 1px solid #eee;
}

</style>