<template>
  <LayoutApp :show-back="true" title="确认订单">
    <div class="body">
      <AddressInfo :data="address" class="order-item" :show-tip="false"></AddressInfo>
      <ProductInfo :data="orderDetail.good" class="product-info order-item"></ProductInfo>
      <Coupon class="order-item" v-if="couponList.length > 0" :data="orderDetail.recommendedCouponInfo"
              @click="onCouponClick"></Coupon>
      <Promotion class="order-item" v-if="promotionList.length > 0" :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" @click="onPayAction"></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/buyer-order-info';
import OrderFooter from './components/confirm/buyer-order-footer';
import Coupon from './components/confirm/buyer-coupon';
import Promotion from './components/confirm/buyer-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
    });

    const payInfo = await this.fetchPayment({ skup: this.productDetail.skup });

    if (payInfo?.code !== 200) {
      this.$createToast({
        time: 2000,
        txt: payInfo.message,
        type: 'txt'
      }).show();
    }

    if (this.address.address_id) {
      await this.compute();
    }
  },
  computed: {
    ...mapOrderState(['address', 'orderDetail']),
    ...mapState({
      productDetail: state => {
        return {
          skup: get(state.product.selectedProductInfo, 'size.skup', '')
        };
      }
    }),
    couponList() {
      return get(this.orderDetail, 'couponList', []);
    },
    promotionList() {
      return get(this.orderDetail, 'promotionList', []);
    },
  },
  methods: {
    ...mapOrderAction(['fetchOrderAddress', 'fetchUserStatus', 'fetchPayList', 'fetchPayment', 'computeOrder', 'buyPayAction']),
    ...mapOrderMutations([Types.CHANGE_SELECT_COUPON_LIST, Types.CHANGE_SELECT_PROMOTION]),
    replaceBr(str) {
      return str ? str.replace(/\n/g, '<br />') : '';
    },
    onCouponClick() {
      let vm = this;

      this.couponListActionSheet = this.$createOrderCouponList({
        $props: {
          data: this.orderDetail.couponList,
        },
        onItemClickAction(item) {
          vm.onCouponItemClick(item);
        },
        onConfirmAction() {
          vm.couponListActionSheet.hide();
          vm.compute();
        },
        onCloseAction() {
          vm.compute();
        }
      }).show();
    },
    onCouponItemClick(item) {
      this[Types.CHANGE_SELECT_COUPON_LIST](item);
    },
    onPromotionClick() {
      let vm = this;

      this.promotionListActionSheet = this.$createOrderPromotionList({
        $props: {
          data: this.orderDetail.promotionList,
        },
        onItemClickAction(item) {
          vm.onPromotionItemClick(item);
        },
        onConfirmAction() {
          vm.promotionListActionSheet.hide();
          vm.compute();
        },
        onCloseAction() {
          vm.compute();
        }
      }).show();
    },
    onPromotionItemClick(item) {
      this[Types.CHANGE_SELECT_PROMOTION](item);
    },
    compute() {
      return this.computeOrder({
        skup: this.productDetail.skup,
        addressId: this.address.address_id,
        couponCode: get(this.orderDetail, 'recommendedCouponInfo.coupon_code', ''),
        promotionId: get(this.orderDetail, 'promotionTips.promotionIds', '')
      }).then(result => {
        if (result.code !== 200) {
          this.$createToast({
            time: 1500,
            txt: result.message,
            type: 'txt'
          }).show();
        }
      });
    },
    async onPayAction() {
      const vm = this;

      await this.compute();

      const result = await this.buyPayAction({
        skup: this.productDetail.skup,
        addressId: this.address.address_id,
        couponCode: get(this.orderDetail, 'recommendedCouponInfo.coupon_code', ''),
        promotionId: get(this.orderDetail, 'promotionTips.promotionIds', '')
      });

      if (!result?.data?.orderCode) {
        this.$createToast({
          time: 1500,
          txt: result?.message,
          type: 'txt'
        }).show();
        return;
      }

      this.$createOrderPayType({
        orderCode: result.data.orderCode,
        price: this.orderDetail.amount,
        desc: '金额',
        extra: JSON.stringify({
          type: UserType.buy,
          back: {
            name: 'ProductDetail',
            params: {
              productId: this.productId
            }
          },
          forward: {
            name: 'BuyPayOk',
          }
        }),
        onCloseAction() {
          vm.onClose(result.data.orderCode);
        },
      }).show();
    },
    onClose(orderCode) {
      this.$router.replace({
        name: 'buyOrderDetail',
        params: {
          owner: UserType.buy,
          code: orderCode
        }
      });
    }
  }
};
</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: 180px;
  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>