<template>
  <LayoutApp :show-back="true">
    <div class="body">
      <TitleComp txt="确认订单" class="title-class"></TitleComp>
      <AddressInfo :data="address" class="order-item" :show-tip="false"></AddressInfo>
      <ProductInfo :data="orderDetail.good" class="product-info order-item"></ProductInfo>
      <Coupon class="order-item" :data="orderDetail.recommendedCouponInfo" @click="onCouponClick"></Coupon>
      <Promotion class="order-item" :data="orderDetail.promotionTips" @click="onPromotionClick"></Promotion>
      <BuyerFeeInfo :data="orderDetail.promotionFormulaList" class="order-item"></BuyerFeeInfo>
      <div class="tip2 order-item">{{orderDetail.specialTips}}</div>
      <div class="tip order-item" v-html="replaceBr(orderDetail.damagesDesc)"></div>
      <OrderInfo class="order-item" :pay-way="orderDetail.paymentWay"
                 :delivery-way="orderDetail.deliveryWay"></OrderInfo>
    </div>

    <OrderFooter class="footer" :amount="orderDetail.amount"></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 Coupon from './components/confirm/coupon';
import Promotion from './components/confirm/promotion';
import { Types, UserType } from 'store/order/order-confirm';
import { get } from 'lodash';

import { createNamespacedHelpers, mapState } from 'vuex';

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

export default {
  name: 'OrderConfirm',
  props: ['productId', 'storageId'],
  data() {
    return {};
  },
  components: {
    ProductInfo,
    AddressInfo,
    TitleComp,
    BuyerFeeInfo,
    OrderInfo,
    OrderFooter,
    Coupon,
    Promotion
  },
  async mounted() {
    this.fetchUserStatus();
    this.fetchOrderAddress({ tabType: UserType.buy });
    await this.$store.dispatch('product/getSelectedTradeProduct', {
      productId: this.productId,
      storageId: this.storageId
    });

    this.fetchPayment({ skup: this.productDetail.skup });
  },
  computed: {
    ...mapOrderState(['address', 'orderDetail']),
    ...mapState({
      productDetail: state => {
        return {
          skup: get(state.product.selectedProductInfo, 'size.skup', '')
        };
      }
    })
  },
  methods: {
    ...mapOrderAction(['fetchOrderAddress', 'fetchUserStatus', 'fetchPayList', 'fetchPayment']),
    replaceBr(str) {
      return str ? str.replace(/\n/g, '<br />') : '';
    },
    onCouponClick() {
      let vm = this;

      this.couponListActionSheet = this.$createOrderCouponList({
        data: this.orderDetail.couponList,
        onItemClickAction(item) {
          vm.onCouponItemClick(item);
        },
        onConfirmAction() {
          vm.couponListActionSheet.hide();
        }
      }).show();
    },
    onCouponItemClick(item) {
      console.log(item);
    },
    onPromotionClick() {
      let vm = this;

      this.promotionListActionSheet = this.$createOrderPromotionList({
        data: this.orderDetail.promotionList,
        onItemClickAction(item) {
          vm.onCouponItemClick(item);
        },
        onConfirmAction() {
          vm.promotionListActionSheet.hide();
        }
      }).show();
    },
  }
};
</script>

<style lang="scss" scoped>
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 100;
  background-color: white;
  border-top: 1px solid #eee;
}

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

.tip {
  font-size: 24px;
  color: #999;
}

.tip2 {
  font-size: 28px;
}

</style>